html总结
基本结构
1.简单的基本结构
<html>
<head>
<title>标题</title>
</head>
<body>
网页主体内容
</body>
</html>
head不打印在网页上面，只有body里面的文字内容打印在网页上面<hr/>是分割线
添加背景元素的话需要添加在body开始标签的后面
比如<body bgcolor=“red”>
语法：<标签名 属性名1=“属性值” 属性名2=“属性值>……</标签名>
文档类型声明
<!DOCTYPE html>声明必须放在html文档的第一行
网页编码设置
在<head></head>标签之间添加<meta http-equiv=“Content-Type” content=“text/html;charset=utf-8”>
utf-8可以换成你想要的编码
文字和段落标签
文字斜体：<i></i>,<em></em>
文字加粗：<strong></strong>,<b></b>
下标：<sub></sub>
上标:<sup></sup>
⚠：<i></i>只是斜体而已，<em></em>更多表示强调！！！！！！
⚠：<b></b>只是斜体，<strong></strong>表示强调
特殊符号：那比如说你想在网页上打印出来<p></p>的这种属于标签的内容
你是无法打印出来的因为这时候它们会自动被读取
所以你需要用特殊的符号来代替里面的一些符号
比如：< < 小于或显示标记> > 大于或显示标记® 已注册© 版权&trade 商标  空格
标题标签：<h1></h1>~<h6></h6>
段落标签：<p></p>:代表同一个段落文字
align对齐属性：
left 左对齐内容
right 右对齐内容
center 居中对齐
justify 对行进行伸展
属性的例子：<p align=“left”></p>
表示这个段落左对齐了
换行标签<br/>
<pre></pre>:不需要输入空格代码和<br/> 保留编辑器里的文本格式
所以多用于书写代码
列表标签
列表分为有序列表，无序列表，和定义列表
1.有序列表是<ul></ul>中间以<li></li>来区分每一项
type属性值
- 1 数字1，2.....
- a 小写字母
- A 大写字母
- i 小写罗马数字
- I 大写罗马数字
2.无序列表是<ol></ol>中间也是以<li></li>来区分每一项
无序列表的type属性
- disc 圆点
- square 正方形
- circle 圆形
3.定义列表<dl></dl>中间以<dt></dt>来定义列表项，<dd></dd>来列表项描述
- <dd></<dd>和<dt></dt>他们是平级，所以不可以互相包含
- <dt>可以有多个<dd>
图像标签：
语法：<img src=“” alt=“”…../>
img属性
- src url 显示图像url（分为相对路径和绝对路径）
- alt 文字 图像代替文本
- height 数值和百分比 图像的高
- width 数值和百分比 图像的宽
- alt：当用户无法查看图像，alt属性可以代替图像显示在浏览器中的内容
锚链接
同一个页面：
由一个链接跳转到另外一个
语法：<a href= “”>内容</a>
属性：
- href 链接地址,可以链接网站内部或者外部链接
- target 链接的目标窗口
- title 链接提示文字
- name 链接命名
定义锚：
<a href=“#锚名1>目录1</a>
<a href=“#锚名2>目录2</a>从这两个开始跳转
<a href=“….” name =“锚名1”>内容</a>
xxxxx
xxxxxxxx
<a href=“….” name =“锚名2”>内容</a>
xxxxx
xxxxxxxx锚名的位置定义了锚开始的位置
总结：
1.定义锚的位置和锚名
2.设置寻找锚的链接
不同网页：
定义锚：
网页1:<a herf=“网页名称＃锚名>……</a>从网页1跳转到网页2
网页2:<a herf =“….” name=“锚名“>……</a>被跳转的那个页面
电子邮件链接：<a herf=“mailto;邮件地址“>……</a>
在本网站的内部跳转：站内链接
站内和站外链接：
e.g.
站内链接：
假设从网页1跳转到网页2
网页1:
<a herf =“html12.html”><img src =“img/html/jpg” alt =“html基础课程“ width=“50px” height=“80px”/></a>
网页2:
地址在html12.html外部网站链接：
（比如友情链接）（一般使用绝对路径）<a herf=“http://………..>……</a>
空链接：<a href =“#”>……</a>
不会发生任何跳转
但是会保留链接的特点
target属性：
默认情况下打开一个新的页面是在当前页面打开我们想要的
target拥有的属性：_self,_blank,_top,_parent
_self(当前窗口打开）
_blank(新页面打开）
html表格
比如购物单就是用表格创建的
表格主要的标签：
`<table>表格
<tr>行
<td>单元格`
基本语法与结构
<table>
<tr>
<td>…….</td>
…………………
</tr>
<tr>
<td>………</td>
………………….
…………………..
</tr>
</table>
e.g.创建两行三列标签
<table border=“1”>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td><／td>
</tr>
</table>表格的操作：
- 带表头的表格：<th></th>:表格头，内容居中，加粗显示
- <caption>……</caption>：表格标题，居中显示，放在table下面，每一个table只有一个caption
表格结构标签：
表格划分三部分：表头，主体，脚注
－thead：表格的头（放表格的表头）
－tbody：表格的主体（放数据本体）
－tfoot：表格的脚（放表格的脚注）
e.g.
<table>
<caption>….</caption>
<thead>
<tr>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>主体</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>脚注</td>
</tr>
</tfoot>
</table>这三个标签不会影响布局，主要功能是加载
不管body还是head还是foot改变书写顺序，thead总是在表格最上方
<table>表格属性：
Width pixels,% 规定表格的宽
align Left,center,right 表格对齐方式
border pixels 表格边框宽度
Bgcolor rgb(x,x,x),Colorname 表格背景颜色
Cellpadding Pixels,% 单元边沿与其内容之间的空白
cellspacing Pixels,% 单元格之间的空白
frame 属性值 规定外侧边框的哪一个部分是可见的
rules 属性值 规定内侧边框哪一个部分是可见的Frame：
void 不显示外侧边框
above 显示上部的外侧边框
below 显示下部的外侧边框
hsides 显示上部和下部的外侧边框
vsides 显示左边和右边的外侧边框
lhs 显示左边的外部边框
rhs 显示右边的外部边框
box 在所有四个边上显示外侧边框
border 在所有四个边上显示外侧边框
rules:
none 没有线条
groups 位于行组和列组之间的线条
rows 位于行之间的线条
cols 位于列之间的线条
all 位于行和列之间的线条<tr>标签属性：
align Left,center,right,justify,char 行内容的水平对齐
Valign top,middle,bottom,baseline 行内容的垂直对齐
Bgcolor rgb(x,x,x),#xxx,colorname 行的背景颜色
<td> 和 <th>标签属性
align
valign
bgcolor
width
height
跨列属性colspan：
e.g.
td colspan =“2”
就是说把两列合并成一列，多余的那个删掉
跨行属性rowspan：
把行合并在一起，多余的那个删掉
表格嵌套：
<table>
<tr>
<td>……</td>
<td>
<table>
<tr>
<td>…….</td>
<td>………</td>
</tr>
</table>
</td>
</tr>
</table>必须是完整的表格，并且只能放在td当中
表单
创建表单：
<form>
表单元素
</form>⚠：表单本身不可见
我们网页里看到的是表单元素
表单元素添加：
<input> 表单输入标签
<select> 菜单和列表标签
<option> 菜单和列表项目标签
<textarea> 文字域标签
<optgroup> 菜单和列表项目分组标签<input type=“类型属性” name=“名称”……../>
<input>标签：
type属性值：
text 文字域
password 密码域
file 文件域
checkbox 复选域
radio 单选域
Button 按钮
Submit 提交按钮
Reset 重置按钮
Hidden 隐藏域
image 图像域
单行文本域：
Name 文本域的名称
Maxlength 指用户输入的最长字符长度
Size 指定文本框的宽度
Value 指定文本框的默认值
Placeholder 规定用户填写输入字段的提示
哪个里面放input哪个是默认选项
name 确认哪一组数据是同一组图像域：
<input type=“image” name=“…..” src=“imageurl”/>
隐藏域：
<input type=“hidden” name=“….” value=“……”/>
用户看不到
value：里是传给服务器的值下拉菜单和列表标签：
例如：城市的选择
<select> and <option>
语法：
<select>
<option value=“….”>选项</option>
<option value=“….”>选项</option>
……
</select><select>标签属性：
name 设置下拉菜单和列表的名称
multiple 设置可选择多个项目
size 设置列表中可见选项的数目（相当于一次可以看到几个）
<option>标签属性
selected 设置选项初始选中状态（看到的第一个就是他）
value 定义送往服务器的选项值分组下拉菜单和列表标签：
<select name=“”>
<optgroup label=“组1“>
<option value=“….”>选项</option>
<option value=“….”>选项</option>
…..
</optgroup>
<optgroup label =“组2”>
<option value=“…..”>选项</option>
<option value =“…..”>选项</option>
…..
</optgoup>
…..
</select>多行文本域<textarea>:
<textarea name=“….” rows=“….” col=“,,” …..>
</textarea>(就是比较大，还有滚动条）
在textarea中输入的内容，就会自动显示在文本域内
<textarea>的属性：
name 设置文本区的名称
placeholder 描述文本区域内预期值的简短提示
rows 设置文本区内的可见行数
cols 设置文本区内可见宽度`表单属性：
语法：
<form action=“” method=“” name=“”…..>
表单元素
</form><form>标签：
- action ，URL 提交表格时向何处发送表单数据
- method get,post 设置表单以何种方式发送到指定页面
- name form_name 表单的名称
- target _blank,_self,_parent,_top 在何处打开action URL
- enctype application/plain….. 在发送表单数据之前如何对其进行编码
post和get的区别：
GET：使用url传递参数
对所有信息的数量也有限
一般用于信息的获取
POST：表单数据作为对于http请求体的一部分
对所发送信息的数量无限制
一般用于修改服务器上的资源
<div>和<span>
<div>是一个容器标记，可以包含段落，表格，图片等各种html元素
<span>没有任何意义，为了应用样式
html标签
块级标签：类似div，占据一行，换行
行内标签：类似span，在一行不换行
标签嵌套：
块级元素（占据一行，换行）：
`<div>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>
<h1>~<h6>,<p>,<form>,<hr>…..`
行内标签（在一行，不换行）：
`<b>,<em>,<img>,<input>,<a>,<sup>,<sub>,<textarea>,<span>`块级元素可以包含行内元素和某些块级元素
div基本上可以包含全部块级元素
行内元素不能包含块级元素，只能包含行内
特殊块级元素只能包含行内元素，不能包含块级元素：
如：h1~h6,p,dt
块级元素和块级元素并列是对的
行内元素和行内元素并列是对的
e.g.
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>html案例</title>
</head>
<body>
<div>
<div><img src=“img/logo.jpg”/></div>
<div>
<ul>
<li><a herf=“http://www.immoc.com”>HTML5</li>
<li><a herf=“http://www.immoc.com”>JAVASCRIPT</li>
<li><a herf=“http://www.immoc.com”>CSS</li>
<li><a herf=“http://www.immoc.com”>PHP</li>
<li><a herf=“http://www.immoc.com”>IOS</li>
<li><a herf=“http://www.immoc.com”>ANDROID</li>
<li><a herf=“http://www.immoc.com”>PHOTOSHOP</li>
</div>
<div><imp src=“img/banner.jpg”/></div>
</div>
<div><h1>如何成为优秀的工程师<h1></div>
<div><h6>2天前  308浏览nbsp; 308;1.评论<h6></div>
<p>
复制内容
</p>
<ol>
<li></li>
<li></li>
</ol>
<h6>作者<h6>
<div>
<dl>
<dt>HTML标记语言<dt>
<dd><img src=“img”/></dd>
<dd></dd>
</dl>
<dl>
<dt>CSS层叠样式表</dt>
<dd><img src=“img/css3.jpg”/></dd>
<dd></dd>
</dl>
<dl>
<dt>什么是javascript<dt>
<dd><img src=“img/js.jpg”/></dd>]
<dd></dd>
</dl>
</div>
<div><p>只学有用的</p></div>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。