HTML学习总结
Karmen_的HTML学习总结
0. 何为HTML
HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用HTML来构建web即所谓的网页。
| Hypertext 是指链接单个网站内或多个网站间的网页的链接。 链接是网络的一个基本方面。 |
HTML 定义了网页内容的含义和结构。除了HTML以外的其他技术通常用来描述一个网页的表现与展示效果(CSS)，或者功能与行为(JavaScript)。
HTML 是一种用于定义内容结构的标记语言而非编程语言，任何一个网页背后都是一个HTML文档，在网页中按F12即可查看源代码。
| HTML ,CSS(Cascading Style Sheets 级联式样式表),JavaScript是构架Web程序的三要素。 |
1. HTML文档结构
搭建工作环境：VScode1以及相关插件的安装code下载。
创建自己第一个HTML文档：
- 运行VScode，新建一个文件夹2,同时打开自动保存，避免工作时程序崩坏文件丢失。
- 创建一个后缀名为html的文件，输入以下内容查看结果：
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>页面标题title>
head>
<body>
<h5>我的第一个Web页h5>
<p>当前有点丑：)p>
body>
html>
- 右键html文件，选择用游览器打开3展示结果如下：
我的第一个Web页
当前有点丑：)
1.1文档结构分析
HTML元素：HTML使用标记来注明文本，图片和其他内容，以便于在游览器中显示。HTML中包含了很多规定的元素，如 ,等，它们可以嵌套，同时元素又由一对标签(tag)组成，并且都遵循这这样一个书写格式：
- 开始标签（Opening tag）：包含元素名称，被角括号包围。表示元素从这里开始起作用。
- 结束标签（Closing tag）：包含元素名称，被角括号包围。表示元素从这里结束4。
- 内容（Content）：元素内容，本例时所输入的文本本身。
- 元素（Element）：由以上三种元素组成。
HTML文档：针对前面所创建的HTML文档，结构剖析如下：
：声明文档类型。现在已经可有可无。：此元素包裹了整个完整页面，是一个根元素，其他元素都嵌套在其中。：此元素是一个容器，它包含了所有你想包含在HTML页面中但不想直接显示在主页面的内容。这些内容包含了你想在搜索结果中出现的关键字和页面描述，css样式，字符集声明等等。：这个元素设置了文档使用UTF8编码，基本上能识别你放上去的所有文本内容，通常直接默认使用它。：指定页面图标5，出现在游览器标签上。：此元素包含了你能在页面中看到的所有内容，包括文本，图片，音频，游戏等等。
| 注意：HTML不区分标签大小写，但建议全部使用小写。 |
1.2文档相关说明
注释：和大部分编程语言一致在HTML中有一种可用的机制在代码中书写注释。注释在客户端是被忽略对用户不可见的，只对后台开放。
为了将一段HTML中的内容置为注释，需要用把它包裹起来，比如：
<p>注释外可显示的文本内容p>
此内容过于简单不再展示。
| 提示：在code软件中输入Ctrl+/即可快捷注释。 |
空元素：元素一般都由开始标签，结束标签形成头尾。但有一些元素只有一个开始标签，如： 等等，我们称其为空元素，一般用来在元素所在位置插入/嵌套一些东西。
元素的属性：元素是有相关属性的。属性包含元素的额外信息，这些信息不对外显示。
<p title="这是个title属性">鼠标移上来试试！p>
<input type="text">
<input type="password">
一个属性必须包含以下内容：
- 一个空格，在属性和元素名称之间6。
- 属性名称，后面跟着一个
=号。 - 一个属性值，由一对引号引起来。
2. HTML基础语法
2.1 标题
HTML和markdown一样提供了从大到小6级标题， ~
在页面中标题非常重要：
- 搜索引擎通过标题来索引页面内容
- 用户也习惯依赖标题来进行主要内容浏览**（标题党）**
（内容过于简单不予展示）
| 小贴士：h1最醒目，通常用于主标题，但设计页面的同时不应为了醒目而盲目加粗或者放大。 |
2.2 文本格式
本次课程我们需要知道的文本格式标签如下：
| 高亮文本 | |
|---|---|
| 同上，通常用 |
|
| 标签定义已经被插入文档中的文本（推荐于del一起使用） | |
| 标签可定义下划线文本 | |
| 字体变小 | |
| / | 字体加粗 |
| / | 字体变斜 |
2.3 超链接 a
超链接语法：
<a href="https://www.baidu.com/" target="_blank">澳门赌场入口a>
成分剖析：
href：即为要跳转去的网址URL。target：属性为_blank表示在新的页面打开超链接（默认是在当前页面打开_self）。- 超链接标签包含的内容（可以是图片）即为客户端所呈现的供点击内容。
效果展示：
澳门赌场入口
锚点：锚点也称为书签，用于标记页面的某个元素的位置，通过锚点实现长页面内部跳转。
使用方法：通过**id**属性生成锚点，然后再用超链接指向该锚点即可：
<h2 id="C4">塑胶炸药h2>
<a href="#C4">转至塑胶炸药所在地a>
效果展示7：
塑胶炸药
转至塑胶炸药所在地
| 注意：元素id的值唯一；并且href所指向的锚点id前要有#。 |
2.4 图片及文件路径 img
图片：
在页面插入一张图片语法如下：
>
效果展示7：
元素剖析：
src属性表示要显示图片文件的位置URL/路径。alt属性表示当获取图片出错时显示的文字（占位符）。- 可为图片指定尺寸，但不建议（可能导致图片变形）。
| 注意：对于小尺寸的图片，可以采用Base64转码方法来提高页面加载速度，以此来提高用户体验。对于大尺寸图片可以使用WebsitePlanet或TinyPNG(CN)等压缩工具来解决图片加载速度过慢的问题。 |
文件路径：
文件路径表示文件的位置，共有相对路径和绝对路径两种。
绝对路径不再解释，下面请看相对路径的典例：
| 例子 | 解释 |
|---|---|
|
图片文件与当前文档在同一目录中 |
|
图片文件在当前目录下的images目录中 |
|
该图片文件在上一级目录中 |
2.5 表 Table/List/Form
表格 Table：
当页面中的内容需要表格来整理时，我们选择使用
<table>
<tr>
<th>是表头th>
<th>第二个表头th>
<th>th>
tr>
<tr>
<td>我是第一列第一个元素td>
<td>母猪的产后护理td>
<td>你看下面的元素缺失了td>
tr>
<tr>
<td>尼古拉斯td>
<td align="right">向右对齐td>
tr>
table>
以上代码效果如下7：
| 是表头 | 第二个表头 | |
|---|---|---|
| 我是第一列第一个元素 | 母的产后护理 | 你看下面的元素缺失了 |
| 尼古拉斯 | 向右对齐 |
元素剖析： 列表 List： HTML的列表和markdown一样分为有序列表和无序列表，显示效果基本一致。 无序列表： 代码效果如下8： 元素剖析： 无序列表使用 有序列表： 代码效果如下： 表单 Form： 当网站需要获取我们的一些信息如：账户，选择，意见等，我们就需要使用表单来让用户进行填写或选择。 HTML 的元素可以称为区块或内联的方式进行显示： 区块元素： 区块元素在游览器显示时通常会以**新行**来开始和结束，比如：表示行， 表示行中的单元， 表示的是表头的单元。由上图可知缺失元素时表格会向左对齐。
<ul>
<li>我是爷爷li>
ul>
<ul type="square">
<li>我是奶奶li>
<ul type="circle">
<li>俺是孙zeli>
ul>
<ol>
<li>有序列表使用<kbd>olkbd>标签li>
<li>它默认以数字作为每项标志，其他的标志可以是大小写字母或是罗马字母ili>
ol>
<ol type="a">
<li>我是小写字母ali>
<li>我是小写字母bli>
ol>
<ol type="i">
<li>我是罗马编号ili>
<li>我是罗马编号iili>
ol>
<form>
用户名：<br>
<input type="text" name="name" placeholder="请输入用户名"><br>
密码：<br>
<input type="password" name="ps" placeholder="这里是未被访问时所展示内容"><br>
form>
value属性为默认值：年龄：<br>
<input type="number" name="age" min="18" value="18"><br>
checked属性代表默认点击。<form>
性别：<br>
<input type="radio" name="gender" value="male" checked> 男<br>
<input type="radio" name="gender" value="female"> 女<br>
<input type="radio" name="gender" value="other"> 这里的type表示选项按钮外观<br>
form>
selected属性表示默认选择内容。<form>
党派：<br>
<select name="party">
<option value="D">民主党option>
<option value="R" selected>共和党option>
<option value="N">无党派option>
select><br>
form>
checked属性与单选列表相同。<form>
您有哪些交通工具：<br>
<input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
<input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
<input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
<input type="checkbox" name="vehicle4" value="Jet"> 这里的type表示选项按钮外观<br>
form>
<form>
点击选择日期：<br>
<input type="date"><br>
form>
<form>
上传您的文件:<br>
<input type="file" name="Files"><br>
form>
rows与cols分别表示行数和每行最大字数。<form>
您的建议：<br>
<textarea name="message" rows="5" cols="30">
这是默认展示的文本内容。
textarea><br><hr>
form>
<form>
<input type="submit" value="提 交">
<input type="reset" value="重 置">
form>
2.6 其他
,
,