1、html基本介绍
注意：html中大小写不敏感
DOCTYPE是用来说明html版本
1、web标准
web标准是万维网制定的网页开发标准，注意主要包含三类：
结构标准：html(决定网页中的内容)
表现标准：css(决定网页中的内容的布局和样式)
行为标准：JavaScript(决定网页内容动态变化的部分)
2、认识html
html又叫超文本标记语言(和Markdown一样)
一个网页本质就是一个html文件
3、html文件基本结构
一个html代表整个标签;一个html标签中有一个head标签和一个body标签。
4、html基本语法
1)语法
双标签：<标签名 属性名1=值1 属性名2=值2 ...>标签内容</标签名>
单标签：
<标签名 属性名1=值1 属性名2=值2 ...>
<标签名 属性名1=值1 属性名2=值2 .../>
2)说明
<>和/：固定写法
标签名：只能写html相应版本提供的标签的标签名
属性：
属性是以'属性名=之'的形式出现，多个属性用空格隔开；
属性的顺序不影响结果；
不管什么属性的值，值必须引号引起来
标签内容：
任何内容都可以作为标签内容
2、head标签
head的作用：head标签主要负责网页图标和标题的显示以及网页的基本设置
head中的标签：head中可以写的标签：meta、title、link、style、script、base
meta：设置网页的元数据(网页编码方式、网页搜索关键字、网页介绍等)
link：导入文件(设置网页图片、导入外部样式表)设置网页图标
rel属性：设置被导入的文件的作用：
stylesheet：样式表
icon：网页图标
type(设置文件类型)：文件类型、文件后缀
text/css：导入的文件后缀是.css的文本文件
image/ico:导入的是后缀名为ico的图片文件
href：被导入的文件路径
<link rel="icon" type="image/ico" href="img/aaa.ico" />
3、文本标签
1、标题标签：h1~h6
2、段落标签：p
3、普通文字标签：fon
多个font标签的文字可以在一行显示
4、空格和换行
网页内容中我们手动输入的空格和换行都是没用的
1)换行：<br />
2)空格：
 :单位是空格键
