HTML简介
目录
一、HTML基础知识
二、HTML常见标签
注释标签
标题标签
段落标签
常用的转义字符
换行标签
格式化标签
图片标签
超链接标签
表格标签
列表标签
input标签
文本框
密码框
单选框
复选框
普通按钮
选择文件
下拉标签
多行文本输入
无语义标签
div
span
三、综合案例
1、简单的相亲页面注册
2、相亲的简历信息
一、HTML基础知识
HTML代码由大量的标签组成。
HTML文件的基本结构：
页面标题
页面内容
在这个基本结构中也会体现出标签的层次关系：
- 父子关系：html是head和body的父标签，head是title的父标签。
- 兄弟关系：head和body是兄弟关系。
对于HTML代码文件可以在记事本进行编写，只要确保后缀名是.html，然后双击就会文件就会在浏览器中进行页面展示，HTML也可以在IDEA等开发工具中编写，输入!+tab就会自动生成HTML文件的基本框架。
二、HTML常见标签
注释标签
注释标签：
可以选中注释内容，使用快捷点crtl+/来进行注释或者取消注释。
标题标签
标题标签：
一级标签
二级标签
三级标签
四级标签
五级标签
六级标签
注意：
- HTML拥有六级标签，标签字体逐渐变小。
- 标题标签会自动换行，不需要在其后加上换行符。
段落标签
段落标签：
段落内容
注意：
在段落中手动不管输入多少个空格，在运行显示的时候只有一个空格。
在段落中手动输入一个换行，只是相当于空格，并不会真的换行。
HTML的段落中无法设置首行缩进，需要用CSS来完善。
输入lorem之后再加tab键会随机生成一个段落。
常用的转义字符
在段落中如果用到多个空格和一些特殊符号就需要用到转义字符，下表是一些常见的转义字符：
原始字符 转义字符 " " & & < < > > 连续空格
换行标签
换行标签：
换行标签是一个单标签，不存在结束标签。
格式化标签
格式化标签：
- 加粗： 加粗 或 加粗
- 倾斜： 倾斜 或 倾斜
- 删除线：
删除线或删除线- 下划线： 下划线 或 下划线
图片标签
图片标签：
注意：
- 图片标签中必须带有src属性，其他可以省略，并且各属性的顺序随意。
- src中可以是绝对地址或相对地址。
- 替换文本指的是图片加载失败了就会显示出来，如果图片加载成功就不会显示。
- title提示文本是当你把鼠标放到图片上时就会出现。
- width、height、border是用于设置图片宽度、高度和边框，单位是px（像素）。
超链接标签
超链接标签：
注意：
- href是超链接文件中必须具备的，指定要跳转到那个页面。href可以直接输入网址，也可以另一个HTML文件，还可以是一个文件名表示下载链接。
- target指的是打开的方式，有_self表示在原标签页打开，还有_blank会用新的标签页打开。
- href等于"#"，表示是一个空链接。
- 超链接不一定只是文字，也可以是图片等，例如双击图片就会跳转页面。
表格标签
表格标签有：
- table：表示整个表格。
- tr：表示表格的一行。
- td：表示一个单元格。
- th：表示表头单元格，默认会居中加粗。
table包含tr，tr中包含td或th。
table标签中也有多个属性：
- align:表格相对于周围元素的对齐方式。
- border：表示边框宽度。
- cellpadding：内容距离边框的距离，默认是1px。
- cellspacing：单元格之间的距离，默认是2px。
- width：设置表格宽度。
- height：设置表格的宽度。
列表标签
列表标签可以使页面布局更加美观。
列表标签有：
无序列表：
- 列表1
- 列表2
……
有序列表：
- 列表1
- 列表2
……
自定义列表：
- 小标题
- 列表1
- 列表2
……
input标签
input标签包含各种输入控件，有单行文本框、按钮、单选框和复选框。
input标签的属性有：
type（类型标签，必须包含）:可以是text、button、checkbox等。
name：给input起名字，例如对于单选按钮，具有相同的name才能进行单选。
value：input的默认值。
checked：默认选中项，主要用于单选按钮和多选按钮。
maxlength：input标签的最大长度。
文本框
姓名
效果：
密码框
密码
效果：
单选框
简易版本：点击按钮才能选中，单击文字无效。
性别 男 女
升级版本：单击文字也代表选中,需要搭配label标签来进行使用，默认性别选择男。
性别效果：
注意：
- 单选框中每个选项的name必须相同。
- label标签的作用是点击文字也能选中，但是label标签的for属性内容要与单选框中的id进行对应。
复选框
兴趣爱好 打篮球 羽毛球 刷抖音 躺平复选框也可以搭配label标签和指定默认选项搭配使用。
效果：
普通按钮
普通按钮
效果：
这里点击之后是不会出现任何相应的，后续需要搭配Js来使用。
选择文件
选择文件效果：
下拉标签
出生地效果：
多行文本输入
备注效果：
无语义标签
div
div标签独占一行，是一个大盒子。
span
span标签不独占一行，是一个小盒子。
三、综合案例
1、简单的相亲页面注册
Dating
千里姻缘一线牵
![]()
姓名 性别 出生年份 出生地 兴趣爱好 打篮球 羽毛球 刷抖音 备注
效果展示：dating
2、相亲的简历信息
Resume
个人基本信息
姓名：张子晨
![]()
个人基本信息
- 身高：185cm
- 体重：75kg
- 户籍：陕西省西安市
微信：23901311k
抖音主页：美少年
个人优势
- 脾气好
- 家庭条件优越
- 阳光幽默
- 钟情
心动不如行动，希望早日找到心仪的另一半
效果展示：resume
下一篇：Hugo博客教程（一）