html语法基础
// 标准属性：所有的元素都支持的属性
id 定义此元素在页面中的唯一标识
title 鼠标悬停在元素上时，显示的文本
style css中 定义行内样式
class css中 引用类选择器
注释的快捷键： ctrl+/
<!--注释：1、注释不可以嵌套注释 2、注释不可以写在标签中-->
HTML文档的构成
1、文档类型的声明
<!-- 告诉浏览器以代码以h5的规则解析 --> <!DOCTYPE html>
2、网页的基本结构
<!DOCTYPE html>
<!-- 网页开头和结束 -->
<html>
<!-- 网页头部内容 -->
<head>
<title></title>
</head>
<!-- 网页主体，用户可见 -->
<body>
</body>
</html>
3、head元素是其他头元素的容器<head></head>
<head> <!-- 元数据，定义网页的全局信息，解码方式 --> <meta charset="utf-8"> <meta name="Keywords" content="关键词的内容"> <meta name="description" content="描述的内容"> <title></title> </head>
定义网页内部样式
<style type="text/css"></style>
定义或者引用js文件
<script type="text/javascript"></script>
引用外部样式表
<link rel="stylesheet" type="text/css" href="">
4、body元素——定义网页主体
bgcolor 背景颜色
text 字体颜色
取值: 合法的颜色值----->单词
例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
</head>
<body bgcolor="pink" text="#fff">
lorem
</body>
</html>
5、标题元素——在页面中以醒目的方式显示文本
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
特点：1、文本加粗 2、字号变化 3、独占一行且上下有垂直间距
属性：aligb 设置标签内容水平方向对齐：left/center/right
6、段落标记
语法：<p></p>
作用：突出表示一段文字
特点：独立成行，上下有垂直的间距
属性：align
7、换行标记
语法：<br></br>
8、水平线(分割线)
语法：<hr></hr>
属性：
width="50%" 表示水平线的宽度 取值为%或者px为单位的数字
size="5px" 表示水平线的尺寸（粗细），取值为%或者px为单位的数字
align="left" 对齐方式
color="red" 设置水平线的颜色
9、预格式化标签
语法:<pre></pre>
作用： 标签内部的文本，保留其格式，再页面上显示
空格折叠现象：一个或多个空格、回车会被浏览器渲染成一个空格或显示
10、特殊字符（实体）
空格
< <
> >
版权 ©
注册 ®
￥ ¥
x ×
例1；
<p>Copyright © 2014-2018 < 京东ID.com > 版权所有</p>
11、文本样式标签
<b>我是粗体</b> <strong>我是粗体</strong> <i>我是斜体</i> <em>我是斜体</em> <u>下划线</u> <del>删除线</del> <s>删除线</s> <!-- 上标：2的3次方 --> 上标：2<sup>3</sup> 下标： 2<sub>3</sub>
12、分区元素
1）、块分区，用于页面中布局
语法： <div></div>
特点：独立成行
2）、行分区，同一行文本使用不同的样式
语法：<span></span>
特点：可以与其他的span和文字共用一行
13、行级元素和块级元素(元素的显示形式)
1）块级元素——在网页中单独成行就是块级元素 常见块级元素：h1-h6 p div 从上往下排列 2）行级元素——在页面中与其他行内元素/行内块共用一行 从左往右排列 页面中常见行内元素：em i b strong u sup sub span
3）行内块元素
显示的方式与行内元素相同，但是具备块级元素的特征
4）table的显示方式
1、表格的宽高是由表格的内容决定，内容多就宽一些，高一些；
2、表格中的多有数据都预读到内存，一次性画到页面上；
14、图像和连接
1）图像
语法：<img>或者</img> 属性：src="url" url-图片资源路径
alt :图片资源出错，显示文字；
设置图片高度，以px为单位的数字；
height:设置图片的高度，以px为单位的数字；
若 宽高比设置的不对，会发生图片失真的情况 ，解决：宽高只设置1个，另一个自适应； URL路径的表现形式 绝对路径：一个完整的路径（通信协议+主机地址+文件目录结构+文件的具体名称） 合适使用： 1）使用网络资源的时候，使用绝对路径； 优点：不占据自己服务器的存储空间； 缺点：不稳定；
相对路径：参照物是html本身
1）图片和html文件在同一个路径下，src直接引用文件名称；
二、表格列表
1、链接
<a href="跳转地址，若没有写#" target="_blank">链接文字</a>
target的取值：_self 默认值，在当前页面标签页打开新链接
_blank 在新的标签页打开
a标签的其他表现形式：
<!-- 下载 --> <a href="1.zip">下载</a> <!-- 新建邮件 --> <a href="邮箱地址">新建邮件</a> <!-- 执行js脚本 --> <a href="javascript:alert(111111)">执行js</a> <!-- 返回当前页顶部 --> <a href="#">返回顶部</a>
2、锚点——网页中的一个记号
h4:
1）<a>定义锚点
<a name="no1"></a>
2）<a>链接到锚点
<a href="#no1">回到锚点</a>
h5:
1) 任意标签的Id属性定义锚点
<any id="id"></any>
2)使用a标签链接锚点
<a href="#id">回到锚点</a>
3、表格
表格的一个重要功能------>布局
<!-- 语法 -->
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
table属性：
1、border="1px"; 设置边框
2、width="200px";
3、height="200px";
可设置宽高，内容小于宽高，按宽高；内容大于宽高，按内容改变尺寸；
4、align 设置表格对齐方式（水平）
5、bgcolor 背景颜色
6、cellpadding 设置单元格内边距（边框到内容的距离）
7、cellspacing 设置单元格外边距（单元格与单元格之间的距离）
tr属性
1、align 设置当前行内容的水平对齐方式（设置表格内容对齐方式） 2、valign 设置当前行内容的垂直对齐方式 （取值：top middle bottom） 3、bgcolor 当前行的背景颜色
td属性
1、width 2、height 3、align 4、valign 5、bgcolor
6、colspan=2 从指定的单元格位置处开始，横向跨两列，需要将被合并的列删掉
7、rowspan=？ 从指定的单元格位置处开始，纵向向下合并，需要将被合并的行删掉
table中的可选标记
1、表格的标题----如果设置标题，把必须将<caption>标签放在<table>后；
<caption></caption>
2、<th></th> 代替<td></td> 行/列的标题 加粗/居中
表格的复杂应用
1、行分组
可以将连续几个行，划分到一个组中，进行统一管理
表头行 <thead></thead> 表格最上面一行的标题放在thead中
表主体 <tbody></tbody> 允许将若干放在tbody中进行统一管理
表尾行 <tfoot></tfoot> 表格中最后一行放在tfoot中
2、表格的嵌套
一张表格中，所有的嵌套的表格，只能放在td中
列表 ----> 默认按照从上到下的顺序来显示数据，并且可以在数据前添加标识，使用列表布局（去掉标识，从上到下，从左到右排列）
1、列表的组成
1）有序列表<ol></ol>
列表属性：type=1/a/A/i [排序方式] start='20' 从20开始
2）无序列表<ul></ul>
列表属性：type=disc/circle/square/none
均有列表项：<li></li>
2、列表嵌套-----> 所有的嵌套必须只能写在li中
三、结构标记
1、结构标签-----> 代替div 用户描述整个网页结构，提升标记的语义
常用的结构标记：
<header></header> 定义网页或某个区域的头部内容 <nav></nav> 定义网页的导航链接部分 <section></section> 定义网页的主体 <aside></aside> 定义网页侧边栏 <footer></footer> 定义网页底部内容，多用于版权，解释说明，备案号 <article></article> 定义与文字相关内容
四、表单
1）作用：
1、提供可视化的输入控件；
2、手机用户填写的信息并提交给服务器
2）表单的组成部分：
1、前端部分
提供表单的控件，与用户做交互的可视化控件；
2、后端部分
对提交的数据进行处理(接口)
3）表单
<form action="" method="" enctype=""></form> 属性： 1、action 定义表单被提交时发生的动作，通常用来定义服务器处理数据的地址、接口，默认提交给本页地址 2、method 指定表单数据提交的方式(方法) get() post() delete() put() 3、enctype 编码方式，设置表单允许将什么格式的数据提交给服务器 enctype="text/plain" 提交普通字符，不能由特殊符号 enctype="application/x-www-form-urlenooded" 允许将任意的字符提交给服务器 enctype="multipart/form-data" 允许将文件提交给服务器
4) 表单控件 -----> 能够与用户进行交互的可视化元素
【分类】
1. input元素 2. textarea 所行文本域 3. 下拉选择框 4. 其他元素
【input元素】 -----> 在页面中提供各种各样的输入控件，通过type属性来设置输入控件的样式 type 设置输入控件的类型 name 为控件定义的名称，提供给服务端使用(必须值) value 控件的值，提交给服务端使用 type="text" 默认值 type="password" 【input属性】： 1、maxlength 限制输入的最大字符数 2、readonly 只读,允许被提交 3、disabled 禁用控件 不可操作和提交 4、placeholder 占位符 默认显示在控件上，得到焦点 文本无效 不可被提交 <form> <input type="text" name="uname" readonly="" placeholder="请输入账号"> <input type="password" name="password"> <input type="submit" value="提交"> </form>
按钮
type="submit" 提交按钮 将表单中的数据提交给服务器
type="reset" 重置按钮 让表单内容恢复到初始化状态
type="button" 无功能的按钮 没什么功能 单击时间onclick="js的函数"
<button onclick="js的函数"></button> 可以提交
type="radio" 单选按钮,用name来定义控件名称+分组，必须有value
checked 设置默认选中项，无值属性
checkbox 多选按钮，传到后台要全部接收的话需要定义name为数组hobby[]，后台用for循环接收
5) 隐藏域信息 -----> 不想给用户看 又想提交给服务器
<input type="hidden" name="uid" value="dn18100023">
6）文件选择框
若传file:注意： method="post" enctype="multipart/form-data" multiple 无值属性，支持同事上传多个文件 需要name属性 <form action="" method="post" enctype="multipart/form-data"> <input type="file" name="me" multiple> </form>
7）文本域-----> 允许录入多行数据的文本框
<form action="">
<!-- 若输入的多 则出现滚动条 -->
<textarea name="sanm" cols="30" rows="10"></textarea>
</form>
属性：
name 控件名称
readonly 只读
cols 指定文本域的列数
rows 指定文本域的行数
8）下拉选择框
当option没有value属性时，提交时选择的value为选中的option内容；当option有value时，提交时 选择的value时选中的option的value;
<form action="">
<select name="city" value="北京"> 表示一个下拉选择框
<option>北京</option> 表示下拉选项中的一个选项
<option>北京1</option>
<option>北京2</option>
</select>
</form>
属性：
name
size 定义显示选项的数量，默认为1，若大于1 下拉选项表现为滚动列表
multiple 无值属性，可以多选，但是name需要用数组
value
selected 设置默认选中项
9、其他元素
label 文本与表单控件的关联
属性：
for:要与label中文字发生关联的form控件的id
例1：
<input type="radio" name="choose" value="delete" id="c3">
<label for="c3">删除</label>
10、为空件分组
fieldset 为控件分组
legend 文字放在框上，分组标题
11、浮动框架
作用：允许在一个网页中引入另一个网页
<header>
<iframe src="网页相对路径" width="100%" height="200px" frameborder="0" scrolling="no"></iframe>
</header>
scrolling 不显示滚动条
frameborder 不显示边框
height 高度存在问题，需要使用js.dom来解决
12、h5的新表单元素 ---> h5中新提出的表单控件，h4不可用
<body>
<form action="">
<input type="email" name=""><br> // 电子邮件验证(@以及@后面的内容)
<input type="search" name=""><br> // 提供快速清除文本框的功能
<input type="url" name=""><br> // 验证数据是否符合url规范，验证http://xxx
<input type="tel" name=""><br> // 手机上 获取焦点 显示拨号键的效果
<!-- 只能接收数字，并且提供了箭头灵活调整，E可以输入, step步数-->
<input type="number" name="" value="10" max="20" min="3" step="2"><br>
<input type="range" name="" value="10" max="20" min="3" step="2"><br> // 滑块，允许用户指定选取的范围
<input type="color" name=""><br> // 颜色拾取器
<input type="date" name=""><br> // 日期选择器
<input type="month" name=""><br> // 不拿天
<input type="week" name=""><br> // xxxx年xx周
<input type="submit" name="">
</form>
</body>