一、html
1.web标准
a.结构标准(html)：决定网页中的内容。
b.表现标准(CSS)：决定网页中内容的布局和样式。
c.行为标准(JavaScript)：决定网页中的行为和动作(变化)。
2.html
a.什么是html
html:超文本标记语言
标记语言：通过不同的标记来显示不同的内容(以指定的格式)
超文本：除了文本以外还可以标记图片、超链接、音频、视频、flash、输入框、按钮等
html文件就是后缀是.html的文件，html文件可以直接用浏览器打开，看到网页效果。
注意：html中大小写不敏感(大写和小写一样，HTML,html,HtML,hTMl等是一样的)
b.html结构(树)
html基本结构是一个html标签中包含两个平行的head标签和body标签。
head中的内容除了title和icon以外其他的内容都不可见。body代码代表网页的部分内容，里面的标签一般都是可见的。
代码
c.html版本
代码
-- html5
-->
二、html标签
标签 == 标记
1.标签语法
双标签(常规标签)：<标签名 属性名1:属性值1 属性名2:属性值2...> 标签内容
单标签：<标签名 属性名1:属性值1 属性名2:属性值2... /> 或者 <标签名 属性名1:属性值1 属性名2:属性值2...>
说明：
标签名 -> 是html中已有的标签，不能自己随便命名。标签名和<以及标签名和/之间都不能有空隙
属性 -> 属性和属性值之间用:链接，多个属性之间用空格隔开，所有的属性没有位置要求。
标签内容 -> 在开始标签和结束标签之间，标签的内容可以是任意的(可以是文本也可以是其他标签)
2.head标签中的内容
head中的标签有：title,mate,base,link,style,script
title -> 设置网页标题
meta -> 设置网页元数据(单标签)
3.body标签中的内容
body中的标签主要用来在网页的内容中添加显示信息的。
代码
html标签
测试结果
三、文本标签
1.标题标签
h1 - 大标题
h2 - 副标题
h3 - 副标题下的副标题
...
2.段落标签：p
一个段落使用一个p标签，每个p标签中的内容显示完成后会自动换行。
3.特殊功能标签
html中文本中的换行、空格、tab等都是无效的(空白无效)
换行：
空格：
4.字体相关标签
加粗：b标签/strong标签
b标签只是单纯的文字效果加粗，strong标签有强调的意思。倾斜：i标签/em标签
i标签只是单纯的文字效果>倾斜，em标签有腔调的意思。水平线：
代码
文本标签
我是标题1
我是标题2
我是标题3
我是标题4
我是标题5
我是标题6
段落1
段落2
窗前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
窗前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
测试结果
四、列表标签
列表标签分为有序列表、无序列表、自定义列表。
1.有序列表
ol标签 -> 代表整个列表
li标签 -> 代表列表中的元素
2.无序列表
ul标签 -> 代表整个列表
li标签 -> 代表列表中的元素
3.自定义列表
dl标签 -> 代表整个列表
dt标签 -> 分组名
dd标签 -> 分组中的内容
代码
列表标签
- 基础语法
- web前端
- web后端
- 数据和人工智能
- 项目
- python人工智能
- HTML5
- Java大数据
- 自动化测试
- Python教学部
- 余婷
- 骆昊
- 王海飞
- 肖世荣
- H5教学部
- 吴老师
- 丁老师
- 周老师
测试结果
五、图片和超链接
1.图片标签：img
单标签
a.src属性：图片地址(可以是本地图片路径也可以是网络图片的url)
本地图片：地址可以是绝对路径也可以是相对路径，一般将图片放在img文件夹中，然后写相对路径。
b.title -> 设置图片标题(鼠标停留在图片上，显示的内容)
c.alt -> 设置图片加载失败的提示信息
2.超链接标签：a标签
a. 内容 -> 文字/图片
b. href -> 跳转的目标地址
(1)网页地址 -> 跳转到指定的网页
(2)本地的html文件地址 -> 跳转到本地的html对应的网页中
(3)空 -> 刷新网页
(4)选择器 -> 在当前网页中跳转到指定的位置c.target -> 跳转方式
_self -> 默认值，在当前页面加载新的页面(原网页被覆盖)
_blank -> 在新的页面中加载新的页面(原网页还在)
代码
图片和超链接
百度一下
列表标签
刷新
回到顶部
百度一下
测试结果
六、数据表格
1.表格标签
table标签 -> 整个表格
tr -> 行
td -> 单元格
2.边框相关的属性
border -> 边框的宽度
bodercolor -> 设置边框的颜色(颜色值可以是英语单词，也可以是RGB对应的16进制值)
cellspacing -> 单元格和单元格之间的间隙
cellpadding -> 设置内容和单元格边框之间的间距
3.背景颜色
bgcolor -> 背景颜色
a.作为table属性 -> 设置整个表格的背景颜色
b.作为tr属性 -> 设置一行的背景颜色
c.作为td属性 -> 设置某一个单元格的背景颜色
4.宽度和高度
width -> 设置宽度
height -> 设置高度a.作用于table -> 设置整个表格的宽度和高度(会按比例分配每一行和每一列的宽度和高度)
b.分别设置每一行的高度和每一列的宽度
应用：细线表格
第一步：设置整个表格的背景颜色(边框颜色)和每个单元格的背景颜色(表格内容的颜色)不一样。
第二步：设置cellspacing的值为边框的宽度。
5.对齐方式
align -> center(居中)/left(左对齐)/right(右对齐)
a.作用于table，让整个表格在其父标签中居中/左对齐/右对齐
b.作用于tr，让整行中的每个单元格中的内容在其单元格中居中/左对齐/右对齐
c.作用于tr，让指定的单元格中的内容居中/左对齐/右对齐
代码
表格
First Name
Last Name
Points
Jill
Smith
50
John
Jackson
96
姓名
年龄
性别
姓名
年龄
性别
小明
18
男
测试结果
七、复杂表格
1.制作复杂表格的方法
a.确定表格的最大行数，在table中用tr表示出来
b.确定每一行有多少个单元格，用td表示出来
c.确定每一个单元格是否有合并现象。如果是行合并就设置rowspan的值，如果是列合并就设置colspan的值
代码
复杂表格
测试结果
八、作业
代码
个人简历
个人简历
学院
数学与信息技术学院
专业
计算机科学与技术
姓名
余乐
性别
男
名族
汉族
出生年月
1996年11月
籍贯
云南玉溪
身高
176cm
学历
本科
政治面貌
团员
毕业意向
网络爬虫工程师
兴趣爱好
旅游
个人说明
人丑话不多
家庭住址
地球
住宿地址
地球
联系电话
保密
手机
保密
任职情况
无
本
人
简
历
时间
学校
任职