HTTP基础语法

　　div标签是块级结构布局元素，因此结合css盒模型讲解。

　　HTTP基本结构

　　基本结构标签

　　HTTP文件包括头部信息和网页内容，body中的内容在网页中显示。

　　< html>

　　< head>

　　< title>标题< /title>

　　< /head>

　　< body>

　　网页主体内容

　　< /body>

　　< /html>

　　标签、元素、属性

　　标签分为双标签和单标签。

　　< html>...< /html>

　　< hr/>

　　元素是指从开始到结束标签的全部内容，例如，html标签加上内部代码，即为一个HTML元素。

　　属性用来修饰标签。

　　< 标签名 属性1="值1" 属性2="值2">内容< /标签名>

　　注释

　　注释格式

　　< !-- 注释 -->

　　文档声明

　　声明必须放在HTML稳定第一行，但是并不是HTML标签。

　　< !DOCTYPE html>

　　网页编码

　　编码在head标签内部设置。

　　< meta charset="UTF-8">

　　< meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

　　文字和段落标签

　　标题标签h2–h7

　　< h2>一级标题< /h2>

　　段落标签p

　　align属性:值有left、right、center、justify。p标签中空格是不起作用的，需要使用代码nbsp

　　< p>段落< /p>

　　< p align="left">段落< /p>

　　换行标签br和水平线标签hr

　　< br/>

　　< hr/>

　　< hr width="10"/>

　　< hr color="blue"/>

　　< hr align="center"/>

　　< hr noshade=""/>

　　预标签pre很少用。

　　修饰标签和特殊符号

　　文字修饰标签

　　i和em：斜体

　　b和strong：加粗

　　sub：下标

　　sup：上标

　　ins：下划线

　　del：删除线

　　特殊符号

　　空格

　　< 小于/左尖括号 　　> 大于/右尖括号

　　® 已注册R

　　© 版权C

　　™ 商标TM

　　示例

　　< p align="center">关于我们 | 招聘信息 | 联系我们 | 意见反馈< /p>

　　< hr/>

　　< p align="center">Copyright©2016 awecoder.com All Rights Reserved< /p>

　　< p>公式：x2+x=0 解：x< sub>1< /sub>=0;x< sub>2< /sub>=-1< /p>

　　列表标签

　　无序列表ul

　　属性type可为disc(原点)、square(方块)、circle(空心圆)。

　　< ul type="circle">

　　< li>列表项< /li>

　　< li>列表项< /li>

　　< /ul>

　　有序列表ol

　　属性type可为1、a、A、i、I。

　　< ol type="A">

　　< li>列表项< /li>

　　< li>列表项< /li>

　　< /ol>

　　定义列表

　　dt和dd在dl标签内，dt和dd同级。

　　< dl>

　　< dt>配送方式< /dt>

　　< dd>上门自提< /dd>

　　< dd>海外配送< /dd>

　　< dt>支付方式< /dt>

　　< dd>货到付款< /dd>

　　< dd>在线支付< /dd>

　　< /dl>

　　图像标签img

　　src属性=图片URL(相对路径是图片相对于当前html文件的路径)

　　alt属性=图像的代替文字，图像无法显示时展示。

　　height属性和width属性，可用像素数值和百分比表示。

　　也适用align对齐属性。

　　< img src="Snipaste.png" alt="截图" height="50%" width="50%"/>

　　< img src="Snipaste.png" alt="截图" height="50px" width="50px"/>

　　超链接a和定义锚点

　　超链接标签a

　　href属性为链接地址，标签内容可以是文字或图片等。

　　target属性–链接的目标窗口，_self当前窗口打开，_blank新窗口打开，_top/_parent

　　title属性–链接提示文字。

　　name属性–链接命名。

　　< a href="http://www.baidu.com" target="_blank" title="百度搜索">百度< /a>

　　空连接--点击没有反应

　　< a href="#" title="百度">百度< /a>

　　空的链接--点击刷新页面

　　< a href="">刷新页面< /a>

　　id属性–书签标记

　　结合name属性定义锚点

　　< a href="#锚点名">同一个页面< /a>

　　< a href="网页名称#锚点名">不同页面< /a>

　　< a name="锚点名">内容< /a>

　　示例

　　< a name="top">目录< /a>< br/>

　　< a href="#fruit">水果< /a>< br/>

　　< a href="#vegetable">蔬菜< /a>< br/>

　　< a href="#sport">运动< /a>

　　< !--设置水果标题-->

　　< h4>水果< /h4>

　　< a name="fruit">< /a>

　　< ul>

　　< li>香蕉< /li>

　　< li>苹果< /li>

　　< /ul>

　　< a href="#top">返回顶部< /a>

　　< !--设置蔬菜标题-->

　　< h4>蔬菜< /h4>

　　< a name="vegetable"/>

　　< ul>

　　< li>西红柿< /li>

　　< li>黄瓜< /li>

　　< /ul>

　　< a href="#top">返回顶部< /a>

　　链接扩展功能

　　邮箱

　　< a href="mailto:xxx@qq.com" >xxx@qq.com< /a>

　　下载文件

　　< a href="下载地址">文件下载< /a>