一、认识WEB
- 网页:主要是由
文字
、图像
和超链接
等元素构成,当然除了这些元素,网页中还可以包括音频、视频以及Flash等。 - 浏览器:是网页显示、运行的平台。
- 浏览器内核: (排版引擎、解释引擎、渲染引擎)
浏览器 内核 备注 IE Trident 目前 IE 已下架 firefox Gecko 可惜这几年已经没落了,打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 Safari webkit 现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了) chrome Chromium/Blink 在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发 Opera blink 现在跟随chrome用blink内核。
二:Web标准
结构
:标准用于对网页元素进行整理和分类(HTML)表现
:标准用于设置网页元素的版式、颜色、大小等外观属性(CSS)行为
:标准用于对网页模型的定义及交互的编写(JavaScript)
优点
- 易于维护:只需更改CSS文件,就可以改变整站的样式
- 页面响应快:HTML文档体积变小,响应时间短
- 可访问性:语义化的HTML(结构和表现相分离的HTML)编写的网页文件,更容易被屏幕阅读器识别
- 设备兼容性:不同的样式表可以让网页在不同的设备上呈现不同的样式
- 搜索引擎:语义化的HTML能更容易被搜索引擎解析,提升排名
三、HTML初识
1. 名称解释
HTML
(Hyper Text Markup Language): 超文本标记语言
什么是超文本?
- 因为它可以加入图片、声音、动画、多媒体等内容(超越文本限制 )
- 不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本)。
2. 基本结构标签
标签名 | 定义 | 说明 |
---|---|---|
<html></html> | HTML标签 | 页面中的最大的标签,我们称为根标签 |
<head><head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
<title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> | 文档的主体 | 元素包含文档的所有内容,页面内容基本都是放到body里面的 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
3. 文档类型
<!DOCTYPE html>
文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html>
4. 页面语言lang
用来定义当前文档显示的语言
<html lang="en">
en
: 定义语言为英语zh-CN
: 定义语言为中文
lang的作用
- 根据lang属性来设定不同语言的css样式,或者字体
- 告诉搜索引擎做精确的识别
- 让语法检查程序做语言识别
- 帮助翻译工具做识别
- 帮助网页阅读程序做识别
5. 字符集
在<head>
标签内,可以通过<meta>
标签的charset
属性来规定 HTML 文档应该使用哪种字符编码。
<meta charset="utf-8" />
utf-8
是目前最常用的字符集编码方式,也被称为万国码,基本包含了全世界所有国家需要用到的字符- 其他字符集编码还有
GB2312
、BIG5
、GBK
6. HTML标签的语义化
- 方便代码的阅读和维护,样式丢失的时候能让页面呈现清晰的结构。
- 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
- 方便其他设备解析,如盲人阅读器根据语义渲染网页
7. 注释
- 注释以
<!--
开始,以-->
结束 - 规范:注释内容前后各一个空格字符,注释位于要注释代码的上面,单独占一行
<!-- 这是注释 -->
四、HTML标签
1. 标题标签
<h1> 一级标题</h1>
<h2> 二级标题</h2>
<h3> 三级标题</h3>
<h4> 四级标题</h4>
<h5> 五级标题</h5>
<h6> 六级标题</h6>
- 加了标题的文字会变的加粗,字号也会依次变大
- 一个标题独占一行
2. 段落标签
<p>段落标签</p>
- paragraph 的缩写
- 文本在一个段落这种会根据浏览器窗口的大小进行自动换行
- 段落和段落之间保有空隙
3. 换行标签
<br />
4. 水平线标签
<hr />
5. 盒子标签
div
和 span
标签是没有语义的,是我们网页布局最主要的2个盒子。
<div></div>
: 一行只能放一个大盒子<span></span>
: 一行可以放多个小盒子
6. 文本格式化标签
为文字设置粗体、斜体、下划线等效果
完整标签 | 简写标签 | 语义 |
---|---|---|
<strong></strong> | <b></b> | 加粗 |
<em><em> | <i></i> | 倾斜 |
<del></del> | <s></s> | 删除线 |
<ins></ins> | <u></u> | 下划线 |
7. 图像标签
<img src="./logo.png" alt="logo" title="这是logo" width="20" height="20">
属性 | 属性值 | 描述 |
---|---|---|
src | url | 图像的路径 |
alt | 文本 | 图像不能显示时的替换文本 |
title | 文本 | 鼠标悬停时显示的内容 |
width | 数值(像素) | 设置图像的宽度(建议使用css) |
height | 数值(像素) | 设置图像的高度(建议使用css) |
border | 数值(像素) | 设置图像的边框(建议使用css) |
8. 超链接标签
<a href="https://www.baidu.com" target="_blank">跳转百度</a>
属性 | 属性值 | 描述 |
---|---|---|
href | url | 用于指定链接目标的url地址(必须属性) |
target | _self 、_blank | 弹出方式。 _self 当前页面打开(默认), _blank 新窗口弹出 |
锚点链接
让用户能够快速定位到目标内容
- 目标元素: 在元素上添加
id
属性,<h3 id="two">第2集</h3>
- 点击元素:
a
链接中使用#
加上目标的id名
,<a href="#two"></a>
9. 表格标签
table
:用来定义表格的标签tr
:用来定义表格中的行,必须嵌套在<table></table>
标签中td
:用来定义表格中的单元格,必须嵌套在<tr></tr>
标签中th
:用来定义表格中的表头,表头单元格里面的内容加粗居中
显示caption
:表格标题,通常这个标题会被居中且显示于表格之上。caption
标签必须紧随table
标签之后。这个标签只存在表格里面才有意义。
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>36</td>
</tr>
</table>
9.1. 表格属性
属性名 | 属性值 | 描述 |
---|---|---|
border | 数值(像素) | 设置表格的边框,默认0,无边框 |
cellspacing | 数值(像素) | 设置单元格与单元格边框之间的空白间距 |
cellpadding | 数值(像素) | 设置单元格内容与单元格边框之间的空白间距 |
width | 数值(像素) | 设置表格的宽度 |
height | 数值(像素) | 设置表格的高度 |
align | center ,left ,right | 设置表格在网页中的水平方向对齐方式 |
9.2. 表格结构标签
对于比较复杂的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头、正文和脚注。而这三部分分别用: thead
,tbody
,tfoot
来标注, 这样更好的分清表格结构。
<thead></thead>
用于定义表格的头部。用来放标题之类的东西。<tbody></tbody>
用于定义表格的主体。放数据本体 。<tfoot></tfoot>
放表格的脚注之类。
9.3. 合并单元格
- 跨行合并:rowspan=“合并单元格的个数”
- 跨列合并:colspan=“合并单元格的个数”
10. 列表
容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表。
列表最大的特点就是整齐 、整洁、 有序,跟表格类似,但是它可组合自由度会更高。
10.1. 无序列表 ul
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
<ul></ul>
中只能嵌套<li></li>
,直接在<ul></ul>
标签中输入其他标签或者文字的做法是不被允许的。<li></li>
相当于一个容器,可以容纳所有元素。
10.2. 有序列表 ol
<ol type="A">
<li>列表项1</li>
<li>列表二</li>
<li>列表三</li>
</ol>
<ol>
标签中的type
属性值为排序的序列号,不添加type
属性时,有序列表默认从数字1开始排序。- 常用的
type
属性值分别为是 1,a,A,i,I <ol reversed="reversed">
中的reversed
属性能够让有序列表中的序列倒序排列。<ol start="3">
中的start
属性值为3,有序列表中的第一个序列号将从3开始排列。
10.3. 自定义列表 dl
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
11. 表单标签
一个完整的表单通常由表单域,表单控件(表单元素)和提示信息3部分组成
11.1. form表单域
表单域是一个包含表单元素的区域
<form></from>
标签用于定义表单域,会把它范围内的表单元素信息提交给服务器
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post。 |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单。 |
<form action="url地址" method="提交方式" name="表单域的名称"></form>
11.2. input输入表单元素
<input />
标签为单标签,type
属性设置不同的属性值用来指定不同的控件类型
<input type="属性值" value="默认值">
属性 | 说明 | 作用 |
---|---|---|
type | 表单类型 | 用来指定不同的控件类型 |
value | 表单值 | 表单里面默认显示的文本 |
name | 表单名字 | 页面中的表单很多,name主要作用就是用于区别不同的表单。 |
checked | 默认选中 | 表示那个单选或者复选按钮一开始就被选中了 |
type
属性的属性值及描述如下
属性值 | 描述 |
---|---|
button | 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本) |
checkbox | 定义复选框 |
file | 文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段。该字段中的字符被掩码 |
radio | 定义单选按钮 |
reset | 定义重置按钮。重置按钮会清楚表单中的所有数据。 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。 |
11.3. label标签
用于绑定一个表单元素,当点击 <label>
标签内的文本时,浏览器就会自动将焦点(光标)转到表单元素上,用来增加用户体验
- 第一种用法就是用label标签直接包含input表单, 适合单个表单选择
<label> 用户名: <input type="radio" name="usename" value="请输入用户名"> </label>
- 第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)。
<label for="sex">男</label> <input type="radio" name="sex" id="sex">
11.4. textarea文本域元素
- 用于定义多行文本输入的控件
- cols=“每行中的字符数” rows=“显示的行数”
<textarea>文本内容</textarea>
11.5. select下拉表单元素
<select>
中至少包含一对<option>
- 在
option
中定义selected ="selected"
时,当前项即为默认选中项。
<select>
<option>请选择</option>
<option>选项1</option>
<option selected ="selected">选项2</option>
<option>选项3</option>
...
</select>