HTML部分
html是什么？
- 超文本标记语言(Hypertext Markup Language，HTML)通过各种标签来实现网页中的各个部分的显示
- 文件扩展名：.html或者.htm
- 通过浏览器渲染引擎对标记进行解释显示内容，不同的浏览器有不同的兼容性。
html结构
<!Doctype html><html> ???<head>
<meta charset="utf-8">
<title></title> ???</head> ???<bady> ???</bady></html>
- <!Doctype html>浏览器通过这个设置使用什么样的html或者xhtml来解析文件
<html></html>表示网页的开始结尾，<head></head>网页的头部，<title></title>网页的标题，<bady></bady>网页的主体，head和title不会再网页中显示，但是对网页有特殊的意义。
html常用标签
Meta标签
meta标签网页信息用户不可见，可以提供与页面有关的信息，主要是搜索引擎的描述和关键字。
mata位于html的头部（head）,用户不可见。
mate标签的的组成：共有name和http-equiv两个属性。
- name属性：主要用于网页的描述，对应content的内容，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" contect="">向搜索引擎说明网页的关键词<meta name="description" content="content">告诉搜索引擎网页的描述信息。。。。
- http-equiv属性：相当于http的文件头作用，帮助正确地显示网页内容，对应content属性，content是各个属性的变量值。
<!-- 页面自动跳转 ?refresh 刷新--><meta http-equiv="refresh" content="2;http://www.baidu.com"><!-- 规定文档的字符编码。--><meta http-equiv="content-Type" charset=UTF8"><!-- 浏览器兼容性 --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
bady内标签
一.基本标签
<hr>:水平线
<br>：换行
<p></p>：段落
<h1>/<h1>...<h6></h6>：标题
<strong></strong><b></b>：字体加粗（strong具有语义性）
<em></em><i></i>：斜体（em具有语义性）
<ins></ins><u></u>：下划线（ins具有语义性）
<del></del><s></s>：删除线（del具有语义性）
<font></font>：规定文本的字体、字体尺寸、字体颜色。
<sup></sup>：上标
<sub></sub>：下标
<div></div><span></span>:块级元素，通过css赋予其表现形式
二.img图片标签<img>
src：图片的路径（相对路径/绝对路径）
width：宽度
height：高度
title：设置鼠标悬浮到图片上的文字提示
alt：该属性是给搜索引擎看的，图片没有加载的话会显示
三.超链接，锚链接<a>
href：设置跳转页面的路径(
???绝对 URL - 指向另一个站点（比如 href="http://www.jd.com） ???相对 URL - 指当前站点中确切的路径（href="index.htm"） ???锚 URL - 指向页面中的锚（href="#top"）<#后表示具体的id，href="#"表示空链接>
)
target：设置跳转页面的打开方式（_self <默认>| _blank<新窗口>）
跳转到新页面的优化写法:在head标签中：<base target="_blank">
title：设置鼠标悬浮到图片上的文字提示
四.link标签<link>
设置网页标题图标（<link rel="icon" href="图片路径">）
引用外部样式表（<link rel="stylesheet" href="样式表路径">）
五.列表
<!-- 无序列表 --><ul><li></li></ul><!-- 有序列表 --><ol><li>列表中的每一项</li></ol><!-- 自定义列表 --><dl><dt>列表项标题</dt><dd>列表项，于li用法一致</dd></dl>
六.表格<table>
1.表格结构：<table> ???<caption>标题</caption> ????????<!-- 行 --> <tr> <th>表头</th> </tr> <tr> <td> 列内容</td> </tr></table> ?????
2.具体属性：
border：表格边框.
bgcolor:表格颜色。
cellpadding：内边距
cellspacing：外边距
width：高度
height：宽度
rowspan：纵向合并单元格
colspan：横向合并单元格
align：对其方式
七.表单<form>
用于向服务器传输用户提交的数据，表单由表单域，表单控件，提示信息组成。
1.表单属性：
action：用来指定表单处理程序的位置(服务器端脚本处理程序）
method：表单提交的方式（get：提交后再url地址栏可以看到相应的值，不安全；post：提交后的值不显示再url地址栏，相对安全）
2.表单元素
input相对应的属性和值
type：
text：文本
password：密码
radio：单选框
checkbox：复选框
button：按钮
submit：提交按钮
file：上传文件
image：图片按钮
reset：重置表单
name：与服务器通信使用的名称（id浏览器短的名称，方便css/js中使用）
value：
type="text", "password", "hidden" - 定义输入字段的初始值type="button", "reset", "submit" - 定义按钮上的显示的文本type="checkbox", "radio", "image" - 定义与输入相关联的值
checked：radio和checkbox中默认选中
readonly：只读（不可以输入）
disabled：禁用（不可以输入，且输入框灰色）
maxlength：设置当前控件最大收入字符长度
required：必填项
placeholder：占位符（可以设置文本初始值）
autocomlete：自动完成
autofocus：自动获取焦点
。。。。。
file上传文件时注意：form要设置enctype="multipart/form-data"，method="post"
<select>下拉标签
<select name:与服务器交互的名称 size:可现实的数量 multipe:可选择多个选项>
<option></option>
</select>
另一种显示方式
<select > ???????????<optgroup label="山东"> ???????????????<option >潍坊</option> ???????????????<option >淄博</option> ???????????????<option >济南</option> ???????????</optgroup> </select>
<textarea>文本域
<textarea ></textarea>
rows:可见行数
cols：可见高度
<lable>
<label> 标签为 input 元素定义标注（标记）。<label for="male">用户名</label><input type="username" name="uname" >
表单分组
<fieldset><legend>标题</legend> ???????</fieldset>
多媒体标签
<!-- 音频标签 ???controls显示控制面板 ????loop循环播放 ???autoplay自动播放--> ???<audio src="路径" controls="" loop="" autoplay=""></audio> ???<!-- 支持多格式音乐文件播放 --> ???<audio controls> ???????<source src="路径" > ???????<source src="路径" > ???????<source src="路径" > ???</audio><!-- ????视频标签 ???controls显示控制面板 ????loop循环播放 ???autoplay自动播放 --> ???<video src="路径" autobuffer autoloop loop controls></video> ???<!-- 支持多格式视频文件播放 --> ???<video autobuffer autoloop loop controls> ???????<source src="路径"> ???????<source src="路径"> ???????</object> ???</video>
<datalist>标签
<input type="text" list="1"><datalist id="1"> ???<option value="bmw"></option> ???<option value="fod"></option> ???<option value="aidi"></option><datalist>
补充：h5中新增的input中 type属性
html
原文地址：https://www.cnblogs.com/feizhu/p/8218692.html