前端学习之 HTML

一.HTML 介绍

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言,它不是一种编程语言。

HTML使用标签来描述网页。不像python编程语言一样，有逻辑什么的，这个标记语言是没有逻辑的.

网页文件的扩展名：.html或.htm

二.HTML文档结构

当创建一个初始的html文件时,会产生如下的内容:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

</body>

</html>

以下对上面结构进行解释:

1.<!DOCTYPE html>声明为HTML5文档。

2.<html>、</html>是文档的开始标记和结束的标记。

是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。

3.<head>、</head>定义了HTML文档的开头部分。其中lang="en"就是说，你整个文档的内容以英文为主为主,如果整个内容与中文为主可改为:lang="zh-CN"。

它们之间的内容不会在浏览器的文档窗口显示。

包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的。

4.<title>、</title>定义了网页标题，在浏览器标题栏显示。

（修改一下title中的内容，然后看一下浏览器，你就会发现title是什么了）

5.<body>、</body>之间的文本是可见的网页主体内容。

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

三.常用标签介绍

标签分类:

双标签(双闭合)

<h1>dfdsfsdf</h1>

单标签(单闭合)

<img>

1.注释标签

#找到一行内容ctrl+/就能注释，注释的内容不会在网页上显示出来，

这个标签不影响网页内容，起到注释的作用。

2.head标签以及head里的标签(网站的配置信息)

定义了HTML文档的开头部分。（在二有详细介绍）

下面这些标签可用在 head 部分：

<title>：定义文档的标题。

以下是head标签内有相关的标签介绍：

3.body标签以及body内的常用标签

<body>、</body>之间的文本是可见的网页主体内容。

<body> 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

(1)h系列(*)**

<hr> #就是单独个一个水平线

h1-----h6

代码例子：

<h1>我的第一个网页</h1>

<h2>我的第一个网页</h2>

<h3>我的第一个网页</h3>

<h4>我的第一个网页</h4>

<h5>我的第一个网页</h5>

<h6>我的第一个网页</h6>

效果图：

(2)b标签加粗

代码例子：

字体没有加粗

<b>字体加粗了</b>

<strong>字体加粗了</strong>

效果图：

(3)u标签下划线;s和del 中划线

<u> 标签可定义下划线文本。

<s> 标签可定义加删除线文本定义。

代码例子：

<!--u标签 下划线-->

<u>字体下面有下划线</u>

<br>

<!--s和del 中划线-->

<s>字体下面有中划线</s>

<br>

<del>字体下面有中划线</del>

效果图：

(4)上标<sup>和下标<sub>

<sup> 标签可定义上标文本。

<sub> 标签可定义下标文本。

代码例子

4<sup>2</sup><sub>3</sub>

效果:

(5)p标签(*)**

<p> 标签定义段落。

段落：是英文paragraph的缩写。

HTML标签是分等级的。HTML将所有的标签分为两种：

文本级标签：p、span、a、b、i、u、em。文本标签里只能放文字、图片、表单元素。

容器级标签：div、h系列、li、dt、dd。容器级标签里可以放任何东西。

请死死记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。

只能放文本/图片/表单元素.

属性：align='属性值'：对齐方式。属性值包括：left、center、right

代码例子：

<p>

<div>

<a href="https://www.baidu.com">去百度</a>

<img src="pic3.jpg">

</div>

</p>

(6)div标签(***)

块级标签,独占一行.页面排版时,当做容器使用

<div>可定义文档中的分区或节

(7)span标签(***)

内联标签,作为页面提示信息使用

<span> 标签被用来组合文档中的行内元素。

<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。

如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS来实现各种样式。

代码例子1:

<div>

第一个div

</div>

<div>

第二个div

</div>

<span>第一个span</span>

<span>第二个span动力</span>

效果图:

(8)pre标签

定义预格式化的文本

就是将原来的格式输出

<pre>

望庐山瀑布

作者：李白

日照香炉生紫烟，遥看瀑布挂前川。

飞流直下三千尺，疑是银河落九天。

</pre>

效果:

(9)a标签(*)文本级标签**

超链接标签,所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

跳转到指定地址

跳转至锚点(name和id,注意一下)

