HTML学习笔记

1. Web标准

语言 作用 说明
HTML 结构 页面元素和内容
CSS 表现 美化用的，网页元素的外观位置颜色等
JavaScript 行为 页面交互和动态效果

2. HTML页面固定结构

1
2
3
4
5
6
7
8
<html>
    <head>
        <title>网页的标题</title>
    </head>
    <body>
        网页的主体内容
    </body>
</html>

3. 注释

VScode用Ctrl+/注释和取消注释
<!--这是注释-->

4. 标签之间的关系

  1. 父子关系(嵌套关系)
1
2
3
<head>
    <title></title>
</head>
  1. 兄弟关系(并列关系)
1
2
<head></head>
<body></body>

5. 标题标签

使用h系列标签

1
2
3
4
5
6
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
  • 1~6级标题的重要程度依次递减
  • 加粗，变大，独占一行

6. 段落标签

使用p标签

1
<p>我是一段文字</p>
  • 段落之间存在间隙
  • 独占一行

7. 换行标签

<br>用来强制换行

8. 水平分割线标签

<hr>用来分割不同区域的水平线

9. 文本格式化标签

作用 标签1 标签2
加粗 b strong
下划线 u ins
倾斜 i em
删除线 s del
  • 两种标签最终实现的效果是一样的
  • 只不过标签2更加突出强调语境

10. 图片标签

1
2
<img src=" " alt=" "> src和alt是属性
<img src="./1.jpg">  显示当前文件夹的1.jpg图片
  • 标签属性写在开始标签内部
  • 标签可以有多个属性，且属性之间没有顺序之分
  • 属性之间以空格隔开；标签与属性之间以空格隔开
1
<img src="dog.jpg" alt="这是一只狗" title="鼠标悬停时显示" width="200" height="800">
  • alt属性是替换文本，图片不显示的时候显示alt
  • title是图片的标题，鼠标悬停时显示
  • width和height设置一个即可，等比例缩放不变形

11. 路径

页面需要加载图片，音频或视频等，怎么找到对应的文件

  1. 绝对路径(了解)
    目录下的绝对位置，可直接到达目标位置，从盘符开始
    例：D:\study\html\image\1.jpg (盘符开头)
    https://www.abc.cn/1234/1.jpg (完整网址)
  2. 相对路径(常用)
    从当前文件出发找目标文件的过程
  • 同级目录
    使用<img src="目标图片.jpg">或者<img src="./目标图片.jpg">
  • 下级目录
    使用<img src="目标文件夹/目标图片.jpg">
  • 上级目录
    到上一级目录用../;返回上两级就是../../

12.音频标签

在页面插入音频

属性 功能
src 音频的路径
controls 显示播放的控件
autoplay 自动播放
loop 循环播放

例: 

1
<audio src="./music.mp3" controls autoplay loop></audio>

13. 视频标签

属性类型与音频相同

1
<video src="./video.mp4" controls autoplay muted loop></video>

属性muted用来静音播放

14. 超链接

1
2
3
4
5
<a href="https://www.baidu.com/">跳转到百度</a>
<br>
<a href="目标地址.html">跳转到目标地址</a>
<br>
<a href="#">空链接用#</a>
属性 取值 效果
target _self 默认，在当前窗口中跳转(覆盖原网页)
_blank 在新窗口中跳转(保留原网页)
在新窗口跳转： 
1
<a href="https://www.baidu.com/" target="_blank">跳转到百度</a>

15. 列表标签

1. 无序标签

标签 说明
ul 无序标签的整体
li 无序列表的每一项 
1
2
3
4
5
<ul>
    <li>华为</li>
    <li>苹果</li>
    <li>小米</li>
</ul>

注意:

  • ul只允许包含li标签
  • li标签可包含任意内容

2. 有序标签

与无序列表类似；用ol和li

1
2
3
4
5
<ol>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
</ol>

3. 自定义标签

标签 说明
dl 自定义列表的整体
dt 自定义列表的主题
dd 自定义列表中主题下的每一项 
1
2
3
4
5
<dl>
    <dt>985大学</dt>
    <dd>清华大学</dd>
    <dd>北京大学</dd>
</dl>

注意: dl中只允许包含dt和dd标签

16. 表格标签

A. 标签

标签名 作用
table 表格整体
tr 表格每行
td 表格单元格
caption 表格大标题
th 表头单元格

B. 属性

属性名 作用 属性值
border 边框宽度 数字
width 表格宽度 数字
height 表格高度 数字
rowspan 跨行合并 合并单元格的个数
colspan 跨列合并 合并单元格的个数

C. 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table border="1" width="500" height="300">
    <caption><strong>高校简介</strong></caption>
    <tr>
        <th>高校</th> 
        <th>人数</th> 
        <th>面积</th>  
    </tr>
    <tr>
        <td>清华</td>
        <td rowspan="2">2000</td>
        <td>5000</td>
    </tr>
    <tr>
        <td>北大</td>
        <td>4000</td>
    </tr>
      <tr>
        <td>安大</td>
        <td colspan="2">1000</td>
    </tr>
</table>

17. 表单标签

A. input标签

属性名 作用
type 指明类型
placeholder 输入框中的提示字
name 分组，有相同Name值的是同一组
checked 默认选中
multiple 多文件选择
form 按钮的父标签
value 按钮名字
type属性值 说明
text 文本框，输入单行文本
password 密码框，输入密码
radio 单选框
checkbox 多选框
file 文件选择，上传文件
submit 提交按钮
reset 重置按钮
button 普通按钮，默认无功能
  • placeholder属性
1
<input type="text" placeholder="请输入用户名">
  • name和checked属性
1
2
性别：<input type="radio" name="sex">男
<input type="radio" name="sex" checked>女
  • multiple属性
1
<input type="file" multiple>
  • form和value属性
1
2
3
4
5
6
7
8
9
<form action="提交的地址">
    用户名：<input type="text">
    <br>
    密码：<input type="password">
    <br>
    <input type="submit" value="注册">
    <input type="reset">
    <input type="button" value="普通按钮">
</form>

B. button按钮标签

type属性值 说明
submit 提交按钮
reset 重置按钮
button 普通按钮，默认无功能 
1
2
3
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>

C. select下拉菜单按钮

标签名 作用
select 下拉菜单的整体
option 下拉菜单的每一项
  • selected属性：默认选中
1
2
3
4
5
<select>
    <option>北京</option>
    <option selected>上海</option>
    <option>广州</option>
</select>

D. textarea文本域标签

提供可输入多行文本的控件

属性名 说明
cols 宽度
rows 行数 
1
<textarea cols="60" rows="30"></textarea>

E. label标签

使用label标签把内容和表单标签一起包裹起来；把label中的for属性删除。

1
2
<label><input type="radio" name="sex">男</label>
<label><input type="radio" name="sex">女</label>

18. 语义化标签

无语义的布局标签

  • div:一行只显示一个
  • span:一行可显示多个

19. 字符实体

例如空格用&nbsp;
其他的不用记，用到的时候上网查。