:单位是像素
5、文字效果：倾斜、加粗
加粗：<b></b>(单纯涂黑)、<strong></strong>(有强调的意思)
倾斜:<i></i>(单纯倾斜)、<em></em>(有强调的意思)
6、水平线:<hr />
4、列表标签
1、无序列表：ul-li
ul：表示列表容器
li：列表中的元素
2、有序列表
ol：表示列表容器
li：列表中的元素
3、自定义列表：dl-dt-dd
dl：整个列表容器
dt：表示一个分组
dd：表示每个分组中的内容
5、图片和超链接
1)图片
图片标签：img
src:图片地址
本地文件路径(绝对路径/相对路径)
网络图片路径(网络路径)
title属性：图片标题(鼠标悬停在图片上等一会儿才会出现)
alt:图片加载失败提示信息
2)超链接
超链接:a
<a href="跳转目的地">可见的可点击部分</a>
1)href:跳转目的地
网页地址：跳转到指定网页
本地html文件地址：在浏览器中直接打开指定html文件对应的网页
选择器：将当前页面滚动到选择器所在的位置
#：刷新页面
2)target：页面的打开方式
_self:默认值，在当前页面中渲染出新的页面
_blank:不动原页面，在新的窗口中渲染新的页面
6、表格标签
表格标签：table-tr-td
table:整个表格
border:设置边框线的宽度
cellspacing：设置单元格与单元格以及单元格与表格之间的间隙，默认为1
cellpadding:设置整个表格中所有的单元格中的内容到边框的距离
bordercolor:设置边框线的颜色；颜色单词或十六进制的颜色值
bgcolor:设置整个表格的背景颜色
width:设置整个表格的宽度
height:设置整个表格的高度
align:设置整个表格在网页中的对齐方式(center,left,right)
tr:一个tr代表一行
bgcolor:设置指定行的背景颜色
height:设置指定行的高度
align:设置指定行中所有的单元格的内容在单元格中的对齐方式
cellpadding:设置整行中所有的单元格中的内容到边框的距离
td:一个td代表一个单元格
bgcolor:设置指定单元格背景颜色
width：设置指定列的宽度
align:设置指定单元格的内容在单元格中的对齐方式
cellpadding:设置指定单元格中的内容到边框的距离
rowspan：行合并
colspan：列合并
7、form表单
- 表单标签是专门用来做用户信息收集的标签；是一个容器型的标签，单独用没有意义，一般需要配合表单相关标签来使用。
- 主要完成数据的提交和重置的功能
- 表单相关标签: input、textarea、select
- action属性 - 数据提交的方法/接口
- method属性 - http请求方式(接口类型)
1）form表单之textarea(多行文本域)
name属性 - 区分和提交数据
rows属性 - 行数,控制输入框的高度
cols属性 - 列表, 控制输入框的宽度
placeholder属性 - 提示信息
<textarea name="" rows="4" cols="100" placeholder="请输入意见..." maxlength="200"></textarea>
2）form表单之select(下拉菜单)
select标签 - 整个下拉列表
option标签 - 下拉列表中的选项
selected属性 - 值设置为"selected", 让指定选项处于默认选中状态
<select name="city">
<option value="成都">成都市</option>
<option value="重庆">重庆市</option>
<option value="贵阳">贵阳市</option>
<option value="三河">三河</option>
<option selected="selected" value="北京">北京市</option>
</select>
可以通过添加optgroup标签并且设置label属性来对同一个下拉列表中的选项进行分组
<select name="">
<optgroup label="成都市"></optgroup>
<option value="">武侯区</option>
<option value="">成华区</option>
<option value="">青羊区</option>
<option value="">金牛区</option>
<option value="">高新区</option>
<optgroup label="北京市"></optgroup>
<option value="">海淀区</option>
<option value="">朝阳区</option>
<option value="">丰台区</option>
</select>
3）form表单之input
type属性：决定标签的作用
name属性：用来区分和提价数据的
value属性：输入框中的内容
placeholder:占位符
maxlength:限制输入框内容的长度
disabled:设置为disabled属性，会禁用
常用属性：text,password,radio,checkbox,button,submit,reset
<form action="" method="get">
<!--2.input标签
type属性 - 决定标签的作用
-->
<!--1)text - 普通文本输入框
name属性 - 用来分区和提交数据的
value属性 - 输入框中的内容
placeholder属性 - 占位符(输入提示信息)
maxlength属性 - 限制输入框内容的长度
-->
<font>用户名:</font><input type="text" name="userName" id="" value="张三" placeholder="请输入用户名" maxlength="8"/>
<br /><br />
<font>电话:</font><input type="text" name="tel" id="" value="" placeholder="请输入手机号" />
<!--2)password - 密码输入框
name属性 - 用来分区和提交数据的
value属性 - 输入框中的内容
placeholder属性 - 占位符(输入提示信息)
maxlength属性 - 限制输入框内容的长度
-->
<br /><br />
<font>密码:</font><input type="password" name="" id="" value="123456" placeholder="密码6~12位" />
<!--3)radio - 单选按钮
name属性 - 用来分区和提交数据的（注意: 同一组选项的name属性必须一致）
value属性 - 标签点当前按钮选中的数据的值（不可见）
checked属性 - 设置为"checked", 对应的按钮会被默认选中
-->
<br /><br />
<!--让label标签的for属性和表单标签的id属性保持一致，可以让label和表单标签进行关联-->
<input type="radio" name="gender" id="1" value="男" checked="checked"/><label for="1">男</label>
<input type="radio" name="gender" id="2" value="女" /><label for="2">女</label>
<!--4)checkbox - 复选按钮
name属性 - 用来分区和提交数据的（注意: 同一组选项的name属性必须一致）
value属性 - 标签点当前按钮选中的数据的值（不可见）
checked属性 - 设置为"checked", 对应的按钮会被默认选中
-->
<br /><br />
<input type="checkbox" name="interest" id="b1" value="篮球" /><label for="b1">篮球</label>
<input type="checkbox" name="interest" id="b2" value="唱" /><label for="b2">唱</label>
<input type="checkbox" name="interest" id="b3" value="跳" /><label for="b3">跳</label>
<input type="checkbox" name="interest" id="b4" value="rap" checked="checked"/><label for="b4">rap</label>
<!--5)button - 普通按钮
value属性 - 按钮上可见的文字
disabled属性 - 设置为'disabled',是禁用
-->
<br /><br />
<input type="button" name="" id="" value="确定" />
<!--button标签-->
<button>确定</button>
<button><img src="img/aaa.ico"/></button>
<!--6)submit - 提交按钮
将当前form标签中所有设置name属性值的相关的标签，以'name=value'的进行对数据进行提交
-->
<input type="submit" name="" id="" value="提交" />
<!--7)reset - 重置按钮
将当前form标签中所有相关标签的状态恢复到初始状态
-->
<input type="reset" name="" id="" value="重置" />
</form>
补充：file,color,date,daetime,email,hiddle,image,month,number,ranger,seach,tel,time,url,week,,datetime-local
<input type="file" name="" id="" value="" />
<input type="color" name="" id="" value="" />
<input type="date" name="" id="" value="" />
<input type="datetime" name="" id="" value="" />
<input type="datetime-local" name="" id="" value="" />
<forn>邮箱：</forn><input type="email" name="" id="" value="" />
<forn>hidden：</forn><input type="hidden" name="" id="" value="" />
<forn>image：</forn><input type="image" name="" id="" value="" />
<forn>month：</forn><input type="month" name="" id="" value="" />
<forn>number：</forn><input type="number" name="" id="" value="" />
<forn>range：</forn><input type="range" name="" id="" value="" />
<forn>search：</forn><input type="search" name="" id="" value="" />
<forn>tel：</forn><input type="tel" name="" id="" value="" />
<forn>time：</forn><input type="time" name="" id="" value="" />
<forn>url：</forn><input type="url" name="" id="" value="" />
<forn>week：</forn><input type="week" name="" id="" value="" />
8、div和span
- div和span都是无语义标签， 主要是用来对网页中的内容进行分块和分组的;
- div默认是块级标签，显示的时候只能一个占行
- span默认是行内标签，显示的时候一行可显示多个
<div id="">
div标签
</div>
<!--<span id="">
<p>
HTML maxlength 属性 HTML 标签
</p>
</span>
<span id="">
<p>HTML disabled 属性 HTML 标签 实例 </p>
</span>-->
<div id="">
<font>你好</font>
<a href="">百度</a>
</div>
<div id="">
<font>hello</font>
</div>
