HTML概念：
HTML是HyperText Markup Language的简称，中文名称：超文本标记语言，它是一种用于创建网页的 标准标记语言。
标记语言是由标签构成的语言。<标签名称>例如html，xml；标记语言不是编程语言。
HTML 运行在浏览器上，由浏览器来解析。
快速入门
- html文档的后缀名
.html和.htm两种都可以，没有区别。个人习惯不同而已。 - 标签的分类
围堵标签：有开始标签和结束标签，例如<html></html>
自闭和标签：开始标签和结束标签都在一个标签中<br/> - 标签可以嵌套，但是嵌套的语法要正确
正确案例：<p><a></a></p>
错误案例：<p><a></p></a> - 标签的内部是可以定义属性的，属性由键值对组成，值需要用双引号引起来，多个属性用空格
隔开
<标签名称 属性名1="属性值" 属性名2="属性值"></标签名称>
<p id="p1" name="p1">
</p>
- html标签不区分大小写，但是推荐全小写
HTML基本结构：
基本结构
<!-- 声明当前文档是html5文档 -->
<!DOCTYPE html>
<!-- html,根元素 ，围堵标签-->
<html>
<!--
head,头元素：
作用：
1、用于指定HTML文章中的一些元数据，
例如元数据 meta：定义页面的编码格式
title:定义页面的标题
2、引入外部的资源文件--未来讲解
-->
<head>
<meta charset="utf-8" />
<title>这是我的第一个HTML页面</title>
</head>
<!--body，主体：浏览器显示的内容都将在这里编写
格式化代码的快捷键：ctrl+shift+f（英文状态下使用）
-->
<body>
hello html 这是我的第一个HTML页面
</body>
</html>
HTML的注释
语法：
HTML注释以<!-- 开头 ，以-->结尾。
注释的部分浏览器不解析，注释是为了给程序员看，更好的了解html代码
<!--
这里编写HTML注释，
可以是一行，也可以是多行
-->
HTML中常用标签
文本标签
标题标签 h1–h6:字体逐渐缩小
段落标签
一般用在正文。
<p> </p>
换行标签
一般用在段落中强制换行。
<br/>
水平线标签
一般用来分隔内容，一条长线
<hr/>
有color和size属性
范围标签
一般在大段内容中，为了突出部分内容的时候使用的标签；很少独立使用，一般嵌套在其他的标签中使用。
<span></span>
注意：不是因为有了范围标签，局部内容的样式才有变化；是为了改变局部内容样子，我们才通过范围标 签包裹，然后修改它的样式。
图片标签
<img/>
基本属性:
src:指定图片的路径
路径分类：
相对路径：推荐使用
如：<img src="img/cat.jpg" />
表示与当前文件同级的文件夹img下的cat.jpg图片
…/表示上一级
<img src="../img/cat.jpg" />
绝对路径：不推荐使用
指从盘符开始的绝对路径
title:
作用：1、鼠标悬浮在图片上时显示的文字
2、当图片因为各种原因无法显示的时候，图片的位置应该显示
title的内容
alt: 与title的作用相同，但是有些浏览器不支持此属性，所以一般使用title
属性
width和height: 图片的长度和宽度，设置之后图片有可能会失真
列表标签
列表标签分为有序列表和无序列表
无序列表：
<ul>
<li> </li>
</ul>
li 标签可以有多个，如果有嵌套，建议嵌套在li 中
有序列表：
<ol>
<li> </li>
</ol>
<p>test</p>有该段落列表中也可以显示，但是不符合规范
html是弱语言类型，即使有些错误也不影响在浏览器中使用
但是语言弱，程序员不能弱，要尽量遵循规范
定义描述标签
一般用在图文混编的场景中。
<dl> 只能放dt和dd标签，不能嵌套别的标签
<dt> 一般用于存放标题和图片
<dd></dd> 一般用于存放对dt的概述和说明
</dt>
</dl>
布局标签 层 div
一般就是做容器，盛放其他标签的，将其他标签组合在一起用来布局。
标签分类
html标签可以分为块状元素和行级元素两类。
块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素，独占一行
行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。
区分的简单方法：是否独占一行。
块状元素和行内元素的区别：
1、 块级元素会独占一行，其宽度自动填满其父元素宽度； 行内元素会排列
到同一行里，其宽度随元素的内容变化而变化。
2、块级元素可以设置宽高；行内元素设置宽高无效。
3、块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖 直方向的padding没有效果。（此处的属性稍后介绍）
标签中归类
属于块状元素的：
标题标签 h1-h6,
段落标签 p ,
水平线标签 hr,
有序列表标签 ol–li，
无序列表标签 ul–li，
定义描述标签 dl-dt-dd，
容器标签 div：
属于行级元素的：
范围标签：span
图像标签：img
超链接
超链接标签一般有两个作用：
1、用来实现页面间的跳转
2、实现锚链接功能
实现页面间的跳转：
<a></a>
属性：
href = " " 目标资源的路径 推荐使用相对路径
target = “ ” 默认值：_self 在当前页面打开
常用之：_blank 在新页面打开资源
锚链接：
当一个页面长度超过一屏的时候，想迅速跳转到指定位置，例如大家经常浏览网页的时候，滑动超过一 屏，右下角经常会出现返回顶部连接，这个就是锚链接实现的。这个定位可以实现本页面间的锚链接也 可以实现不同页面间的锚链接。
本页面：
步骤：
1.在目标位置设置锚点
<a name = "sport"></a>
2.在href属性中引用刚刚定义的锚点，咋名称前加#
<a href = "#sport" target = "_self">跳转到运动</a>
页面间：
步骤：
1.在目标位置设置锚点
<a name = "sport"></a>
2.在href属性中引用刚刚定义的锚点，咋名称前加#
<a href = "锚点所在文件#sport" target = "_self">跳转到运动</a>
表格标签
规则标签：
<table>
常用属性：
height：高度 width：宽度
border：边框
cellpadding:内容与单元格之间的距离
cellspacing:单元格与单元格之间的距离
<tr> 行
常用属性：
align:文本水平方向的对齐方式
left----center------right
<th></th> 列/单元格
<td></td>
th和td都是用来定义单元格
th:一般用于表头单元格，即标题
td:一般定义非表头单元格，但也没有严格限制
常用属性：
valign:垂直方向的对齐方式
top------middle-------bottom
</tr>
</table>
不规则表格：跨行或跨列
类似于Excel的合并单元格
th和td的常用属性：
colspan:合并列
colspan = “3”，表示包括自身在内的本行三列元素
所以本行后面的两个单元格会被征用，，需要被删除
rowspan：合并行
rowspan = “3”, 表示包括自身在内的本列三行元素
所以本列后面的两个两行的同样位置会被征用，，需要被删除
表格的高级标签–标题标签和逻辑分区标签
表单–非常重要
概念：用于采集用户输入的数据。用于和服务器进行交互。
表单项元素中的一些属性：
id:元素的唯一表示，不重复
name:表单项元素的名称，很重要–提交数
据到服务器后，服务器获取数据通过该名称
value:表单项元素的值，服务器获取数据通过name获取到的就是value
type:表示表单项元素的呈现形式
class:表示样式名称
readonly:表示只读，用户只能看不能改
disabled：表示禁用，该元素不能改而且背景是灰色
文本框：
密码框：
单选按钮：
复选框：
文件域：
日期-h5中的新特性：
隐藏域：
下拉列表框：
文本域：
按钮：
提交按钮—图片按钮-----重置按钮------普通按钮
button标签可以与input实现的按钮相互替换
标签：
框架
概念：
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
如大家可以观察一下自己的京东个人中心页面，点击左侧内容的时候，只
有右边页面在变动
就是一个框，里面可以显示内容，但是框以外的东西不变
语法：
常用的布局组合标签
div-ul-li/div-ol-li：常用于导航布局
div-dl-dt-dd:常用于图文混编布局
div-form:常用于表单布局
用于获取用户的信息时
div-table:常用于局部规则数据展示布局
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
