HTML基础笔记

发表于 更新于 分类于 本文字数： 5.6k 阅读时长 ≈ 5 分钟

知识点提及

Web 标准的构成（重点）

​ 主要包括结构（structure框架html）、表现（presentation颜色css）、行为（behavior交互js），要互相分离。

HTML语法规范

​ 单标签极少出现

1
<br />

​ 包含关系与并列关系（此处是骨架标签，需记）

1
2
3
4
5
6
7
8
<html>
	<head>
    <title></title>
  </head>
	<body>
    键盘敲烂，工资过万
  </body>
</html>

​ “! + tab” 自动生成html骨架
! DOCTYPE = document type

1
2
3
4
<!DOCTYPE html> // 文档类型声明标签，不属于html，表示在使用html5
<html lang="en"> //lang标签=language，这是个什么语言的网页
  <meta charset="UTF-8"> //字符集（character set）“万国码” 防止出现乱码
</html>
符号参考表（不全）：
特殊字符 描述 字符的代码
空格符 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
¥ 人民币 &yen;
© 版权 &copy;
® 注册商标 &reg;
° 摄氏度 &deg;
± 正负号 &plusm;
× 乘号 &times;
÷ 除号 &divide;
² 平方 &sup2;
³ 立方 &sup3;

语法

语义标签

标题标签h1~h6

1
<h1></h1>

段落标签

​ （根据浏览器页面大小，自动换行）

1
2
<p>第一段</p>
<p>第二段</p>

换行标签

​ （强制换行）
​ br = barter rabbet

1
<br />

黑体标签

​ （更推荐使用strong标签，因为在CSS里可以做进一步的美化）

1
2
<strong>黑体</strong>
<b>黑体</b>

斜体

​ （更推荐使用em标签，语义更强）
​ em = emphasize

1
2
<em>斜体</em>
<i>斜体</i>

删除线

​ （更推荐使用del标签，语义更强）
​ s/strike = strikethrough

1
2
3
<del>删除线</del>
<s>删除线</s>
<strike>等同于s</strike>

下划线

​ （更推荐使用ins标签，语义更强）
​ ins = inserted text

1
2
<ins>下划线</ins>
<u>下划线</u>

非语义标签

盒子标签📦

​ （div是分区，一个div自己占据一整行；span是跨距，一行里可以有很多span。简言之，div是大盒子，span是小盒子）
​ div = division 

1
2
<div>占据一整行</div>
<span>一行可以有很多个</span>

图像标签🌆

​ （注意是单标签，可改width，height「通常width和height里只改一个，不然会让图片变形」，border「通过CSS修改样式」）
​ src = source

1
<img src="example.jpg" width="10" height="10" border="10"/>

​ （当图片无法显示时，以文字替换）

1
<img src="example.jpg" alt="这是一个例子"/>

​ （当鼠标移动到图片上，显示提示文本）

1
<img src="example.jpg" title="看懂了吗👀"

​ （绝对路径的符号 \ ，相对路径的符号 / ）

超链接🔗

  1. 外部链接
    （href的开头必须是 http:// 或 https://）
    （target是指用什么方式打开：_self 为默认值，即在本页打开；_blank 为在新窗口打开）
    a = anchor href = hypertext reference
1
<a href="http://www.example.com" target="_blank">This is a link.</a>
  1. 内部链接
1
<a href="nextPage.html">Click to go to next page.</a>

​ （空链接的 href 值为 “#”）

1
<a href="#">未完成页面</a>

​ （下载链接的 href 值为 .exe 或 .zip 等压缩包文件名称）

1
<a href="document.zip">Download</a>

​ （以图片为载体的超链接）

1
<a href="http://www.example.com"><img src="img.jpg" /></a>

​ 内部链接中一个比较特殊的形式：锚点链接
​ （立刻跳转到本页面的指定位置，注意设立标签需要 # ）

1
2
3
<a href="#third">第三点：法治社会</a><br />

<h3 id="third">第三点：法治社会</h3>

表格标签 ⊞

​ 表格不是用来布局页面的，而是用来展示数据的。
​ tr = table row td = table data (cell) th = table header

