目录
总述
网页是网站中的一个页面，是Internet“展示信息的一种形式”
网站是万维网上相关网页的集合
依据网页位置
- 主页：用户进入网站时看到的第一个页面就是主页。
- 内页：通过主页中的超级链接打开的网页就是内页。
依据表现形式
- 静态页面：使用HTML编写的网页，制作简单，但缺乏灵活性，在浏览网页时浏览者和服务器不发生交互。
- 动态页面：使用ASP、PHP、JSP、ASP.NET等程序生成的网页，可以与浏览者进行交互，也称为交互式页面。
HTML、CSS、JavaScripe脚本是网页设计最核心最基础的技术
- HTML（超文本标记语言）的主要功能是定义网页的基本结构
- CSS（层叠样式表）主要功能是定义网页的外观
- JavaScripe脚本的主要功能是定义网页的行为
HTML基本格式
<!DOCTYPE html>
<html>//文档开始
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<p>你好，我是段落标签</p>
</body>
</html>//文档结束
- <!DOCTYPE>标签位于文档最前面，用于像浏览器说明当前文档使用哪种HTML标准规范
- <html>根标签，用于告知浏览器其自身是一个HTML文档
- <head>用于定义HTML文档的头部信息，也称为头部标签（一个HTML文档只含一对）
- <title>可以显示网页的标题信息
- <body>主体标签，用于定义HTML文档要显示的内容（一个HTML文档只含一对）
常用标签
1.标题标签 <h1>--<h6>
HTML提供了6个等级的网页标题，即<h1>--<h6>（重要性依次递减）。
每个标题独占一行，字体加粗，字号变大。
<h1>标题内容</h1>
<h1 align="对齐方式">标题内容</h1>
align属性可选 left文本左对齐 center文本居中对齐 right文本右对齐（默认left）
2.段落标签 <p>
将内容分段，每段会根据浏览器大小自动换行，段落与段落间有空隙。
<p>内容</p>
<p align="对齐方式">段落文本</p>（默认left）
3.水平线标签 <hr>
用于段落与段落间的分隔。
<hr 属性="属性值"/>
| 属性 | 参数 | 功能 | 单位 | 默认值 |
| size | 设置水平分割线的粗细 | pixel（像素） | 2 | |
| align | left、center、right | 设置水平分割线的对齐方式 | center | |
| width | 设置水平分割线的宽度 | pixel（像素）、% | 100% | |
| color | 设置水平分割线的颜色 | black | ||
| noshade | 设置水平分割线的3D阴影 |
4.换行标签 <br/>
强制换行显示（break），单标签，行间无间隙。
在内容中间直接插入
5.文本格式化标签
设置粗体、斜体、下划线和
删除线等
| 加粗 | <strong></strong> 或 <b></b> |
| 斜体 | <em></em> 或 <i></i> |
| 删除线 | <del></del> 或 <s></s> |
| 下划线 | <ins></ins> 或 <u></u> |
| 上标 | <sup></sup> |
| 下标 | <sub></sub> |
6.<div>和<span>标签（用来布局）
没有语义，是用来装内容的盒子（类似淘宝页面的商品推荐，包含图片文字等）
- <div>内容</div>（一行只能放一个div，单独占一行——大盒子）
——分割、分区（类似淘宝某排行榜所有商品的整体）
- <span>内容</span>（一行可以放多个span——小盒子） 【可用于控制一行中部分内容】
——跨度、跨距（可以在一行横着显示·排行榜一行的单个商品）
div的嵌套
<div class="1">
<div class="2"></div>
</div>
7.图片标签和路径
图片标签 <img>（网页中插入图片）
用于定义HTML页面中的图像，单标签
<img 属性="属性值">
| 属性 | 属性值 | 说明 |
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像不能正常显示时显示文字 |
| title | 文本 | 提示文本，鼠标放在图像上显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border//CSS中设定 | 像素 | 设置图像的边框粗细 |
宽度和高度修改一个可以自动等比缩放
<img src="图片路径" alt="文本" title="文本" width="数字" height="数字" border="数字"/>
图片路径表示
- 若与.html文件在同一文件夹中，则直接写文件名
- 若在.html文件上一级文件中，<img src="../文件名.格式">
- <img src="复制网页图片地址">
- <img src="根目录\下一级\下一级......\文件名.格式">（存在电脑里的图）
图像标签的注意点：
①图像标签可以拥有多个属性，必须写在标签名后；要显示图像，必须要有src。
②属性间不分先后，标签名与属性、属性与属性之间要用空格分开。
8.超链接标签 <a>
用于定义超链接，作用是从一个网页链接到另一个页面
链接的语法格式
| 属性 | 作用 |
| href | 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，就具有超链接能力 |
| target | 同于指定链接页面的打开方式，其中_self为默认值是当前窗口打开页面（默认），_blank为新窗口中打开方式（启动一个新窗口） |
<a href="跳转目标" title="跳转网页名" target=“目标窗口的弹出方式”>文本或图像</a>
链接分类
- 外部链接：引号中写目标页面的网址
<a href="https://www.csdn.net/" target="_blank">CSDN</a>
- 内部链接：内部页面间的相互连接（同一文件夹，同一项目中）
<a href="首页介绍.html" target="_blank">首页介绍</a>
- 空链接：当没有确定链接目标时
<a href=”#”>首页</a>
- 下载链接：如果href里的地址是一个文件或压缩包，则会下载这个文件
<a href="程序设计报告格式.doc">下载文档</a>
- 网页元素链接：在网页中各种网页元素，如文本、图像等都可以添加超链接，点击该元素即可前往目标网页
<a href="http://www.baidu.com"><img src="图片1.png"></a> 此时点击图片即可前往百度
- 锚点链接：不打开新页面，而是直接定位到当前页面的目标位置（类似百度百科中的不同模块）
- 在链接文本的href属性中，设置属性值为“#名字”的形式（名字只能为英文） <a href=”#name”>生平经历</a>
- 找到目标位置标签，里面添加一个id属性=刚才的名字 <h3 id=”name”>生平经历</h3>
9.注释标签
点击想要注释的文字所在行，按Ctrl+/即可直接注释
-
特殊字符
10.<em>标签
表示强调文本，用斜体表示
标签进阶
1.表格标签
1.1语法
<table>
<tr>
<th>单元格内文字</th>
... ...
</tr>
</table>
- <table></table>是用于定义表格的标签（整张表）
- <tr></tr>用于定义表格中的行，必须嵌套于<table></table>中（表中的一行）
- <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>中（一行中的各个单元格）
-
（写一行都要写<tr> <td></td><td></td> ……</tr> ）
-
1.2表头单元格标签
<th>标签表示HTML表格的表头部分，里面的文字会加粗居中表示
语法
<table>
<tr>
<th>表头内容</th>
... ...
</tr>
<tr>
<td>单元格内文字</td>
... ...
</tr>
... ...
</table>
1.3表格属性（一般用CSS）
<table 属性名=”属性值“>
| 属性名 | 属性值 | 描述 |
| align | left、center、right | 规定表格相对周围元素的对齐方式（表格在页面中的位置） |
| border | 1或” “ | 规定表格单元格是否拥有边框，默认为”“（无边框） |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认像素1 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认像素2 |
| width | 像素值或百分比 | 规定表格的宽度 |
1.4表格结构标签
若表格很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分
<thead>标签——表格头部区域
<tbody>标签——表格主体区域
语法：
<table>
<thead>
<tr>
<th>表头内容</th>
... ...
</tr>
</thead>
<tbody>
<tr>
<td>单元格内文字</td>
... ...
</tr>
</tbody>
</table>
1.5合并单元格
- 跨行合并：rowspan=“合并单元格的个数”，最上侧单元格为目标单元格，写合并代码
- 跨列合并：colspan=“合并单元格的个数” ，最左侧单元格为目标单元格，写合并代码
2.列表标签
2.1无序列表（重）
<ul>标签，列表项用<li>
要求：
- 无序列表各个列表项之间是没有顺序级别之分的，是并列的
- <ul></ul>中只能嵌套<li></li>
- <li></li>之间可以容纳任何元素
- 无序列表会带有自己的样式属性，实际使用中常用CSS设置
语法：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
... ...
</ul>
2.2有序列表（会自动加序号）
<ol>标签，列表项用<li>
要求：
- <ol></ol>只能嵌套<li></li>
- <li></li>之间可以容纳任何元素
- 有序列表会带有自己的样式属性，实际使用中常用CSS设置
语法：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
... ...
</ol>
2.3自定义列表
<dl>标签，常与<dt>（定义项目/名字）<dd>（描述每一个项目/名字）一起使用
要求：
- <dl></dl>只能嵌套<dt>和<dd>
- <dt>和<dd>个数没有限制，常为一个<dt>对多个<dd>
- <dt><dd>都是并列的
语法：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
3.表单标签（一般出现在注册页面）
一个完整的表单通常由表单域、表单控件（表单元素）和提示信息3部分组成
3.1表单域 （包含表单元素的区域）
<form>标签，<form>会把他范围内的表单元素信息提交给服务器
<form action="URL地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
| 属性 | 属性值 | 作用 |
| action | URL地址 | 用于指定接收并处理表单数据的服务器程序的URL地址 |
| method | get/post | 用于设计表单数据的提交方式，其取值为get或post（默认get） |
| name | 名称 | 用于指定表单的名称、以区分同一个页面中的多个表单域 |
3.2表单元素
- <input>表单元素（浏览框）
<input/>（单标签），用于收集用户信息，包含一个type属性，根据不同type属性值输入字段拥有更多形式
<input type="属性值" name="名称" size="显示长度"/>
| 属性值 | 描述 |
| button | 可点击按钮（一般用于通过JavaScript启动脚本） |
| checkbox | 复选框（多选按钮） |
| file | 输入字段和浏览字段，供文件上传 |
| hidden | 隐藏的输入字段 |
| image |
图像形式的提交按钮 |
| password | 密码字段，该字段中字符被掩码 |
| radio | 单选按钮 |
| reset | 重置按钮，可以清楚表单中的所有数据 |
| submit | 提交按钮，会把表单数据发送到服务器 |
| text | 单行输入字段，用户可以在其中输入文本，默认宽度为20个字符 |
| 属性 | 属性值 | 描述 |
| name | 用户自定义 | 定义input元素的名称（区别不同的表单元素） |
| value | 用户自定义 | 规定input元素的值（打开框内自动显示的内容） |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符最大长度 |
| readonly | readonly | 设置为只读（仅可与type="text"配合使用） |
要点：
- name和value是每个表单元素都有的属性值，给后台工作人员看
- name是表单元素的名字，要求单选按钮和复选框要有一样的name值
2. <lable>标签（扩大可选中范围）
3. 表单外框
- <fieldset> ... </fieldset>定义围绕表单中元素的边框
- <legend> ... </legend>legend元素为fieldset元素定义标题
<fieldset>
<legend>内容</legend>
<input ...>
</fieldset>
4.<select>下拉表单元素
要求：
- <select>中至少包含一对<option>
在<option>中定义select=”selected”时，默认选择中该项
语法：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
5.textarea文本域元素
当用户输入内容较多时，使用<textarea>标签
cols=“每行中的字符数“，row=”显示的行数“，一般用CSS改变大小
语法：
<textarea row="数字" cols="数字">
文本内容
</textarea>
结构性标签
1.<section>标签
- 用于对网页的内容进行分区、分块，定义文档中的节
- 表示一段专题性的内容，必须会带有标题
- 更强调分块
- 当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div标签
语法：
<section>
<h1></h1>
<p></p>
</section>
2.<artical>标签
- 特殊的<section>标签
- 代表一个独立的、完整的相关内容快，可独立于页面其他内容使用
- 可以嵌套，内层的article对外层的article有隶属关系。
语法：
<article>
<header>
<h1></h1>
<h2></h2>
<p></p>
</header>
<p></p>
</article>
3.nav标签
- 代表页面的一个部分，是一个可以作为页面导航的链接组
- 特殊的<section>标签，更强调独立性
语法：
<nav>
<ulr>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
</nav>
4.aside标签
- 用来装载非正文的内容，被视为页面里面的一个单独部分
- 可以被包含在article标签内作为主要内容的附属信息
- 也可以在article标签外，作为页面或站点全局的附属信息部分
语法：
<article>
<header>
<h1></h1>
<h2></h2>
<p></p>
<aside>附属信息部分</aside>
</header>
</article>
5.header标签
- 定义文档的页眉，通常是一些引导和导航信息
- 也可以写在网页内容里面
- 通常至少包含一个标题标签，还可以包括<hgroup>标签等
语法：
<header>
<h1></h1>
<h2></h2>
</header>
6.footer标签
- 定义section或document的页脚，包含了与页面、文章或是部分内瓤有关的信息
语法：
<footer> </footer>
分组标签
1.figure标签和figcaption标签
- figure标签用于定义独立的流内容，例如图像、图表等，一般指一个单独的单元
- figcaption标签用于为figure标签组添加标题，一个figure标签最多允许放一个figcaption标签，应放在figure标签的第一个或者最后一个子标签的位置
2.hgroup标签
可以将标题或子标题进行分组，通常与标题标签组合使用，一个内容快中的标题可以通过hgroup标签组成一组
3.dialog标签
主要用于人与人之间的对话，还包括dt和dd两个组合标签，dt表示说话者，dd表示说话者说的内容，常常同时使用
语法：
<dialog>
<dt>戒哥</dt>
<dd>今天你吸猫了吗？？？！</dd>
<dt>我</dt>
<dd>吸了啊[理直气壮]！</dd>
<dt>戒哥</dt>
<dd>我对你很失望！！！</dd>
</dialog>