一、 HTML语法介绍
1. 标签
标签也称为标记或元素,用于在网页中标记内容
-
语法:标签使用< >为标志,标签名不区分大小写(个人习惯为小写)
-
分类:
- 双标签:成对出现,包含开始标签和结束标签。例:
<html></html>
- 单标签:只有开始标签,没有结束标签,可以手动添加“/”表示闭合。例:
<br> <br/>
-
标签属性:
- 标签属性书写在开始标签中,使用空格与标签名隔开,用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成,属性值使用双引号表示。例:
<meta charset="utf-8">
- 同一个标签中可以添加若干组标签属性,使用空格间隔。例:
<img src="lily.jpg" width="200px" height="200px">
二、常用标签介绍
1. 基本结构解析(主体)
<!-- 文档类型声明,便于浏览器正确解析标签及渲染样式 -->
<!doctype html>
<!-- HTML文档开始的标志 -->
<html>
<!-- 头部设置,可在head中设置网页标题,网页选项卡图标,引入外部的资源文件,设置网页相关信息等 -->
<head>
<!-- 设置网页标题,显示在网页选项卡上方 -->
<title>网页标题</title>
<!-- 设置网页字符编码 -->
<meta charset="utf-8">
</head>
<!-- 网页主体部分,显示网页主要内容 -->
<body>
网页主体内容
</body>
</html><!-- 文档结束-->
2. body中常用标签
-
文本标签
- 标题标签:自带加粗效果,从h1到h6字体大小逐级递减
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
- 段落标签:
<p>段落文本</p>
- 普通文本标签:
<span>行分区标签,用于对特殊文本特殊处理</span> <b>加粗标签</b> <strong>强调标签,效果同b标签</strong> <label>普通文本标签,常与表单控件结合实现文本与控件的绑定</label> <i>斜体标签</i> <u>删除线标签</u>
- 格式标签:
浏览器会忽略代码中的换行和空格,只显示为一个空格。想要实现页面中的换行,需要借助于换行标签。
<br>
- 水平线标签,在页面中插入一条水平分割线
<hr>
- 字符实体:
某些情况下,浏览器会将一些特殊字符按照HTML的方式解析,影响显示结果。此时需要将这类字符转换为其他的形式书写
例:
使用 < 在页面中呈现 "<" 使用 > 在页面中呈现 ">" 使用 在页面中呈现一个空格 使用 © 在页面中呈现版权符号"©" 使用 ¥ 在页面中呈现人民币符号"¥"
-
容器标签
常用于页面结构划分,结合CSS实现网页布局<div id="top">页面顶部区域</div> <div id="main">页面主体区域</div> <div id="bottom">页面底部区域</div>
-
图片与超链接标签
-
图片标签 :用于在网页中插入一张图片。
- 属性 src 用于给出图片的URL,必填。
- 属性 width/height 用于设置图片尺寸,取像素值,默认按照图片的原始尺寸显示。
- 属性 title 用于设置图片标题,鼠标悬停在图片上时显示
- 属性 alt 用于设置图片加载失败后的提示文本
语法:
<img src="" width="" height="" title="" alt="">
- 超链接标签:用户可以点击超链接实现跳转至其他页面
- 属性 href 用于设置目标文件的URL,必填。
- 属性 target用于设置目标文件的打开方式,默认在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank")
<a href="http://www.taobao.com" target="_self">淘宝</a> <a href="http://www.baidu.com" target="_blank">百度</a>
-
3. 常用结构标签
-
列表标签
- 无序列表(ordered list)
默认使用阿拉伯数字标识每条数据
<ol> <li>list item 列表项</li> <li>list item 列表项</li> <li>list item 列表项</li> </ol>
- 有序列表(unordered list)
默认使用实心圆点标识列表项
<ul> <li>list item 列表项</li> <li>list item 列表项</li> <li>list item 列表项</li> </ul>
- 列表嵌套
在已有列表中嵌套添加另一个列表,常见于下拉菜单
<ol> <li> 西游记 <ul> <li>孙悟空</li> <li>孙悟空</li> <li>孙悟空</li> </ul> </li> </ol>
表格标签
- 表格由行和单元格组成,常用于直接的数据展示或辅助排版,基本结构如下
<!-- 创建表格标签 --> <table> <!-- 创建行标签 --> <tr> <!-- 行中创建单元格以显示数据 --> <td>姓名</td> <td>年龄</td> <td>班级</td> </tr> <tr> <td>小白</td> <td>18</td> <td>001</td> </tr> <tr> <td>迪丽热巴</td> <td>20</td> <td>002</td> </tr> </table>
- 单元格合并:用于调整表格结构,分为跨行合并和跨列合并,合并之后仍然保证表格结构完整
<table border="1px" width="300px" height="300px" align="center"> <tr> <td colspan="3">星期1</td> <!--单元格合并之后删除多余的单元格--> <td>星期1</td> <td>星期1</td> </tr> <tr> <td rowspan="2">星期1</td> <td>星期1</td> <td>星期1</td> <td>星期1</td> <td>星期1</td> </tr> <tr> <!--跨行合并,删除多余的单元格--> <td>星期1</td> <td>星期1</td> <td>星期1</td> <td>星期1</td> </tr> </table>
- 行分组标签:可以将表格中的若干行划分为一组,表示表头,表尾及表格主体,默认在表格中创建的所有行都会被自动加入表格主体中
<table border="1px" width="300px" height="300px"> <!-- 表头--> <thead> <tr> <!-- th与td标签用法一致,表示单元格,自带加粗和居中效果--> <th>姓名</th> <th>年龄</th> <th>班级</th> </tr> </thead> <!-- 表尾--> <tfoot> <tr> <td colspan="3">小计</td> </tr> </tfoot> <!-- 表主体--> <tbody> <tr> <td>小红</td> <td>18</td> <td>001</td> </tr> <tr> <td>小红</td> <td>18</td> <td>001</td> </tr> <tr> <td>小红</td> <td>18</td> <td>001</td> </tr> </tbody> </table>
- 无序列表(ordered list)
三、CSS中的span和div
div就相当于容器可以放东西
span属于文本级的标签
-
div
-
div在浏览器中,默认是不会增加任何的效果改变的,但是语义变了,div中的所有元素是一个小区域。
-
div标签是一个容器级标签,里面什么都能放,甚至可以放div自己
-
-
span
- span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
- span里面是放置小元素的,div里面放置大东西的:
<div>
<h3>四大名著</h3>
<ul>
<li>西游记</li>
<li>红楼梦</li>
<li>水浒传</li>
<li>三国演义</li>
</ul>
</div>
<p>
111111111111111
<span>
<a href='http://www.baidu.com'>百度</a>
<a href='http://www.taobao.com'>淘宝</a
</span>
</p>