html之路
一个html文件通常要必备以下内容
<!DOCTYPE html> <html lang="en"> <head></head> <body></body> </html>
<!DOCTYPE html>是DOCTYPE声明,位于文档的最前面,处于标签之前,他是网页的必备部分,避免了浏览器的怪异模式
<html></html> 定义html文档.其他的元素都要包裹在里面
<head></head> 文档的头部,描述了文档的各种属性和信息,包括标题,在web中的位置,和其他文档的关系等
<body></body> 文档的主体,这里的内容通常是直接展示给用户看的内容
除了这些必备的标签,还有一些标签也很重要,比如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
<title></title>是文档的标题,放在<head>标签中
<meta>标签用来描述一个html文档的属性,关键词等.比如 charset = "UTF-8" 说明当前使用的是utf-8编码格式,还有gbk等其他格式,通常我们都是使用utf-8模式即可,meta标签也放在head标签内
下面我们来看看放在body中的标签
首先我们看看 标题标签 <h>
<h1>标签</h1>
标题标签从<h1>到<h6> h1最大 h6最小
html的标题标签应该只用于标题,而不是为了增大或者增粗文本.如果要改变文本我们可以通过CSS样式
<h1>用于主标题,<h2>次之,再其次<h3>,以此类推
顺便讲一个标签属性 align
align可以调整标签的位置 可以用align="left" align="center" align="right"来控制标签的位置
<h1 align="center">我的第一个网页</h1>
段落标签 <p>
每个<p>标签都会单独占据一行
<p>这是一个p标签</p>
换行标签<br> 就不演示了 如描述之意
还有水平线标签<hr>
<hr color="red" width="300px" size="20px" align="left">
hr标签有4个属性 color是颜色 width是宽度 size是高度 align是对齐方式,可以用left和right,如果不设置该属性,则默认为居中
图片标签 <img>
<img src="test.webp" alt="美丽的小姐姐" width="300px" height="300px" title="漂亮的小姐姐">
img标签有5个属性 分别是 src 表示图片地址,可以是绝对路径也可以是相对路径
alt表示替代文本,意味着当图片无法显示时,则会显示该文本
width是宽度 height是高度,通常我们只设置宽度即可,图片会等比放大或者缩小
tilte是提示文本,表示当鼠标悬停在图片上时,显示的文字内容
超链接标签 <a>
<a href="http://www.baidu.com">链接文本</a>
这个标签比较简单就不赘述了 链接内容不一定是文本,也可以用img标签
文本标签
<em>定义着重文字</em> <b>定义加粗文字</b> <i>定义斜体文字</i> <strong>定义加重语气</strong> <del>定义删除文字</del> <span>定义块级标签</span>
文本标签没啥好说的 主要是用在让文本显示不同的样式,详情就看上面代码吧
列表之 有序列表 <ol>
<ol type="A"> <li>标签一</li> <li>标签二</li> <li>标签三</li> </ol>
ol配合li列表,会在每个li项前自动加上排序的数字,默认是1,2,3,4....
同时我们可以通过type属性来设置排序的关键字,属性有5个选项 分别是 1,A,a,i,I
分别代表 数字 ,字母(abcd....),大写字母,罗马数字,大写罗马数字.
列表之 无序列表 ul
<ul> <li>项目一</li> <li>项目二</li> <li>项目三</li> <li>项目四</li> </ul>
ul配合li ,会自动在每个li项前加一个小实心圆,并不会用数字来排序
同时我们也可以通过type属性来设置li项前的标志 默认,也就是disc表示实心圆,circle表示空心圆,square表示小方块,none表示什么都不显示
有序列表和无序列表,都可以进行嵌套,在li标签下可以再用ol或者ul来增加二层列表
表格标签
<table>表格主体
<tr>行
<td>单元格
<table border="1" width="400" height="200"> <tr> <td>Name</td> <td>Age</td> <td>Gender</td> </tr> <tr> <td>join</td> <td>25</td> <td>man</td> </tr> <tr> <td>mary</td> <td>22</td> <td>girl</td> </tr> </table>
tr和td应该包裹在table内 其中tr是行 td是列 td是自动对齐
同时表格标签也有一些常用的属性,比如 border 是设置表格的边框,width是设置宽度 height是高度
同时 在创建表格的时候 有一个快捷方式
table>tr*4>td*3{内容}
这表示生成一个表格,有4行,3列,默认填充内容是 --->内容
如果要对表格的单元格进行合并,可以用colspan和rowspan属性
<p>合并单元格6,7 水平合并colspan</p> <p>合并单元格15,20 上下合并rowspan</p> <table border="1" width="600" height="300"> <tr> <td>测试1</td> <td>测试2</td> <td>测试3</td> <td>测试4</td> <td>测试5</td> </tr> <tr> <td colspan="2">单元格6,7</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</td> </tr> <tr> <td>测试16</td> <td>测试17</td> <td>测试18</td> <td>测试19</td> </tr> <tr> <td>测试21</td> <td>测试22</td> <td>测试23</td> <td>测试24</td> <td>测试25</td> </tr> </table>
通常我们合并的时候,只需要在第一个单元格的td里加上 colspan或者 rowspan,然后将需要合并进来的单元格td删除掉即可.需要注意的是,可以同时colspan和rowspan.
表单标签 <form>
一个完整的表单应该包含三个基本组成部分:表单标签,表单域,按钮
<form> <input type="text"> <input type="password"> <input type="submit"> </form>
比如这段代码 表单标签<form> 表单域里有两个Input输入框 然后还有一个属性是submit的input框作为按钮.当然我们也可以用button按钮,通常我们用ajax提交数据的时候,大多数都用button绑定ajax事件.
<button>提交2</button>
块级元素和内联元素
块级元素:
1.会在页面里独占一行
2.可以设置width,height属性
3.一般块级元素可以包含行内元素和其他块级元素
4.常见的块级元素 div form h1~h6,hr p table ul等
5.行内块级元素(特点,不换行,能够识别宽和高) 一般有 button img input等
内联元素:
1.行内元素不会独占一行,只会占自身的大小
2.行内元素设置width,height属性无效
3.一般内联元素可以包含内联元素,但是不能包含块级元素.
4,常见的内联元素 a b em i span strong等
H5新标签
相对于div的块级标签,h5引入了一些新的块级标签
1 <header></header> 头部
2.<nav></nav> 导航
3.<section></section> 定义文档中的节,比如章节,页眉,页脚.
4.<aside></aside> 侧边栏
5.<footer></footer>脚步
6.<article></article>代表一个独立的完整的内容块,比如一篇完整的帖子,文章,用户评论等.
浙公网安备 33010602011771号