HTML5网页编辑基础(简介+基础标签使用)
认识网页
网页的组成
网页主要由文字、图片和按钮等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及 Flash 等。
Web 标准
1：w3c 万维网联盟组织：用来制定 web 标准的机构（组织）
2：web 标准：制作网页要遵循的规范
3：web 标准规范的分类：结构标准；表现标准；行为标准
- 结构标准：html（用来制作网页的）
- 表现标准：css（对网页进行美化的）
- 行为标准：javascript（让网页动起来，具有生命力）
4：web 标准总结：
- 结构标准：相当于人的身体
- 表现标准：相当于人的衣服
- 行为标准：相当于人的动作
浏览器介绍
浏览器是网页运行的平台，常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari 和 Opera 等。
浏览器内核：也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内 ，容以及页面的格式信息。
| IE | Google/Opera | FireFox | Safari |
|---|---|---|---|
| trident | blink | gecko | webkit |
浏览器与服务器
1：浏览器向服务器发送请求（通过http协议）
2：http协议：超文本传输协议，也就是浏览器和服务器端的网页传输数据的约束和规范
3：https：加密处理
4：url协议:平时我们写的网址就是 url 地址
url协议：规定 url 地址的格式
协议规定格式： scheme://host.domain:port/path/filename
scheme：定义因特网服务的类型。常见的就是http
host：定义域主机（http的默认主机是www）
domain：定义因特网域名 比如：w3school.com.cn
:port ：定义端口号（网页默认端口 :80）
path: 网页所在服务器上的路径
filename: 文件名称
认识 html
概念
html (Hyper Text Markup Language ) 中文译为 超文本标记语言，主要是通过 html 标记对网页中的文本，图片，声音等内容进行描述。
HTML 之所以称为超文本标记语言，不仅是因为他通过标记描述网页内容，同时也由于文本中包含了所谓的超级链接，通过超链接可以实现网页的跳转。从而构成了丰富多彩的 Web 页面。
html 结构
基本结构如下：
<! Doctype html>
<html lang="en">
<head>
<title>title>
head>
<body>body>
html>
各部分的含义：
<! Doctype html>
<html>html>
用于告知浏览器其自身是一个HTML 文档，
标记标志着 HTML文档的开始，
标记标志着 HTML 文档的结束，
在他们之间的是文档的头部和主体内容。
<html lang="en">
这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站，对 html
页面本身不会有影响。
<head>head>
主要用来封装其他位于文档头部的标记。一个 HTML 文档只能含有一对
标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
<title>title>
之间的内容将显示在浏即给网页取一个名字，必须位于</code> 标记用于定义HTML页面的标题，<code><title> 标记之内。一个HTML文档只能含有一对标记，将显示在浏览器窗口的标题栏中。
<title>Demotitle>
效果演示
<body>body>
标记用于定义 HTML 文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于标记内，标记中的信息才是最终展示给用户看的。
一个HTML文档只能含有一对 标记，且 标记必须在 标记内，位于 头部标记之后。
标签的分类
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
； - HTML 标签通常是成对出现的，比如
和； - 标签对中的第一个标签是开始标签，第二个标签是结束标签；
- 开始和结束标签也被称为开放标签和闭合标签；
HTML标记—双标记
双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：
<标记名>标记名>
<body>body>
该语法中 <标记名> 表示该标记的作用开始，一般称为 开始标记（start tag）， 表示该标记的作用结束，一般称为 结束标记（end tag）。和开始标记相比，结束标记只是在前面加了一个关闭符/。
HTML标记—单标记
单标记也称空标记，只有开始标签没有结束标签：
<标记名>
<! doctype html>
标签关系
- 嵌套关系：类似父亲和儿子之间的关系
<html>
<head>
<title>title>
head>
<body>body>
html>
- 并列关系：类似与兄弟之间的关系
<head>head>
<body>body>
html 标签介绍
单标签
文本注释标签
文本换行标签
你好<br>我来自中国
效果演示：
你好
我来自中国
横线标签
<hr>
效果演示：
双标签
段落标签
<p>
这是一行文字
p>
<p>
这也是一行文字
p>
效果演示：
标题标签
注意：标题标签只能取到数字 1-6
<h1>这是一个标题1h1>
<h2>这是一个标题2h2>
<h3>这是一个标题3h3>
<h4>这是一个标题4h4>
<h5>这是一个标题5h5>
<h6>这是一个标题6h6>
效果演示：
文本标签
<font>font>
例如：
<font size="10" color="red">
优美的文字
font>
效果演示：
优美的文字
文本格式化标签
文字加粗显示
<strong>该减肥了！strong>
<br>
<b>该减肥了！b>
效果演示：
该减肥了！
该减肥了！
文字斜体
<em>这行字是斜的em>
<i>这行字是斜的i>
效果演示：
这行字是斜的
这行字是斜的
文字下横线
<ins>文字下横线ins>
<u>文字下横线u>
效果演示：
文字下横线
文字下横线
文字删除线
<del>删除线del>
<s>删除线s>
效果演示：
删除线
删除线
文字上标
aaaa<sup>aasup>
效果演示：
aaaaaa
文字下标
bbbb<sub>bbsub>
效果演示：
bbbbbb
图片标签
<img>
| 属性 | 描述 |
|---|---|
| src | 设置显示图片（图片名称或者图片路径） |
| title | 用来设置鼠标放在图片上显示的文字 |
| alt | 当图片无法正常显示的时候，对图片的描述 |
| width | 用来设置图片宽度 |
| height | 用来设置图片的高度 |
<img src="www.baidu.com/imags/1.png" title="HTML" alt="测试图片" width="200" height="200">
效果演示：
相对路径
- 当图片和文件（html）在同一个文件夹中时，src 属性中直接写上图片名称即可。
<img src="1.jpg">
- 当图片在文件（html）的下一级目录中时，src 属性中写上图片所在的文件夹名 +“/” + 图片名称
<img src="1/1.jpg">
- 当图片在文件（html）的上一级目录中时，src 属性中写上 …/图片所在文件夹名 + “/” + 图片名称
<img src="../2/1.jpg">
绝对路径
凡是带有磁盘路径 的都是绝对路径，或者带有网站地址的也是绝对路径。
<img src="D:\a\1.png">
<img src="www.baidu.com/imags/1.png">
超链接
在HTML中创建超链接非常简单，只需用 标记环绕需要被链接的对象即可，其基本语法格式如下：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像a>
| 属性 | 描述 |
|---|---|
href |
用于指定链接目标的 url 地址，当为 href 属性时，它就具有了超链接的功能。 |
target |
用于指定链接页面的打开方式，其取值有 _self 和 _blank 两种，其中 _self 为默认值， _blank 为在新窗口中打开方式。 |
在 标签中使用
<head>
<base target="_blank">
head>
实例：
<a href="http://www.baidu.com" target="_self">当前页面跳转到百度，记得回来继续看哦~a>
<a href="http://www.baidu.com" target="_blank">新页面跳转到百度，记得关掉回来继续看哦~a>
效果演示：
当前页面跳转到百度，记得回来继续看哦~
新页面跳转到百度，记得关掉回来继续看哦~
注意：
（1）暂时没有确定链接目标时，通常将
标记的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
（2）不仅可以创建文本超链接，在网页中各种网页元素，如
图像、表格、音频、视频等都可以添加超链接。
锚链接
通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：
- 使用
链接文本创建链接文本； - 使用相应的
id名标注跳转目标的位置。
<p id="db">你好p>
<a href="#db">返回顶部a>
效果演示：
你好
返回顶部
特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | |
|
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方（上标2） | ² |
| ³ | 立方（上标3） | ³ |
列表
无序列表（ul）
<ul>
<li>li> 列表项
<li>li>
......
ul>
例如：
大家喜欢吃什么水果
<ul>
<li>苹果li>
<li>香蕉li>
<li>葡萄li>
<li>水蜜桃li>
<li>菠萝li>
ul>
效果演示：
大家喜欢吃什么水果
- 苹果
- 香蕉
- 菠萝
属性：type
（默认值）实心圆点：disc
实心方块：square
空心圆圈：circle
实例：
<ul>
<li>苹果li>
<li>香蕉li>
ul>
<ul type="square">
<li>苹果li>
<li>香蕉li>
ul>
<ul type="circle">
<li>苹果li>
<li>香蕉li>
ul>
效果演示：
有序列表（ol）
<ol>
<li>li>
<li>li>
ol>
属性：type
默认(阿拉伯数字)，A（ABCD排序），a（abcd排序），i（小写的罗马数字），I（大写的罗马数字）
属性：start="3"，表示从第几个数开始
把大象放冰箱分几步？
<ol type="" start="3">
<li>打开冰箱门li>
<li>把大象放进去li>
<li>关上冰箱门li>
ol>
<ol type="a" start="3">
<li>打开冰箱门li>
<li>把大象放进去li>
<li>关上冰箱门li>
ol>
<ol type="I" start="3">
<li>打开冰箱门li>
<li>把大象放进去li>
<li>关上冰箱门li>
ol>
<ol type="A" start="3">
<li>打开冰箱门li>
<li>把大象放进去li>
<li>关上冰箱门li>
ol>
<ol type="i" start="3">
<li>打开冰箱门li>
<li>把大象放进去li>
<li>关上冰箱门li>
ol>
效果演示：
自定义列表（dl）
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：
<dl>
<dt>dt> 小标题
<dd>dd> 列表项
<dd>dd>
<dd>dd>
dl>
一般用于网页的底部，例如：
<dl>
<dt>售后服务dt>
<dd>收货地址dd>
<dd>在线支付dd>
<dd>联系客服dd>
dl>
效果演示：
- 售后服务
- 收货地址
- 在线支付
- 联系客服
小补充
页面背景音乐
<embed src="1.mp3" hidden="true">
属性：
src：设置音乐路径
hidden：隐藏播放按钮，true隐藏，false显示
页面滚动效果
<marquee>
...
marquee>
| 属性 | 描述 |
|---|---|
height |
设置高度 |
width |
设置宽度 |
bgcolor |
设置背景颜色 |
behavior |
设定滚动的方式 ： alternate：表示在两端之间来回滚动；scroll：表示由一端滚动到另一端，会重复；slide：表示由一端滚动到另一端，不会重复。 |
direction |
设定滚动的时间：down：向下滚动；left：向左滚动；right：向右滚动；up：向上滚动。 |
loop |
设置滚动次数，-1 表示一直滚下去 |
Meta标签和Link标签
Meta 标签
meta 的属性有两种：name 和 http-equiv。
name 属性
主要用于描述网页，对应于 content（网页内容）。
- 1、用来说明网页使用的字符集，即编码格式
<meta charset="utf-8">
- 2、用以说明生成工具（如Microsoft FrontPage 4.0）等；
<meta name="generator" contect="">
- 3、向搜索引擎说明你的网页的关键词；
<meta name="keywords" contect="">
- 4、告诉搜索引擎你的站点的主要内容；
<meta name="description" contect="">
- 5、告诉搜索引擎你的站点的制作的作者；
<meta name="author" contect="你的姓名">
- 6、有时候会有一些站点内容，不希望被
ROBOTS抓取而公开。为了解决这个问题，ROBOTS开发界提供了两个办法：一个是robots.txt，另一个是The Robots META标签。
<meta name="robots" contect="all|none|index|noindex|follow|nofollow">
robots其中的属性说明如下：
设定为all：文件将被检索，且页面上的链接可以被查询；
设定为none：文件将不被检索，且页面上的链接不可以被查询；
设定为index：文件将被检索；
设定为follow：页面上的链接可以被查询；
设定为noindex：文件将不被检索，但页面上的链接可以被查询；
设定为nofollow：文件将不被检索，页面上的链接可以被查询。
http-equiv 属性
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
- 网页重定向，表示的是
5秒后网页自动跳转到指定网址。
Link 标签
<link rel="icon" href="favicon.ico">
给网页 titile 中放置小图标
<link rel="stylesheet" href="1.css">
引入外部样式表
表格（table）
表格基本结构
在 HTML 语言中，表格至少由 2. 3. 基本语法： 效果演示（由于没给border标签赋值，所以看不到边框）： 表头一般位于表格的第一行或第一列，其文本加粗居中。 效果演示（同上，没给border和width赋值看不出效果）： 效果演示（给border和width赋值后的效果）： 效果演示： 效果演示： 在使用表格进行布局时，可以将表格划分为头部、主体和页脚，具体如下所示： 实例展示： 效果演示： 实例展示： 效果演示： 表单的作用：主要负责数据采集功能。 基本语法： 属性介绍： 容纳表单空间和提示信息的一个区域。 语法： 在上面的语法中， 效果演示： 效果演示： 注意：实现单选效果一定要给控件设置相同的名称 效果演示： 属性： 效果演示（全默认选中）： 效果演示（全默认不选中）： 效果演示： 效果演示： 效果演示： 注意：该按钮不能进行表单提交。通常和 js 代码配合使用。 清空所有表单数据，恢复到初始状态 效果演示： 在 HTML 中，要想制作下拉菜单，就需要使用select控件。 效果演示（显示6条可选择记录，默认选中北京）： 效果演示： 如果需要输入大量的信息，就需要用到 属性： 效果演示（文本框可以输入内容）： 举例： 效果演示： 属性： 属性： 根据内容的结构化（内容语义化），选择合适的标签（代码语义化） 1: 网页结构合理。 1：尽可能少的使用无语义的标签 div 和 span ； 2：在语义不明显时，既可以使用 div 或者 p 时，尽量用 p, 因为 p 在默认情况下有上下间距，对兼容特殊终端有利； 3：不要使用纯样式标签，如：b、font、u 等，改用 css 设置。 4：需要强调的文本，可以包含在 strong 或者 em 标签中。strong 默认样式是加粗（不要用b），em 是斜体（不用 i ）； 总的来说 HTML 很简单，很容易上手。但这只是基础， 标签、
标签和 标签这 3 对标签组成。
1.
...
...
表格行用 标签定义，由单元格构成。多个行结合在一起就构成一个表格，这反映在用于创建表格的 HTML 语法中。表格的每一行都用 标签表示，并用相应的
表格的每一行又有若干表格单元格，用 ... td 是表格数据(Table Data)的英文缩写。 标签定义一个列，嵌套于 标签内。
border 属性是最常用的属性，可用于定义表格的单元格和结构。该属性指定边框的厚度，如果其值设置为零(0)，则不显示边框。
<table>
<tr>
<td>姓名td>
<td>年龄td>
<td>职业td>
<td>籍贯td>
tr>
table>
属性介绍：
border：设置表格边框的厚度width：设置表格宽度height：设置表格高度cellspacing：设置单元格之间的距离cellpadding：文字距离单元格边框的距离bgcolor="red"：设置背景颜色align="center" | "left" | "right"：给 tr 或者 td 设置让文字居中，给 table 设置让表格居中
属性名
含义
常用属性值
border设置边框，默认为0，没有边框
单位为 px 像素值
cellspacing设置单元格与单元格之间的距离
单位为 px 像素值，默认为 2px
cellpadding设置文字与单元格之间的距离
默认 1px
width设置表格的宽度
单位 px
height设置表格的高度
单位 px
align设置表格在网页中的对其方式
left 左
rigth 右
center 居中
bgcolor设置背景颜色
white，red，green等设置表格表头，用法和 td 一样
<table>
<thead>
<tr>
<th>姓名th>
<th>年龄th>
<th>职业th>
<th>籍贯th>
tr>
thead>
<tbody>
<tr>
<td>小明td>
<td>18td>
<td>码农td>
<td>江苏td>
tr>
tbody>
table>
table标签给border和width赋值后：<table border="1" width="50%">
<thead>
<tr>
<th>姓名th>
<th>年龄th>
<th>职业th>
<th>籍贯th>
tr>
thead>
<tbody>
<tr>
<td>小明td>
<td>18td>
<td>码农td>
<td>江苏td>
tr>
tbody>
table>
表格属性设置示例：
<table border="1" width="400" height="200" cellspacing="0" cellpadding="20" bgcolor="red">
<tr>
<th>姓名th>
<th>年龄th>
<th>职业th>
<th>籍贯th>
tr>
<tr>
<td>小明td>
<td>18td>
<td>码农td>
<td>江苏td>
tr>
table>
设置表格标题：
caption 标签必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。<table border="1" cellpadding="0" width="50%">
<caption><h3>人员信息表h3>caption>
<tr>
<th>姓名th>
<th>年龄th>
<th>职业th>
<th>籍贯th>
tr>
<tr>
<td>小明td>
<td>18td>
<td>码农td>
<td>江苏td>
tr>
table>
表格结构
<table>
<thead>thead> 头
<tbody>tbody> 身体
<tfoot>tfoot> 脚
table>
：用于定义表格的头部，必须位于
和导航等头部信息。：用于定义表格的主体，位于
标记之后，一般包含网页中除头部和底部之外的其他内容。：用于定义表格的页脚，位于
标记之后，一般包含网页底部的企业信息等。补充知识：单元格的合并
横向合并
<tr>
<td>td>
<td colspan="2">td>
<td>td>
tr>
<table border="1" cellspacing="0" cellpadding="20" width="50%">
<tr>
<th>姓名th>
<th colspan="2">年龄th>
<th>籍贯th>
tr>
<tr>
<td>小明td>
<td>18td>
<td>码农td>
<td>江苏td>
tr>
table>
纵向合并
<tr>
<td>td>
<td rowspan="2">td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
tr>
<table border="1" cellspacing="0" cellpadding="20">
<tr>
<th>姓名th>
<th>年龄th>
<th>职业th>
<th>籍贯th>
tr>
<tr>
<td>小明td>
<td>18td>
<td rowspan="2">码农td>
<td>江苏td>
tr>
<tr>
<td>小白td>
<td>21td>
<td>北京td>
tr>
table>
表单（form）
表单介绍
对于表单构成中的表单控件、提示信息和表单域，对他们的具体解释如下：
<form name="form_name" action="url" method="get|post">…form>
Name ：定义表单的名称；Action ：用来指定表单处理程序的位置（服务器端脚本处理程序）；Method：定义表单结果从浏览器传送到服务器的方式，默认参数为：get。
get数据提交：① 通过地址栏的方式进行数据提交，将用户输入的信息显出来；② get提交安全性差。
post数据提交：① 数据通过后台进行提交，不会将用户信息显示出来；② 安全性比较好。表单域
<form action="">
…
form>
表单控件
input 控件
<input type=“控件类型”>
标记为单标记，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外， 标记还可以定义很多其他的属性，其常用属性如下表所示。
属性
属性值
描述
typetextpasswordradiocheckboxbuttonsubmitresetimagehiddenfile单行文本输入框
密码输入框
单选按钮
复选框
普通按钮
提交按钮
重置按钮
图像形式的提交按钮
隐藏域
文件域
name由用户自定义
控件的名称
value由用户自定义
input 控件中的默认文本值
size正整数
input 控件在页面中的显示宽度
readonlyreadonly该控件内容为只读（不能编辑修改）
disableddisabled第一次加载页面时禁用该控件（显示为灰色）
文本输入框
用户名：<input type="text" maxlength="6" name="username" value="1234" >
属性:
maxlength：设置文本输入框最多能输多少字符readonly="readonly"：设置文本输入框为只读（不能编辑）disabled="disabled"：控件属于非激活状态name="username"：给输入框设置名称value：设置默认显示的值密码输入框
密码：<input type="password" name="pwd" value="123">
属性用法与文本输入框的用法一样。单选按钮
性别：
<input type="radio" name="xb" checked="checked" value="nan">男
<input type="radio" name="xb" value="nv" >女
多选控件
兴趣爱好：
<input type="checkbox" checked="checked">抽烟
<input type="checkbox" checked="checked">喝酒
<input type="checkbox" checked="checked">烫头
兴趣爱好：
<input type="checkbox">抽烟
<input type="checkbox">喝酒
<input type="checkbox">烫头
属性：
图片上传控件
头像：
<input type="file">
表单提交按钮
<input type="submit" value="登录">
普通按钮
<input type="button" value="普通按钮">
重置按钮
<input type="reset">
图片按钮
<input type="image" src="按钮.jpg">
select 控件
下拉列表
出生地：
省：
<select multiple="multiple" size="6">
<option>山东option>
<option>山西option>
<option>河南option>
<option>河北option>
<option selected="selected">北京option>
select>
属性：
selected="selected"：设置默认选中项multiple="multiple"：可以实现多选效果下拉列表分组显示
市(区)：
<select id="name">
<optgroup label="北京市">
<option>西城区 option>
<option>东城区option>
<option>海淀区option>
<option>昌平区option>
optgroup>
<optgroup label="上海市">
<option>黄浦区 option>
<option>松江区option>
<option>浦东新区option>
<option>静安区option>
optgroup>
select>
textarea 控件
标记。通过 textarea 控件可以轻松地创建多行文本输入框，其基本语法格式如下：<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
textarea>
cols ：相当于宽度rows ：相当于高度自我介绍：
<textarea cols="30" rows="5">
textarea>
组合表单
fieldset 用于表单分组。
语法：<fieldset>
<legend>用户注册legend>
fieldset>
<fieldset>
<legend>用户注册legend>
用户名：<input type="text" maxlength="6" name="username" value="" >
<br>
<br>
密码：<input type="password" name="pwd" value="123">
fieldset>
表单补充
判断网址
<input type="url">
<input type="submit">
判断邮箱
<input type="email">
<input type="submit">
日期控件
<input type="date">
<input type="submit">
时间控件
<input type="time">
<input type="submit">
带有 spinner 控件的数字字段
<input type="number">
<input type="submit">
带有 slider 控件的数字字段
<input type="range">
<input type="submit">
max：最大值min：最小值step：每次加减的值（即步长）定义拾色器
<input type="color">
<input type="submit">
标签语义化
2: 有利于 SEO :和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取。
3: 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）;。
4: 便于团队开发和维护。
总结
html + css + javascript 才能做出真正漂亮的网页。
千里之行，始于足下，接下来的路，加油！你可能感兴趣的:(HTML)