1.HTML介绍
超文本 标记 语言
用来描述网页的一种语言
1.1 HTML，CSS，JS三者关系：
HTML —— 结构， 决定网页的结构和内容（ “是什么”） CSS —— 表现（ 样式） ， 设定网页的表现样式（ “什么样子”） JavaScript（ JS） —— 行为， 控制网页的行为（ “做什么”）
一个基本的网站包含很多个网页，一个网页由html, css和javascript组成。
html是主体，装载各种dom元素；css用来装饰dom元素；javascript控制dom元素。
用一扇门比喻三者间的关系是：html是门的门板，css是门上的油漆或花纹，javascript是门的开关；
2.HTML框架
标记语言: 一套标记标签
3.HTML标签、元素、属性
3.1注释写法
<!-- 被注释的代码 -->
3.2html标签
双标签<html></html>
单标签
3.3 HTML标签的属性
1.标签的属性写在开始标签内部
2.标签上可以同时存在多个属性
3.属性之间以空格隔开
4.标签名与属性之间必须以空格隔开
5属性之间没有顺序之分
3.4 HTML标签
1.3.4.1标题标签（独占一行）
<h1></h1>
<h2></h2>
.2 段落标签（独占一行）<p> 段落 </p>
.3 换行标签<br>
.4水平线标签<hr>
.5原样输出<pre></pre>
3.4.2 文本格式化标签
加粗字体<b></b>
加下划线<u></u>
倾斜<i></i>
加删除线<s></s>
3.4.3媒体标签
1.图片标签 网页显示
<img src="图片路径" width= height（只设置一个，另一个会自动等比例） alt="加载失败显示的文字" title="鼠标悬浮显示的文字">
2.音频标签
<audio src="音频路径" controls></audio>
Controls 显示控件
autoplay: 自动播放
loop: 循环播放
3.视频标签
<video src="视频路径" controls></video>
3.4.4 链接标签
页面跳转
a标签
<a href="http://www.baidu">跳转到目标网站</a>
<a href="http://www.baidu" target="_blank">跳转到目标网站</a> 在新窗口的跳转(保留原网页)
锚点链接
<!-- 跳转到锚点 -->
<a href="#miao">跳转到中部</a>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>6</p>
<p>6</p>
<p>6</p>
<p>6</p>
<p>6</p>
<p>6</p>
<p>6</p>
<p>6</p>
<p>6</p>
<!-- 设置一个锚点 -->
<a name="miao">这里是页面中部</a>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
4.HTML列表标签
1.无序列表
<ul>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
<ul type="Circle"> ul: 表示无序列表整体，用来包裹li标签
<li>咖啡</li> li: 表示无序列表的每一项,用于包含每一行的内容
<li>牛奶</li>
<li>茶</li>
</ul>
disc 实心小圆点 Circle 空心小圆圈 Square 正方形
2. 有序列表
<ol>
<li>html</li>
<li>css</li>
<li>js</li>
</ol>
3.自定义列表
<dl> <!-- 用于自定义列表的整体，用于包裹dt/dd标签 -->
<dt>永劫无间</dt> <!-- 表示自定义列表的主体 -->
<dd>迦南</dd> <!--表示自定义列表的针对主体的每一项 -->
<dd>胡桃</dd>
</dl>
5.HTML表格
5.1 表格的基本标签
场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
table 表示整体，可用于包裹多个tr
tr 表格每行，可用于包裹td
td 表格单元格, 可用于包裹内容
注意点：
嵌套关系： table > tr > td
Table>tr*10>td*10
<table border=1> 表示整体，可用于包裹多个tr
<caption>表格标题</caption> <!--表示表格的整体大标题,写在table标签内部-->
<tr>表格每行，可用于包裹td
<th>1行1列</th> <!--表示一列小标题，通常写于表格的第一行 -->
<th>1行2列</th>
<th>1行3列</th>
</tr>
<tr>
<td>2行1列</td>表格单元格, 可用于包裹内容
<td>2行2列</td>
<td>2行3列</td>
</tr>
<tr>
<td>3行1列</td>
<td>3行2列</td>
<td>3行3列</td>
</tr>
</table>
5.2 表格相关属性
属性名 属性值 效果
border 数字 边框宽度
width 数字 表格整体宽度
height 数字 表格整体高度
5.3 表格标题及单元格标签
caption:表示表格的整体大标题,写在table标签内部
th:表示一列小标题，通常写于表格的第一行
5.4 合并单元格
左上原则 只保留最上，最左的
属性名 属性值 说明
rowspan 合并单元格的个数 跨行合并，将多行单元格垂直合并
colspan 合并单元和的个数 跨列合并，将多列单元和水平合并
注意：需删除需要合并的格
6.表单
HTML表单用于提交不同类型的用户数据给处理程序处理
6.1定义HTML表单
<form action="处理程序路径" method="提交方式">
表单内容
</form>
6.2 input 系列
标签名 type属性值 说明
input text 文本框，用于输入单行文本
input password 密码框，用于输入密码
input radio 单选框，用于多选一
input checkbox 多选框，用于多选多
input file 文件选择，用于上传文件
input submint 提交按钮，用于提交
input reset 重置按钮，用于重置
input buttom 普通按钮，默认无功能，需要配合js使用
版本 html5
<!DOCTYPE html>
6.2.3 单选框
在网页中显示多选一的单选表单控件
type属性值: radio
6.2.4 多选框
在网页中显示多选多的表单空间
type属性值：checkbox
6.3 select下拉菜单标签
6.4 textarea 文本域标签
* cols: 设置文本域内可见初始宽度
* rows: 设置文本域内可见初始行数
可在页面进行修改
7. 语义化标签
7.1 没有语义的布局标签
场景：实际开发中，会大量频繁的使用div和span这两个没有语义的标签布局
div： 一行值显示一个(独占一行)
span: 一行可显示多个
7.2 常见语义化标签（本质跟div span 无区别）
header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页区块
article 网页文章
效果相同
7.字符实体
空格  ；
> >；
< <；
练习
更多推荐
HTML介绍及代码
发布评论