前端学习——Html
使用渡一的前端入门课程进行学习，下面将学习笔记记录于此。希望自己的前端学习之路一帆风顺。
开发平台：sublime。
学习视频：渡一前端入门课。
参照内容：菜鸟教程。
文章目录
- 前端学习——Html
- 前言
- 一、Html常用标签
- 二、Html-容器标签
- 2.1 div 元素
- 2.2 span 元素
- 三、Html-列表标签
- 3.1 ul 元素
- 3.2 ol 元素
- 3.3 li 元素
- 四、Html-图片标签
- 4.1 图片路径
- 4.2 alt标签
- 4.3 title标签
- 五、Html-超链接标签
- 5.1 a 标签
- 5.2 a 标签的作用
- 六、表格
- 6.1 相关标签
- 6.2 样例
- 七、表单
- 7.1 相关标签
- 7.2 输入元素
- 7.2.1 文本域（Text Fields）
- 7.2.2 密码（Password）
- 7.2.3 单选按钮（Radio Buttons）
- 7.2.4 复选框（Checkboxes）
- 7.2.5 提交按钮(Submit Button)
- 7.2.6 数据名name、数据值value
- 7.3 样例展示
前言
在之前的项目中接触过前端三件套，但都是浅尝辄止，目前打算重新系统的学一遍，从最基础的三件套开始。
一、Html常用标签
简介：Html——超文本标记语言（hyperText markup language）。HTML 不是一种编程语言，而是一种标记语言。HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词，比如 <html>。标签对中的第一个标签是开始标签，第二个标签是结束标签。
尝试书写下列代码：
<htm1 lang="en">
<head>
<meta charset="utf-8">
<title>淘宝网</title>
<meta content="服装" name="keywords">
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<p>段落标签</p>
<a href="https://www.4399.com">链接标签</a>
<br>换行
</body>
</html>
备注：
lang="en"是告诉搜索引擎爬虫，我们的网站是关于什么内容的。类似于这是该网站的关键字，可被搜索出来。
utf - 8是字符集，8指的8比特，即常用的一字节。类似的其他字符集有gb2312、gbk、Unicode。
head是头标签，用于声明一些东西，不可见。
body包含了可见的内容。
常用标签有：
- front 字体标签，用于修饰文字样式
- br 换行标签
- p 段落标签
- h1~h6 标题标签
-   空格标签，在编辑器中打空格表示分隔符。以&开头的为html特殊编码。<与>可以表示<>。
<!--HTML注释内容 -->注释标签<img/>图片标签，包括内网路径（绝对路径、相对路径），互联网路径< ul>无序列表。< ol>有序列表。< li>列表条目。<a herf="链接对象">链接内容</a>。连接对象可以为网址也可以为其他内容。链接内容可以为图片也可以为其他内容。span>与< div>容器。看起来没有用，但却是最重要的，使得整齐更规格化。table表格。<tr></tr>行标签<td></td>单元格标签<th></th>表格头标签。书写顺序：
步骤1：定义一个表格
步骤2：定义表格中的一行
步骤3：在表格一行中定义单元格 内容就可以写在单元格中
成对出现的标签需要包裹内容才能发挥作用。成单出现的标签可以单独使用。
其他的标签在后续学习中总结。
二、Html-容器标签
简介：div与span是常用的容器标签。虽然他们没有具体的样式，但在前端工作中十分重要。
容器的功能有：结构化、绑定化操作等。
2.1 div 元素
div 元素是块级元素，它可用于组合其他 HTML 元素的容器。它没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，div元素可用于对大的内容块设置样式属性。
div的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 table元素进行文档布局不是表格的正确用法。table元素的作用是显示表格化的数据。
2.2 span 元素
span元素是内联元素，可用作文本的容器。span元素也没有特定的含义。当与 CSS 一同使用时，span元素可用于为部分文本设置样式属性。
三、Html-列表标签
简介：div与span是常用的容器标签。虽然他们没有具体的样式，但在前端工作中十分重要。
容器的功能有：结构化、绑定化操作等。
3.1 ul 元素
无序列表。无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
type=disc、circle、square 分别表示实心圆、空心圆、方块
3.2 ol 元素
有序列表。同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 ol 标签。每个列表项始于 li 标签。
type=1、a、A、i、I分别表示从1开始排，从a开始排、从A开始排、从i开始排、从I开始排（后两者表示罗马数字）。
reverse表示倒序。
start表示从哪里开始。
3.3 li 元素
li 元素是具体的定义列表项，配合ul、ol使用，是前两者的子结构。三者的配合经常使用在功能类似的组项中。
下面代码展示了三者的联系及作用。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ui>
<li>服装</li>
<li>美食</li>
<li>旅游</li>
<li>购物</li>
<li>其他</li>
</ui>
<ol>
<li>服装</li>
<li>美食</li>
<li>购物</li>
<li>旅游</li>
<li>其他</li>
</ol>
</body>
</html>
结合css后可变为日常生活中常见的导航栏。
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
li{
margin: 0 10px;
float: left;
color: #f40;
font-weight: bold;
font-size: 14px;
height: 25px;
line-height: 25px;
padding: 0 5px;
}
li:hover{
border-radius: 15px;
background-color: #FF4400;
color: #fff;
}
</style>
</head>
<body>
<ul>
<li>服装</li>
<li>美食</li>
<li>旅游</li>
<li>购物</li>
<li>其他</li>
</ui>
</body>
</html>
效果展示为：
四、Html-图片标签
图片也是前端界面中常见的元素。其代码用<img src=" url ">表示。
4.1 图片路径
src表示source，指图片的来源。其来源通常有两种，网络的url与本地的路径。后者包括绝对路径和相对路径。
网络路径：使用图片具体的链接来引用图片。
相对路径：两者属于同一个文件夹下，可以直接引用。
绝对路径：两者不属于同一个文件夹下，不能直接使用，需要具体的文件位置。也可以用 **…**进行回溯。
以下代码展示相对路径和绝对路径：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="https://tse1-mm.cn.bing.net/th/id/R-C.c6c03edea530e9caa677c9d17f19
3a4d?rik=MBgpsjumbTD5eQ&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpap
er%2fscenery%2f20170209%2fca186d97701674b996264b2d352894a7.jpg&ehk=HunG%2fPF
7pUbpcS34cWpNvlS%2faoDPbcaTYL6LFFPQIIM%3d&risl=&pid=ImgRaw&r=0" style="width: 100px;height: 100px;">
<img src="图片1.png" alt="">
<img src="../../初学1/004/img1/图片1.png" alt="">
</body>
</html>
4.2 alt标签
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。当图片无法加载时会展示alt的内容。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
4.3 title标签
与alt标签相关，作用是鼠标放到图片上时展示出内容。
<img src="boat.gif" title="Big Boat">
五、Html-超链接标签
5.1 a 标签
HTML使用标签<a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。在标签<a>中使用了href属性来描述链接的地址。默认情况下，链接将以以下形式出现在浏览器中。
尝试下列代码：
<a href="https://www.baidu.com">链接文本</a>
注意：a标签中可以包括任何内容，图片、文字等能看到的内容都可以。
使用target = " _blank "将导入新的标签。
5.2 a 标签的作用
a标签的作用有：
- 超链接。
- 锚点。a其实指的是anchor，锚点。指的是该内容可以指导到锚点所在的位置。
- 打电话，发邮件。链接设置为电话时可以直接打电话。
- 协议限定符。
六、表格
6.1 相关标签
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。同样，表格可以带表头(由<th>表示 )。
表格并不都是由一个个长度相同的单元格组成的，在需要进行单元格合并的地方，需要使用colspan=" " 与 rowspan="" 来实现行、列的合并。
6.2 样例
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>个人简历</h3>
<table border="1px" cellspacing="0" cellpadding="">
<colgroup span="6" width="100px">
<colgroup span="1" width="200px">
<tr height="50px" align="center">
<th colspan="7">个人简历</td>
</tr>
<tr height="50px" align="center">
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>年龄</td>
<td></td>
<td rowspan="4">照片</td>
</tr>
<tr height="50px" align="center">
<td>学历</td>
<td></td>
<td >籍贯</td>
<td colspan="3"></td>
</tr>
<tr height="50px" align="center">
<td>电话</td>
<td></td>
<td>政治面貌</td>
<td colspan="3"></td>
</tr>
<tr height="50px"align="center">
<td>毕业院校</td>
<td colspan="5"></td>
</tr>
<tr height="50px" align="center">
<td>求职意向</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
个人简历
| 个人简历 | ||||||
|---|---|---|---|---|---|---|
| 姓名 | 性别 | 年龄 | 照片 | |||
| 学历 | 籍贯 | |||||
| 电话 | 政治面貌 | |||||
七、表单
7.1 相关标签
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form>来设置:
<form method="" action=""></form>
7.2 输入元素
多数情况下被用到的表单标签是输入标签<input>。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
7.2.1 文本域（Text Fields）
文本域通过 <input type="text">标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
效果为：
First name:Last name:
注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。
7.2.2 密码（Password）
密码字段通过标签 <input type="password"> 来定义:
<form>
Password: <input type="password" name="pwd">
</form>
7.2.3 单选按钮（Radio Buttons）
<input type="radio"> 标签定义了表单单选框选项
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
浏览器显示效果如下:
7.2.4 复选框（Checkboxes）
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
浏览器显示效果如下:
7.2.5 提交按钮(Submit Button)
<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
7.2.6 数据名name、数据值value
使用name来命名将提交的数据的值，使用value来记录提交的内容。
<input type="radio" name="value" value="Male">男
<input type="radio" name="value" value="Famale">女
男女因为name值相同，所以将作为单选框的两个选项。
value展示提交的内容。选男，将提交Male，选女，将提交Famale。
同时，value也可以展示默认内容。
7.3 样例展示
代码为：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p><input type="image" src="image/renren_titile.gif" /></p>
<p>人人网，中国
<b>最真实、最有效</b>
的社会平台，加入
<br>
人人网，找回老朋友，结交新朋友。
</p>
<form action="" method="post">
<p>
电子邮箱:
<input type="Email" value="student@bdqn.cn">
</p>
<p>
设置密码:
<input type="password">
</p>
<p>
真实姓名:
<input type="realName">
</p>
<p>
性别：
<input type="radio" name="value" value="Male">男
<input type="radio" name="value" value="Famale">女
</p>
<p>
<form action="http://vip.biancheng.net/login.php" method="post">
生日：
<select>
<option value="1991" selected>1991</option>
<option>1992</option>
</select>
年
<select>
<option selected>11</option>
<option>12</option>
</select>
月
<select>
<option selected>30</option>
<option>31</option>
</select>
日
</form>
</p>
<p>
为什么要填写我的生日？
</p>
<p>
我现在：
<select>
<option style="color: gray;" value="job" selected disabled>请选择身份</option>
<option style="color: black;" value="doctor">医生</option>
<option style="color: black;" value="teacher">老师</option>
</select>
(非常重要）
</p>
<p>
<input type="image" src="image/renren_code.gif" />
<a href="11">看不清换一张？</a>
</p>
<p>
验证 :
<input type="realName">
</p>
<p>
<input type="image" src="image/renren.gif" />
</p>
</form>
</body>
</html>
2828
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
