标签的作用:
1.有利于seo的优化,让你的搜索排名更靠前,广告除外
2.构建页面的结构,通过读取html标签,浏览器可以大概了解代码的每一部分具体代表了什么,以及这部分应该发挥怎样的作用
标签之标题
标题标签一共有6总,从1到6依此减小
快捷生成标题:hn*m,快速生成m个hn级别的标签
改变标签位置的常用方法
<h1 align="left">一级标题</h1>
<h2 align="center">二级标题</h2>
<h3 align="right">三级标题</h3>
标签之段落
我们的小段文字就用<p>
来表示,当我们要标记大段文字的时候我们需要使用<blocquote>
标签之图片
图片标签img
img是图片标签,单标签!!并且每个img只承载一张图片
<img src="路径" alt="当图片无法显示的时候显示文本">
关于图片的问题:
我们人为规定宽度width后图片会按照比例缩放,我们一般不指定高度,因为高度改变后可能改变图片的比例
图片的路径问题
<img src="../父级关系演示.jpg" alt="">
<img src="image/子集示例.jpg" alt="200px">
超文本链接
文字作为链接
<a href="https://www.baidu.com/"> 可以是字</a>
图片作为链接
<a href="https://www.baidu.com/">
<img src="超文本链接图片.jpg" alt="100px">
</a>
默认情况下
1.没有访问过的为蓝色
2.访问过是紫色
3.点击显示红色
标签之文本
常用文本标签
1.em定义着重文字
2.b定义出题文字
3.i定义斜体文字
4.strong定义加重语气
5.del定义删除字
6.span元素没有特定的含义
可以嵌套!!!
注意:文本和段落标签不一样,段落代表一段文本,而文本标签一般表示文本词汇
有序列表ol和无序列表ul
有序列表ol
<ol type="1">
<li>1</li>
<li>2</li>
</ol>
<ol type="A">
<li>1</li>
<li>2</li>
</ol>
<ol type="a">
<li>1</li>
<li>2</li>
</ol>
有序列表的嵌套
有序列表的嵌套
<ol>
<li>水果</li>
<li>
蔬菜
<ol>
<li>辣椒</li>
<li>黄瓜</li>
</ol>
</li>
<li>肉类</li>
</ol>
无序列表
<ul>
<li>苹果</li>
<li>梨子</li>
<li>橘子</li>
</ul>
type:
1.disc默认实心元
2.circle空心⚪
3.square 小方块
4.none 不显示
无序列表一般的作用是配合css用来做导航
快捷键:ul>li*n(n是数量,自己决定)
表格 table
<!--
1.table表格
2.tr行
3.td列
-->
<table>
<!--一个tr代表一行,两个tr代表两行-->
<tr>
<!--td代表列,有一个单元格代表一列,两个单元格代表两列,一般td的值是等同的-->
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>d元格</td>
<td>单元格</td>
</tr>
<tr>
<td></td>
<td>单元格</td>
</tr>
</table>
快速生成表格
生成表格table>trn>tdm{信息}
table的合并
1.水平合并colspan
2.垂直合并rowspan
body部分的代码
<p>合并单元格6和7</p>
<p>合并单元格15和20</p>
<p>16 17 21 22的合并!!,以左上为基准</p>
<p>水平合并保留左边删除右边</p>
<p>垂直合并保留上删除下</p>
<table border="1" width="600" height="400">
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td colspan="2">单元格6</td>
<td>单元格8</td>
<td>单元格9</td>
<td>单元格10</td>
</tr>
<tr>
<td>单元格11</td>
<td>单元格12</td>
<td>单元格13</td>
<td>单元格14</td>
<td rowspan="2">单元格15和20</td>
</tr>
<tr>
<td colspan="2" rowspan="2">单元格16</td>
<td>单元格18</td>
<td>单元格19</td>
</tr>
<tr>
<td>单元格23</td>
<td>单元格24</td>
<td>单元格25</td>
</tr>
</table>
from表单
一个表单一般包含输入框和按钮等等,输入框和按钮成为控件。表单就是容器,容纳各种空间
name是表单的名字
action是服务器地址
method是提交给后台的方法
submit代表提交按钮
<form action="" method="get">
<input type="" name="" id="">
<input type="submit" name="" id="">
</form>
一个完整的表单应该包含三个基本组成部分:
表单标签
表单域
表单按钮
method post和get区别
1.get提交的数据url看得到,post提交的看不到
2.get用于提交少量数据,post用于提交大量数据
快级元素和内联元素区别
html5新增的部分标签
<header>头部</header>
<nav>导航</nav>
<section>章,节等等</section>
<article>代表完整的一块,比如一篇博客文章</article>
<aside>侧边栏</aside>
<footer>底部</footer>