跳转至顶部(#)

写静态页面是,建议给a加上 <a href="javascript:void(0);"

javascript:是伪协议，表示url的内容通过javascript执行。void(0)表示不作任何操作，这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式，但不让链接执行实际操作.

例子1:

<h1>我的第一个网页</h1>

<h3 id="title-h3">我的第一个网页</h3>

<p id="aaa">字体没有加粗</p>

<a href="one.html">跳到one.html网页</a>

<!--跳转到百度-->

<a href="http://www.baidu.com">百度一下</a>

<!--跳转到id = "#title-h3" 的标签 -->

<a href="#title-h3">跳至h3</a>

<a href="#">跳至顶部</a>

<!--跳转到id = "aaa" 的标签-->

<a href="#aaa">跳至aaa</a>

例子2:

<a href="javascript:alert('hsz');" title="弹出框">不跳转,显示hsz</a>

<a href="javascript:void(0);">点击2</a>

<a href="javascript:;">点击3</a>

(10)img标签(*)**

src 图片的地址(url,绝对路径,相对路径)

宽和高,只设置一个时,会按照图片的原始比例,进行缩放.

title 鼠标悬浮时,显示的提示性的文本.

alt 图片加载失败时,提示信息.提高用户的体验度.

a标签可以包裹img,点击img时,进行跳转.

高矮不齐，底边对齐

例子:(前提是在这个网页的同一个文件夹下放pic3.jpg名字的图片)

<img src="pic3.jpg" alt="走丢了" width="120" height="100" title="妖精的尾巴">

<img src="pic3.jpg" alt="走丢了" width="250" height="200" title="妖精的尾巴">

<img src="pic3.jpg" alt="走丢了" width="450" height="400" title="妖精的尾巴">

<img src="pi3.jpg" alt="走丢了" width="100" height="200" title="妖精的尾巴">

前三个只要将鼠标移动到图片位置就会显示"妖精的尾巴",第四个是没有这个图标,会返回alt的内容"走丢了"

(11)ul标签(*)无序列表**

li标签,不能单独使用.容器级标签.

一般会结合css,进行页面排版.

type属性：

disc（实心圆点，默认值）

circle（空心圆圈）

square（实心方块）

none（无样式）

例1:(注意不同属性)

<ul type="disc">

<li>张三</li>

<li>李四</li>

<li>赵五</li>

</ul>

<ul type="circle">

<li>张三</li>

<li>李四</li>

<li>赵五</li>

</ul>

效果图:

例2:(嵌套的ul)

<ul>

<li><b>北京</b>

<ul>

<li>朝阳区</li>

<li>东城区</li>

<li>西城区</li>

</ul>

</li>

</ul>

<ul>

<li><b>广东</b>

<ul>

<li>广州市</li>

<li>佛山市</li>

<li>深圳市</li>

</ul>

</li>

</ul>

效果图:

(12)ol标签有序列表

例1:(从第二项开始)

</ol>

设置type,自定制序号

type属性： start是从数字几开始

1 数字列表，默认值

A 大写字母

a 小写字母

Ⅰ大写罗马

ⅰ小写罗马

配合li标签.

(13)dl标签

定义列表

dt标签,顶头显示.

dd标签,在左侧有缩进

例:

<dl>

<dt>第一条规则</dt>

<dd>不准睡觉</dd>

<dd>不准交头接耳</dd>

<dt>第二条规则</dt>

<dd>可以泡妞</dd>

<dd>可以找妹子</dd>

</dl>

效果:

(14)table标签

tr标签,行

td标签,列

th标签,列(td+b)

thead标签,表头

tbody标签,表内容

tfoot标签,表页脚.

合并单元格:

纵向合并rowspan

横向合并colspan

例子:

<!--表格 3行4列-->

<table border="1" style="border-collapse:collapse;">

<tr>

<th>姓名</th>

<th>年龄</th>

<th>性别</th>

<td><b>地区</b></td> <!-- th相当于td+b -->

</tr>

<tr>

<td>夏波</td>

<td>22</td>

<td>男</td>

<td rowspan="2">中国</td>

</tr>

<tr>

<td>小岳岳</td>

<td>35</td>

<td>男</td>

<!-- <td>河南</td>-->

</tr>

<tr>

<td>邓紫棋</td>

<td>33</td>

<!-- <td colspan="2">女</td> <!– 横向 –>-->

<td>女</td>

<td>中国香港</td>

</tr>

</table>

效果图:

(15)form表单(*)**

属性:

- action 数据提交的服务器地址

- method 数据提交的方式,默认get,指定post,当你写错的时候,还是按照get

input标签

type:

- text, 默认,文本,用于输入用户名等信息(***)

- password, 用于用户密文输入密码(***)

- radio , 单选框,必须name值一致.(***)

- CheckBox, 复选框,(***)

- button, 普通按钮,配合js使用(***)

<button>按钮</button>

- submit, 提交按钮.(***)

- reset, 重置form表单内的内容

- file, 上传文件(***)

<input type="file" value='上传文件'>

- hidden, 隐藏的input标签

默认选中,checked

(16)select标签(*)**

name是提交过去的key,option的value属性是提交过去的值.

option标签 value属性,

默认选中,selected

textarea标签

多行文本输入框

(17)label标签(*)**

提高用户的体验度

for属性,必须制定的对方的id值.

如果以get 的方式,比较不安全,因为输入的信息在提交过程中都显示跳转的网址上了,以下有个例子是为了方便查看提交的信息所有先用get,

一般用post,post方式提交的信息在请求体,相对安全

例子:

<h3>用户注册</h3>

<!--method 一般用post,此处是为了方便查看-->

<form action="https://www.baidu.com" method="get">

<p><label for="username">昵称：</label><input type="text" name="username" id="username"></p>

<!--type="password"表示输入的密码为密文显示-->

<p>密码：<input type="password" name="pwd"></p>

<p>性别：

<!--checked 如果没有选择默认选择男-->

<input type="radio" name="sex" value="male" checked> 男

<input type="radio" name="sex" value="female"> 女

<input type="radio" name="sex" value="secret"> 保密

</p>

<p>爱好：

<input id="chui" type="checkbox" name="hobby" value="chui"> <label for="chui">吹管乐</label>

<input type="checkbox" name="hobby" value="la"> 拉二胡

<input type="checkbox" name="hobby" value="tan"> 弹吉他

<input type="checkbox" name="hobby" value="chang"> 唱京剧

</p>

<p>

学历：

<select name="xueli" id="sel1" size="3" multiple>

<option value="g">高中</option>

<option value="d">大专</option>

<option value="b" selected>本科</option>

<option value="s">硕士</option>

</select>

</p>

<div>

<!--多行文本输入框cols="40" rows="5" 5行40列-->

<p>个性签名：

<textarea name="" id="" cols="40" rows="5"></textarea>

</p>

</div>

<!--hidden1 隐藏了不显示-->

<input type="hidden" value="sdfsdfsdf">

<!--如果reset不写value的值,默认为重置-->

<input type="reset" value='重置'>

<input type="submit" value='注册'>

</form>

效果截图:

输入信息后截图:

提交后跳转到百度,百度网址后跟着一串的提交值,(平常一般用于将着一串值传给服务端)

上面有从另外一个网页提交的各种信息