HTML
- HyperText超文本 Mark标记 Language语言。
- 什么是超文本？ 不仅仅是纯文本，除了文本之外还包括字体信息，还包括多媒体信息（图片、音频、视频）。
- 和XML的不同点： xml的标签是可以扩展的,html标签是固定的。
常用标签
1. 文本标签
- 内容标题：h1-h6 属性 align:left/right/center 独占一行，上下留有空白
- 段落标签：p 独占一行 上下留有空白
- 水平分割线 hr
- 换行：br
2. 列表标签
- 无序列表
<ul type="square"> <!-- unordered list 无序列表 -->
<li>1</li> <!-- list列表 item项 -->
<li>2</li>
<li>3</li>
</ul>
- 有序列表
<ol type="1" start="5" reversed="reversed"> <!-- ordered list 有序列表 -->
<li>打开冰箱门</li>
<li>把大象装进去</li>
<li>关上冰箱门</li>
</ol>
- 定义列表
<dl><!-- definition list 定义列表 -->
<dt>凉菜</dt> <!-- definition term 定义列表组 -->
<dd>拍黄瓜</dd> <!-- definition description 定义描述 -->
<dd>芥末鸭掌</dd>
<dd>花毛一体</dd>
<dt>炒菜</dt>
<dd>宫保鸡丁</dd>
<dd>木须肉</dd>
<dd>水煮肉</dd>
</dl>
- 列表嵌套
无序列表和有序列表可以任意无限嵌套
分区元素
- 分区元素自身没有显示效果用于把页面中的多个元素进行统一管理，类似于一个容器
- 一个页面一般分为三大区：
<div>头部</div>
<div>体部</div>
<div>脚部</div>
- h5标准中新增了几个和div功能一样的分区元素
<header>头部</header>
<article>正文</article>
<footer>脚部</footer>
- div和span
1. div：独占一行
2. span：共占一行
元素的分类
1. 块级元素:独占一行 包括：h1-h6,p, div , hr
2. 行内元素:共占一行 包括：span，斜体i和em，加粗b和strong，删除线s和del，下划线u
特殊字符 实体引用
1. 空格折叠现象 通过 ; 替换空格 牛逼是屁
2. 小于号和大于号 < > 老铁干他
3. 换行 <br>
图片标签<img>
- 常用属性：
1. scr：图片的路径
-相对路径：访问站内资源
1. 同级 直接写图片名
2. 上级 ../图片名
3. 下级 文件夹名/图片名
-绝对路径：访问站外资源 ，称为盗链，节省自己网站的资源，但是有可能出现找不到图的情况
2. alt：当图片不能正常显示的时候显示的文本
3. title：当鼠标悬停时显示的文本
4. width：设置宽度
两种赋值方式：1.像素 2.百分比 如果只设置宽度高度会自动等比缩放
5. height：设置高度
- 图片支持的格式：jpg/jpeg png gif
图像地图
- <map> 属性：name 用于表示map的唯一性
- <area> 范围 属性：
1. shape形状(circle/rect)
2. coords坐标（rect四个值 两个对角线点的坐标，circle三个值 圆心坐标和半径）
3. href路径 设置点击的行为， 该路径指向的资源如果浏览器能够浏览则直接浏览，如果不能浏览则下载此文件
超链接
- <a href="http://www.baidu.com">xxx</a>
- href属性和图像地图里面的href一样
- target="_blank" 从新的窗口中显示页面
- a标签可以包裹文本也可以包裹图片
- 锚点的使用：
<a id="top"></a>
<a href="#top">回到顶部</a>
1. html结构
<!DOCTYPE HTML>
<html>
<head></head>
<body></body>
</html>
2. head里面的标签
- meta：charset name="keywords" content="a,b,c"
- title：页面标题
3. body里面的标签
- h1-h6 属性： align=“left/center/right”
- p 段落 上下有空白
- 列表： 有序列表 ol-li 无序 ul-li
- 分区元素： div：独占一行 和span 非独占一行
- 块级元素：独占一行，div, p, h1-6,hr
- 行内元素：非独占一行,span, i和em, b和strong,u,del和s
- 换行 br
- 特殊字符 空格： < > br
- 图片标签: img 属性： src路径（相对和绝对）alt，title，width、height
###注释
- 格式： <!-- --> 快捷键：control+shift+/
图像地图 map
- 什么是图像地图：可以将图片中的某个部分作为可点击的链接。
- 使用方式：
<img alt="图片" src="k.jpg" width="800px" usemap="#mymap">
<map name="mymap" id="mymap">
<area alt="圆形" shape="circle" coords="100,200,50" href="2.gif">
</map>
- 如果使用shape=rect，coords的值所代表的意思是左上角点的x和y，还有右下角点的坐标x和y。如果shape=circle coords值表示圆心坐标(x和y)和半径
- href属性：值为一个路径，相对路径和绝对路径，区域被点击时会直接访问此路径的内容，路径可以指向页面，也可以指向图片资源，也可以指向其它类型的文件会下载此文件。
超链接
- 在网页中经常使用超链接进行链接导航，语法：<a href="路径" >链接</a>
- target属性：控制从什么位置跳转，值为_self是从当前页面跳转（默认）,值为_blank是跳转到一个新窗口显示页面
- a标签可以支持以下几种写法：
<a href="http://doc.tedu.cn">达内文档</a>
<a href="map2.html" target="_blank">图像地图练习</a>
<a href="day01.zip">文件下载</a>
<a href="2.gif">浏览图片</a>
a标签锚点的使用
- 通过锚点可以实现页面内部位置的跳转
- 操作方式：
1. 在页面中的某个位置设置锚点：
<a id="top" name="top"></a>
2. 通过超链接跳转到锚点的位置
<a href="#top">回到顶部</a>
-锚点练习：
图片1 图片2 图片3 图片4
表格标签
- 什么是表格：由单元格的矩形框按照从左到右从上到下的顺序排列组成的内容为表格
- 作用：以一定的结构来显示信息
- 表格的格式：
<table>
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
</table>
- 表格属性：
1. cellspacing：每个单元格之间的间距和单元格距表格边框的距离
2. cellpadding: 内容与单元格边框的距离
3. width/height:表格的宽高
4. border：边框的宽度
5. colspan: column(列) span 合并列
6. rowspan: row span 合并行
行分组
在前端编程的时候，使用分组便于整体操作表格的头部体部和尾部
- 格式：
<table>
<thead>
<th></th> table-head
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
- caption标签，写在table标签内部，起到表格标题的作用
<table border="1">
<caption>订单列表</caption>
</table>
表单 form
- 在浏览器中，浏览器向服务器发送数据，一般使用的都是表单
最低0.47元/天 解锁文章
4937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
