首页 > 代码库 > html_note
html_note
一、简介
1.超文本标记语言（标记标签），描述网页
2.<head>包括咨讯信息：整个页面的属性、指导浏览器解析的标签、引入外部文件的标签
<body>需要展示的信息
3.大部分标签有属性，属性=“属性值”，多个属性之间用空格隔开
4.空标签 功能单一<br/>
5.html标签不区分大小写，建议使用小写
二、基本标签
1.文件标签(结构标签)
<html>：根标签
<head>：<title>页面的标签
<body>：内容 属性 text文本颜色 bgcolor背景色 background背景图片
颜色：（1）单词 red （2）rgb三原色 （3）#000000 #ffffff
2.排版标签
注释标签<!-- -->
换行标签<br>
段落标签<p>文本文字</p> 特点：段与段之间有换行  空格
属性 align对齐方式(left，center，right)
水平线标签 <hr/> 属性：width长度 size粗度 color颜色 align对齐方式
尺寸的写法：像素10px ，百分比（占据父标签的百分比）
3.块标签
div 行级块标签 占一行 作用：div+css布局
span 行内块标签 占一行中的一块 作用：友好提示
4.文字标签
基本文字标签：<font> 属性：color颜色 size大小（最大值7 最小值1 默认值3） face字体类型
标题标签：<h1>-<h6> 依次减小，默认字体加粗，内置字号，默认占据一行
5.清单标签
无序列表标签<ul>
<li>列表项 属性：type（disc，square，circle）
有序列表标签<ol>
<li> 属性：type（1数字，a字母，i罗马字符） start数字代表首项开始位置
6.图形标签
<img>
src图片的地址 width图片宽度 height图片高度 border边框 align代表图片与相邻文本的相对位置（top，middle，bottom） alt图片的文字说明
7.链接标签
<a> 属性：href跳转的页面地址 name 名称，锚点 target(sel在当前页面打开 _blank在空白页面打开)
作用：（1）页面跳转 访问互联网的资源 前面必须加协议 http
（2）锚点访问 <a name="top"></a> <a href=http://www.mamicode.com/#"top">top</a> #代表本页
8.表格标签
<table></table> 属性：border表格边框 width表格宽度 align表格对齐方式
bgcolor 背景颜色
<tr>行
<td>单元格 属性：colspan列合并 rowspan行合并
<th>表头
<caption> 表格的标题
表格作用：（1）简单实现表格样式 （2）进行布局
<thead> <tbody><tfoot> 分块加载，用户体验好
三、表单标签
1.form标签<form></form>
属性： name表单名称（ajax） action提交的路径地址 method提交方式(et,post)
method默认是get提交
get和post区别：
(1)get提交数据将数据加在地址栏后面，post提交将数据封装在请求体中
(2)get提交相对不安全，post提交相对安全
(3)get提交有大小限制，根据浏览器不同而不同，post不限制大小
2.input标签
属性：type根据type值不同会显示不同功能表单项，name，value默认值
text 普通文本输入框
password密码输入框 特点：显示掩码
radio 单选框 注：组的概念 如果想让一组单选按钮互斥，必须name属性相同 checked代表默认被选中 <input type="radio" name="sex" value="http://www.mamicode.com/male" checked>男
checkbox 复选框 注：组的概念 如果想让一组单选按钮互斥，必须name属性相同 checked代表默认被选中
file上传文件
button 普通按钮 没有任何内置功能 value代表按钮名称 <input="button" name="btn" value="http://www.mamicode.com/button">
submit 提交按钮 会提交到form标签action属性中的地址
reset 重置按钮 点击会将表单清空
image 图片按钮（src，alt图片提示文字）
hidden隐藏表单（服务端需要，但不需要用户知道）
3.select标签 option标签
<select></select> name value
option代表一个选择项 value selected=“selected”默认被选中的项
4.textarea标签 属性：cols行数 rows行数 默认的文本值在标签体中 <textarea name="ta" cols="30" rows="10">this is my page.</textarea>
四、框架标签及其他
1.框架标签
frameset和body地位相同
frameset 属性：cols按列划分 rows按行划分 rows="120,*"
frame 属性：name名称 方便target根据name值进行定位
src：加载页面路径
2.其他标签
<meta>
<link> rel="stylesheet"样式表 href：引入css文件的地址
<script> src：引入js的文件地址
3.特殊字符
 空格
>大于号
<小于号
©版权符号
®注册符号
html_note