1
2
3
4
5
6
7
8
<table>
  <tr>
  	<th>表头加粗</th>
  </tr>
  <tr>
  	<td>单元格的文字</td>
  </tr>
</table>

​ ⚠️熟悉属性单词，之后CSS会使用
​ （align为对齐方式属性，值含”left”, “center”, “right”；border为边框属性，值含”1”, “”；cellpadding为单元格与内容之间的距离，默认”1”；cellspacing为单元格之间的距离，默认”2”；width 与 height也都可用）

1
2
3
<table align="center" border="1" cellpadding="0" cellspacing="0">
  
</table>

​ （用上表格结构标签thead和tbody）

1
2
3
4
5
6
7
8
9
10
11
12
<table align="center">
  <thead>
  	<tr>
  		<th></th>
  	</tr>
	</thead>
	<tbody>
 	 <tr>
      <td></td>
  	</tr>
	</tbody>
</table>

​ （合并单元格rowspan跨行「竖着」，colspan跨列「横着」；使其等于”合并单元格的个数”；row最上面单元格为目标单元格，col最左边单元格为目标单元格）
​ colspan = “column span”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table>
  <tr>
  	<td></td>
    <td colspan="2"></td>
  </tr>
  <tr>
  	<td rowspan="2"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
  	<td></td>
    <td></td>
  </tr>
</table>

列表标签🧾

​ 列表最大的优点在于他的整齐、整洁、有序，所以适合做页面布局，共分为无序列表、有序列表、自定义列表。

  • ⚠️重点：无序列表（ul里只能包含li，但li里可以放任何元素）

​ ul = “unordered list” li = “list item”

1
2
3
4
5
<h4>你喜欢什么水果？</h4>
<ul>
  <li>苹果</li>
  <li>桃子</li>
</ul>
  • 有序列表（ol里只能包含li，但li里可以放任何元素）

​ ol = “ordered list”

1
2
3
4
5
<h4>跑步比赛排名：</h4>
<ol>
  <li>琼斯</li>
  <li>史派克</li>
</ol>
  • ⚠️重点：自定义列表（dl里只能包含dt和dd，可出现多个dt，dt和dd是并列关系

​ dl = “definition list” dt = “definition term” dd = “definition discription”

1
2
3
4
5
<dl>
  <dt>关注我们</dt>
  <dd>新浪微博</dd>
	<dd>官方微信</dd>
</dl>

表单标签📝

​ 使用表单的目的是为了收集用户信息，主要是由表单域（表单的区域）、表单控件（表单元素）、提示信息（文字信息）这3个部分组成。

  • 表单域 form（为了将信息送至后端服务器；action属性值为url地址「服务器程序地址」，method属性值为”GET”、”POST”「提交方式」，name属性值为名称「用于区分同一个页面中的多个表单域）
1
<form action="demo.php" method="POST" name="name1"
  • 表单控件（表单元素）

​ input标签（name和value是几乎每个表单元素都有的属性值，主要给后台人员使用）用于采集用户信息，type属性有如下：

属性值 描述
button 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)。
checkbox 复选框（可设置默认选中**checked=”checked”**）
file 定义输入字段和“浏览”按钮，供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 隐藏密码
radio 单选按钮（⚠️必须是同一个name属性才可以实现多选一；可设置默认选中**checked=”checked”**）
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义重置按钮。重置按钮会清除表单中的所有数据。
text 单行的输入字段，用户可在其中输入文本。默认宽度为20个字符，可通过修改maxlength来调整（不常用）。 
1
2
3
4
5
6
7
<form>
  用户名：<input type="text" name="username" value="请输入用户名" maxlength="8" /> <br />
  密码：<input type="password" name="password" /> <br />
  性别：男 <input type="radio" name="sex" value="男" /> 女 <input type="radio" name="sex" value="女" /> <br />
  爱好：玩游戏 <input type="checkbox" name="hobby" value="玩游戏" /> 画画 <input type="checkbox" name="hobby" value="画画" /> 音乐 <input type="checkbox" name="hobby" value="音乐" /> <br />
  我同意注册条款 <input type="checkbox" name="注册条款" value="agreement" checked="checked" />
</form>
✩
--------------------END--------------------