目录
一、HTML介绍
HTML语言简介
HTML 的全名是“超文本标记语言”(HyperText Markup Language),上个世纪90年代由物理学家李爵士(Tim Berners-Lee)发明。它的最大特点就是支持超链接,点击链接就可以跳转到其他网页,从而构成了整个互联网
网页及HTML概述
HTML 是网页使用的语言,定义了网页的结构和内容。浏览器访问网站,其实就是从服务器下载 HTML 代码,然后渲染出网页。
浏览器的网页开发,涉及三种技术:HTML、CSS 和 JavaScript
- HTML 语言定义网页的结构和内容
- CSS 样式表定义网页的样式
- JavaScript 语言定义网页与用户的互动行为
(HTML 语言是网页开发的基础,CSS 和 JavaScript 都是基于 HTML 才能生效,即使没有这两者,HTML 本身也能使用)
其实网页的 HTML 代码就是由许许多多不同的标签(tag)构成
二、HTML起手式看不懂?
在最初学习HTML时,大多数人都不了解起手式的具体含义,虽然这并不影响我们写HTML,但还是大致介绍一下:(以下图为例)
<!DOCTYPE html> <!--文档类型(告诉浏览器:我要开始写html啦)-->
<html lang="en"> <!--html标签;lang为语言(这里en代表英语,可改为zh-CN中文)-->
<head> <!--头部标签;主要是用于描述该文档的各种属性和信息-->
<meta charset="UTF-8"> <!--文件的字符编码(一般情况下无需改变,此格式支持更多语言)-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--告诉IE使用最新内核-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--禁用页面缩放-->
<title>Document</title> <!--此文档的标题为Document-->
</head>
<body> <!--编辑文档的主要内容-->
...
</body>
</html>
<meta>标签:
meta标签是html语言head区的一个辅助性标签,它位于html文档头部的<head>标记和<title>标记之间,它提供用户不可见的信息。
meta标签通常用来为搜索引擎robots定义页面主题,或者是定义用户浏览器上的cookie;它可以用于鉴别作者,设定页面格式,标注内容提要和关键字;还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级,等等
三、HTML中的基础标签
学习html其实就是学习html的标签,大家都知道html的标签有很多,想要记住全部的标签及用法是非常不现实的,而且许多标签并不常用,所以接下来介绍几类常用的标签:
一、常用的章节标签
章节标签主要是用来表示网页的层次结构,但这不是严格的划分标准,可以根据情况灵活使用;一下是一些较为常用的章节标签:
1、标题:h1~h6
<h1>...<h1>是最高级别的标题,<h6>...<h6>是最低级别的标题
标题的使用要点:
- 浏览器默认一级标签字号最大,依次递减。
- 一级标题下可有多个二级标题,以此类推。
- 标题不能越级,一级标题下,直接三级标题,以此类推。
- 一般只用到前三级标签
2、章节:<section> ... </section>
<section>标签表示一个含有主体的独立部分,通常用在文档里面表示一个章节,比如<artical>标签里可以包含多个<section>标签,<section>总是多个一起使用
3、段落:<p> ... </p>
代表文章的一个段落,任何想以段落显示的内容,比如图片或者表单,都可以放进 p
标签中
4、文章:<artical>...</artical>
表示页面里面一段完整的内容,通常表示一篇文章或者帖子;一张网页里面可以包含一个或篇文章
5、头部:<header> ... </header>
头部标签也叫作页眉标签,<header>标签可以适用在多个场景,既可以表示整个网页的头部,也可以表示一个文章或一个区块的头部
6、脚部:<footer> ... </footer>
<footer>标签表示网页、文章或章节的尾部,如果用于整张网页的尾部,就称为页尾;一般包含版权信息或其他相关信息。
7、主要内容:<main> ... </main>
<main>标签一般表示页面的主题内容,一般一个页面内只有一个<main>标签
注意:<main>标签是顶层标签,不能放置在<artical>,<header>,<footer>,<aside>等标签之中;另外功能性区块不适合放入<main>标签中,除非当前页面就是搜索页面
8、旁支内容:<aside> ... </aside>
用来放置与网页或文章主要内容相关的间接部分
9、划分:<div> ... </div>
<div>是一个通用标签,表示一个区块(division);它没有语义,如果网页需要一个块级元素容器,就可以使用此标签,<div>标签经常被用来划分区域
以下是一个小的综合实例
二、常用的内容标签
内容标签用于表示网页的内容,及规划;像章节标签一样没有严格的规定
1、<ol>+<li>(有序列表)
<ol>
<li>吃饭</li> // 1. 吃饭
<li>睡觉</li> // 2. 睡觉
<li>打豆豆</li> // 3. 打豆豆
</ol>
2、<ul>+<li>(无序列表)
<ul>
<li>吃饭</li> // . 吃饭
<li>睡觉</li> // . 睡觉
<li>打豆豆</li> // . 打豆豆
</ul>
3、<dl>+<dt>+<dd>(dl常用来定义词汇表)
- <dl>标签是一个块级元素,表示一组术语的列表
- <dt>标签来定义术语名
- <dd>标签来定义术语解释
-
<dl> <dt>绝对命令</dt> <!--术语--> <dd>从根目录开始的</dd> <!--相对应的解释--> <dt>相对命令</dt> <!--术语--> <dd>相对于当前目录的</dd> <!--相对应的解释--> </dl>
4、<pre>
<pre>标签是一个块级元素,表示保留原本格式。(一般html默认将许多空白理解为一个空格,若放在<pre>标签中,则会保留空格,回车,tap等)
<pre>hello
world</pre> <!--换行和连续空格会被保留下来,浏览器按照原样输出-->
5、<code>
<code>标签是一个行内标签,表示标签内容是浏览器代码,浏览器会默认以等宽字体输出
6、<hr>
<hr>标签用来在一篇文章中分隔两个不同的主题,浏览器会显示出一条水平线
7、<br>
<br>标签让网页产生一个换行效果;该标签单独使用,没有闭合标签
8、<a>
<a>标签用于添加超链接
访问网站<a herf="http://qq.com">QQ</a> <!--点击QQ跳转到qq网页-->
9、<em>
<em>标签是一个行内元素,表示强调(emphasis),浏览器默认会用斜体显示
10、<strong>
<strong>标签是一个行内元素,表示其中内容本身非常重要,浏览器默认会加粗显示
11、<blockquote>
<blockquote>是一个块级标签,表示引用他人的话,浏览器会在样式上与正常文本区别显示。<blockquote>有一个cite属性,它的值是一个网址,用来表明引言来源
<blockquote cite="https://quote.example.com">
<p>天才就是1%的天赋和99%的汗水</p>
</blockquote>
四、全局属性
全局属性是所有元素都可以使用的属性,也就是说,你可以把下面的属性加在任意一个网页元素上
1、类属性class
类属性用来对元素网页进行分类,如果不同的元素,class相同,就表示它们是一类的
<div class="middle border"> ... </div> <!--类名有空格时加双引号-->
以下种选择方式均可:
<style>
.middle{background:blue;color:white;} <!--div背景将会是蓝色,字的颜色是白色-->
.border{border:10px;color:red;} <!--div会产生10px的红色边框-->
</style>
2、contenteditable
html网页内容默认是用户不能更改的,contenteditable属性允许用户修改内容
<div class="middle border" contenteditable> ... </div> <!--此div可在浏览器上由用户编辑-->
3、hidden
hidden是一个布尔属性,表示当前页面元素不在与页面相关,因此浏览器不会渲染这个元素,所以不会在网页中看到它
<div class="middle border" hidden> ... </div> <!--此div部分将会在浏览器页面被隐藏-->
4、id
id 用来表示全局唯一的标签,但是全局唯一性没有保障,就算有两个重复的 id,HTML 也不会提示我写错了
...
#mydiv{background:yellow;color:pink;} <!--mydiv的背景色是黄色,字体颜色是粉色-->
...
<div id=mydiv> ... </div> <!--将div的id命名为mydiv-->
...
5、style
style属性用来指定当前元素的css样式
<header id=xxx style="border:10px solid green"> <!--header会有10px粗的绿色边框-->
...
</header>
6、tabindex
这里就有一个问题,按下tab键时,浏览器是如何知道跳到哪个元素的?html提供了tabindex属性解决这个问题,它的名字的含义就是tab的顺序。tabindex属性的值是一个整数:
- 当数值为整数时:顺序遍历访问
- 当数值为0时:最后一个访问
- 当数值为-1时:无法访问
<footer tabindex=0> <!--tab将会最后一个访问footer-->
...
</footer>
7、title
title属性用来为元素添加附加说明。大多浏览器中,鼠标悬浮在元素上面时,会将title属性值作为浮动提示显示出来
...
<style>
#xxx{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis; <!--文字溢出不显示,省略号表示-->
}
</style>
...
<header id=xxx title="完整的内容"> ... </header> <!--鼠标悬浮会显示出完整内容-->
...
五 、HTML的重点标签
接下来是一些html中的重难点标签,相较于上述标签来说,下列的每个标签功能都不单一,并且用法也不那么简单,但不要死记硬背,应当在实践中掌握
一、a标签
1、作用:
- 跳转至外部页面
- 跳转至内部锚点
- 跳转至邮箱或者电话
2、属性:
(1)href(hyper reference) 超级链接
href的取值:
① 网址:
<a href="https://google.com">点击打开谷歌</a>
② 路径
<a href="/index.html">点击打开当前路径文件</a>
- /a/b/c/以及a/b/c
- index.html以及/index.html
③ 伪协议
<a href="javascript:;">点击之后没有动作的伪协议</a>
<a href="mailto:596417202@qq.com">发邮件</a>
<a href="tel:13112345678">打电话给我</a>
- javascript:代码
- mailto:邮箱
- tel:手机号
④ id
- href=#xxx
(2)target 指定在哪个窗口打开链接
<a href="//baidu.com" target="_blank">在新窗口(空白页)打开</a>
<a href="//baidu.com" target="_top">在整个窗口中打开</a>
<a href="//baidu.com" target="_parent">在父框架中打开</a>
<a href="//baidu.com" target="_self">(默认)在当前窗口打开</a>
<a href="//baidu.com" target="_xxx">如果之前已打开一个新窗口,则在已打开的窗口重新打开此链接,否则在新窗口(空白页)打开</a>
target的取值:
① _blank
在新建的空白窗口打开
② _top
在顶级窗口打开
③ _parent
在当前链接iframe的上一层打开
④ _self
默认在本身窗口打开
⑤ _xxx
若有名为xxx的窗口,就在xxx打开
若没有,则新建xxx窗口并打开
二、img标签
1、作用:发出get请求显示一张图片
2、属性
<img src="./img/timg.jpg" id="touxing" alt="这是一张图片" height=200px>
(1)alt
当图片加载时可用文本代替
(2)height/width
控制图片的宽与高
(一般只定义一个值,另一值会根据比例自定义;若同时定义两值,可能会导致图片变形)
(3)src
图片的地址
3、事件
onload/onerror是JS的响应事件
<script>
xxx.onload=function(){
console.log("图片加载成功");
}
xxx.onload=function(){
console.log("图片加载失败");
xxx.src='/404.png' <!--可放置图片加载失败的替换照片-->
}
</script>
注意:一开始声明此段代码,页面中的所有图片宽度将与页面相匹配
(一般适用于移动端页面的设计)
img{ max-width:100% }
三、table标签
1、作用:<table>标签在HTML 中定义了表格布局,表格由单元格与其内部的文本构成。
2、属性
(1)width/height 表格宽与高的设置
(2)border 表格边框的设置
- table-layout 格子宽度
- border-spacing 表格间隙调整
- border-collapse:表格合并
3、元素构成:
(1)<thead>、<tbody>和<tfoot>
<thead><tbody><tfoot> 把表格分成多个逻辑区域,可以用 CSS 更好的控制
- <thead>元素用于对 HTML 表格中的表头内容进行分组
- <tbody>元素用于对 HTML 表格中的主体内容进行分组
- <tfoot>元素用于组合 HTML 表格中的页脚(脚注或表注)内容
(2)<tr>、<th>和<td>
- <tr> 元素定义表格行
- <th> 元素定义表头表头单元,包含头部信息元素内部的文本通常会呈现为居中的粗体文本
- <td> 元素定义表格单元标准单元 ,包含数据元素中的文本一般显示为正常字体且左对齐
用法如下:
四、form标签
1、作用:用于为用户输入创建 HTML 表单,可以向服务器传输数据;能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等
<form action="#" method="post" autocomplete="on" target="_blank">...</form>
2、属性:
- action:刷新页面地址
- method:请求方式 POST/GET
- autocomplete:是否自动填充 on/off
- target:请求地址打开窗口(与a标签用法相似)
五、input标签
1、作用:用于搜集用户信息
2、属性:根据不同的 type 属性值,输入字段拥有很多种形式输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等
3、 input标签事件:
- 所有input所有onchange事件(当用户输入改变时)
- onfocus事件(当鼠标几种在上面时)
- onblur事件(当鼠标移开时)
以下是form和input的综合应用:
<form action="#" method="post" autocomplete="on">
文本框: <input type="text"/>
<hr >
输入密码: <input type="password"/>
<hr >
颜色: <input type="color"/>
<hr >
单选框:<input type="radio" name="gender"/>男 <input type="radio" name="gender"/>女
<hr >
多选框:<input type="checkbox" name="hobby" />打篮球 <input type="checkbox" name="hobby" />听音乐
<input type="checkbox" name="hobby" />画画
<hr >
上传文件: <input type="file" multiple/>
<input type="hidden"/>
<hr >
多行文本: <textarea rows="6" style="resize: none;" cols=""></textarea>
<hr >
地区选择:
<select name="">
<optgroup label="地区">
<option selected="" value="">--</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="">深圳</option>
</optgroup>
</select>
<hr>
<input type="submit" value="提交"/>
<hr>
<button type="submit">注册</button>
<!-- input 和 button 区别
<input type="submit" value="提交"/> 只能有文本
<button type="submit">注册</button> 可以有任何东西 -->
</form>
输出结果显示如下:
注意:一般不监听input的click事件;form里的input要有name;form里要放一个type=submit才能触发submit事件
(部分引用于网络,自己整理)