概述
文章目录
- 1. 文档类型
- 2. 语言类型
- 3. 字符集
- 4. HTML骨架标签
- 5. 标题标签
- 6. 段落标签 p
- 7. 换行标签 `br`
- 8. 水平线标签 hr
- 9. div标签和span标签
- 10. 文本格式化标签
- 11. 图像标签 `img`
- 12. a标签
- 13. 锚点定位
- 14. base标签
- 15. `pre`标签
- 16. 表格标签
- 17. 列表标签
- 18. 表单标签
- 19. 特殊字符
- 20. 注意写路径最好用 `` 不要用 `/`
1. 文档类型<!DOCTYPE>
<!-- 写在页面最前面 -->
<!DOCTYPE html>
2. 语言类型
<!-- 指定html语言的种类 en英语 zh-CN汉语-->
<html lang='en'>
3. 字符集
<!-- 一般情况下统一使用 "UTF-8" 编码，不要写成 "utf-8" 或 "utf8" 或 "UTF8"-->
<meta charset="UTF-8" />
4. HTML骨架标签
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
5. 标题标签
<h1> 标题文本 </h1>
<h2> 标题文本 </h2>
<h3> 标题文本 </h3>
<h4> 标题文本 </h4>
<h5> 标题文本 </h5>
<h6> 标题文本 </h6>
6. 段落标签 p
7. 换行标签 br
8. 水平线标签 hr
9. div标签和span标签
span一般用于单行文本
10. 文本格式化标签
<!-- 推荐的更有语义化 -->
<!-- 文字加粗(推荐使用strong) -->
<b></b> 和 <strong></strong>
<!-- 文字斜体(推荐使用em) -->
<i></i> 和 <em></em>
<!-- 文字加删除线(推荐使用del) -->
<s></s> 和 <del></del>
<!-- 文字加下划线(推荐使用u) -->
<u></u> 和 <ins></ins>
11. 图像标签 img
<img src='' alt='' title=''></img>
<!--
src：指定图片的路径，有相对路径和绝对路径
alt：当图片不存在时，展示里面的内容
title：鼠标悬停时的内容
也可以设置width，height，border
-->
12. a标签
<!--
target属性
_self：当前页面打开
_blank：新窗口打开，如果一直重复点会一直新窗口打开
乱写：新窗口打开，如果一直点不会重复打开只会打开一次
-->
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
13. 锚点定位
<!-- #id名 -->
<a href='#box'>点击跳转</a>
<!-- 起id名 -->
<div id='box'>
我是将要被跳转的内容
</div>
14. base标签
全局设置a标签打开的方式，在head中写，如果a标签中已经写了遵循a标签的打开方式
15. pre标签
被 pre 标签包裹的代码里面的格式会在页面直接展示出来
16. 表格标签
<!--
表格标签的大致结构
caption：表格标题
thead：表示表头
tbody：表示内容
tfoot：表示表底
tr：表格行
td：单元格
th：单元格，默认加粗，居中
-->
<table>
<caption>
我是标题
</caption>
<thead>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<!--
table属性
width，height，border，align
宽,高,边框,摆放位置
cellspacing：边框的间的间距默认2px
cellpadding：内容
rowspan：跨行合并
colspan：跨列合并
可以理解为你写多少 td 就占多少个单元格
-->
17. 列表标签
-
无序列表
<ul> <li></li> <li></li> <li></li> </ul> -
有序列表
<ol> <li></li> <li></li> <li></li> </ol> -
自定义列表
<dl> <dt>自定义标题</dt> <dd>内容</dd> <dd>内容</dd> <dd>内容</dd> <dt>自定义标题</dt> <dd>内容</dd> <dd>内容</dd> <dd>内容</dd> </dl>
18. 表单标签
-
表单域
from表单，一般情况下其他表单相关元素都是它的后代元素
属性 action 用于提交表单数据的请求，默认不写从当前路径进行提交 在输入框中添加name属性可以拼接路径(name中的值=输入框中的内容) method 请求方法(get和post)，默认是get target 和a元素的target一样 enctype accept-charset 规定表单提交时使用的字符编码 -
input
<!-- input 属性 type 属性值 text 单行文本输入框 password 密码输入框 radio 单选按钮 checkbox 复选框 button 普通按钮 submit 提交按钮，提交数据 reset 重置按钮，重置from表单中的数据 image 图像形式的提交按钮 file 文件域，可以展示图片(...) 属性 name 单选框：由控件的名称，单选框需要设置相同的name属性 输入框：提交数据时需要带上name，用于提交数据的key 属性 value input控件中的默认文本值 属性 size 可以输入字符的宽度 属性 checked 默认选中项 属性 maxlength 输入的最大字符 属性 placeholder (h5) 默认文字，只是起到提示作用(只能看不能用) --> <input type="text" name="aaa" value="aaa" size="" checked maxlength="10"> -
label
通过for绑定input的id(for中不需要加#号)，绑定后点击label中的文字也可以使对应input聚焦
-
textarea
多行文本框，可拉伸
属性：rows，cols设置默认行和列
默认value中的内容，是直接写在标签里面
-
select、option
<!-- 下拉选择框 属性：selected默认选择 --> <select> <option></option> <option selected></option> <option></option> </select> -
button 按钮
19. 特殊字符
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jAbEynX9-1640231048440)(.. 0-imgsimage-20211206164817443.png)]](https://file2.kaopuke.com:8081/files_image/2023061017/fb016dc22ceb41638099dc6a18948019.png)
20. 注意写路径最好用 /
最后
以上就是清秀热狗为你收集整理的HTML标签(笔记)的全部内容，希望文章能够帮你解决HTML标签(笔记)所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复