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" />
文字和段落标签
标题标签 h1-h6
<h1 > 一级标题 </h1>
段落标签 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>
- 公式: x
- <sup>
- 2
- </sup>
- +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> <!-- 设置水果标题 --> <h3 > 水果 </h3> <a name="fruit"></a> <ul> <li > 香蕉 </li> <li > 苹果 </li> </ul> <a href="#top"> 返回顶部 </a> <!-- 设置蔬菜标题 --> <h3 > 蔬菜 </h3> <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>
来源: http://www.tuicool.com/articles/R73mM3v