前端之HTML
前端之HTML
2018-05-07 21:37 by 黑白GEE, … 阅读, … 评论, 收藏, 编辑
HTML
HTML定义：超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言，是用来描述网页的，网页文件的扩展名：.html或.htm
HTML的结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
1.<！DOCTYPE html> 出现在HTML文档的第一行，作用：指示web浏览器关于页面使用哪个HTML版本进行编码的指令
2.<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
3.<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示，包含了文档的元（meta）数据。
4.<title>、</title>定义了网页标题，在浏览器标题栏显示。
5.<body>、</body>之间的文本是可见的网页主体内容。
注意：对于中文网页需要使用 <meta charset=”utf-8″> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset=”gbk”>。
HTML的标签
1.标签的格式
1.双标签:<html></html> <p></p> <div></div>等
2.单标签：<br/> <hr/> <img/>等
2.标签的语法：
1.<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
2.<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
3.常用标签：
1.<head></head>内的嵌套标签：
<title></title>:用来显示网页标题
<style></style>：定义内部样式表
<script></script>:定义js代码或导入外部js文件
<link/>：引入外部样式表
<metal/>：定义网页原信息
2.<body></body>内用的标签：
1.排版标签：
<p></p>:段落标签
<hr/>：水平线标签
<br/>：换行标签
2.字体标签：
<hn></hn>:n取值为1-6,字体标签
<b></b> <strong></strong>：加粗标签
<i></i>：斜体标签
<u></u>：下划线标签
3.图片标签：
<img/>：图片标签
- 属性： src:图片路径，alt:图片未加载成功时的提示，title:鼠标悬浮时提示信息， width：50px，height:50%
4.超链接标签：
<a></a> ：超链接标签
<a href="http://www.baidu.com" target="_blank" >点我</a>
View Code
属性： href ：”http://www.jd.com” 或者 “index.htm”
target= _black 在空白界面打开 ，_self 在当前标签页中打开目标网页
5.列表标签：
<ul>：无序
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul>
type:disc（实心圆点）,circle（空心圆圈），square（实心方块），none（无样式）
<ol>：有序
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol>
type:1 数字列表，默认值，A 大写字母，a 小写字母，Ⅰ大写罗马，ⅰ小写罗马
6.表格标签：
<table border=’’ width=’’ align=’’ ></table>
子标签：<tr></tr> 行，<td></td> 列， rowspan（行合并） colspan（列合并）
border（表格边框）：2
<table borer="2">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
7.表单标签：
<form></form>:表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单基本概念：
- HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理 等功能相结合，因此它是制作动态网站很重要的内容。
- 表单一般用来收集用户的输入信息
- 表单工作原理：访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上，服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
form常用属性：
action:规定向何处提交表单的地址（URL）（提交页面）。
method:规定在提交表单时所用的 HTTP 方法（默认：GET）。
name:规定识别表单的名称（对于 DOM 使用：document.forms.name）。
form子标签：
input
常用的属性：
1.text:单行输入文本<input type=text” />
2.password：密码输入框<input type=”password” />
3.radio：单选框<input type=”radio” />
4.checkbox：复选框<input type=”checkbox” checked=”checked” />
5.file：文本选择框<input type=”file” />
6.submit：提交按钮<input type=”submit” value=”提交” />
7.reset：重置按钮<input type=”reset” value=”重置” />
8.button：普通按钮<input type=”button” value=”普通按钮” />
9.hidden：隐藏按钮<input type=”hidden” />
10.date：日期输入框<input type=”date” />
value:表单提交时对应项的值
1.type=”button”, “reset”, “submit”时，为按钮上显示的文本年内容
2.type=”text”,”password”,”hidden”时，为输入框的初始值
3.type=”checkbox”, “radio”, “file”，为输入相关联的值
- 提交到服务器的时候是 key = value，对于文本框 密码框 文本域 手写的传递过去了，对于单选和多选框来说 并不能把值传递过去，要想把值传递过去必须设置value值
- 若下拉选要想把指定内容的值传递过去，请加上value属性，默认值：文本框 密码框 添加value
name：
可以将几个单选框或者多选框设置未一组，要想将信息保存到服务器上必须有name属性。
checked：
radio和checkbox默认被选中的项
select
<form action="" method="post"> <select name=’’></select> <optgroup label="上海"> <option value=’0’ >展示内容</option> <option selected="selected" value="1">上海</option> </optgroup> </form>
multiple:布尔属性，设置后为多选，否则默认单选
selected:默认选中该项
label
<label> 标签为 input 元素定义标注（标记）
作用：
label 元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action=""> <label for="username">用户名</label> <input type="text" id="username" name="username"> </form>
textarea
<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea>