Web从入门到放弃-HTML的学习(三)

说明：

HTML标记是使用特定字符表示不同功能，对于浏览器来说，浏览器解析的是标记代表的功能，如：p--段落，a--超链接
下文及后文中提到的标记、标签、元素、节点都是同一个东西，都指HTML标记

一、HTML基本标记

1.1.标题标记

<body> <h1> 一级标题</h1> <h2> 二级标题</h2><h3> 三级标题</h3> <h4> 四级标题</h4> <h5> 五级标题</h5> <h6> 六级标题</h6>
</body>

加了标题的文字会变的加粗，字号也会依次变大
一个标题独占一行
h1~h3标题也是网页关键字之一，所以在实际开发时要酌情使用

1.2.段落标记

<p>段落内容</p>
是paragraph 的缩写
文本在一个段落这种会根据浏览器窗口的大小进行自动换行
段落和段落之间保有空隙
一组<p></p>代表一段

1.3.换行标记

<br />实现换行
<br />是个单标签
<br />标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

1.4.文本格式化标签：

<strong></strong>文本加粗，强调文本内容加粗文本，是网页关键字之一，如需要推荐使用
<b></b>文本加粗，强调视觉效果文本变粗，该效果在CSS中可通过属性使用，所以在HTML5中已被废除不用，不建议使用
<em></em>文本倾斜，同理<strong>
<i></i>文本倾斜，同理<b>
<del></del>删除线(贯穿线)，该效果在CSS中可通过属性使用，所以在HTML5中已被废除不用，不建议使用，了解即可
<ins></ins>下划线，同理<strong>
<u></u>下划线，同理<b>

1.5.分块标签(页面布局搭建，内容分块时使用居多，必须掌握)

<div></div> 相当于是一个盒子，建议使用div时务必加上宽高及背景颜色或者border
<span></span>可以理解为是内容的分块，如一句话中，有几个字是想要单独操作，就可以使用这个标签来单独定义且不影响整句话。

1.6.图片标签

<img src="xxx.png" alt="xxx" title="xxx" border="xxx" width="xxx" height="xxx" />
src：是必须要有的属性，它用于指定图像文件的路径和文件
alt：为了提高网页的语义化和用户的体验，这个属性也是要有的，主要作用是当图片加载失败时，页面中会显示图片相关的提示信息(提示信息自定义)
title：为了提高网页的语义化和用户的体验，这个属性也是要有的，主要作用是当鼠标悬停到图片上时，会显示图片相关的提示信息(提示信息自定义)
border：给图片设置边框，可有可无
width/height：给图片添加宽度属性和高度属性

1.7.常见的图片格式

jpg：JPEG(.jpg)对色彩的信息保留较好，高清，颜色较多，产品类的图片经常使用jpg格式
gif：GIF最多只能存储256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果
png：png图片给格式，是一种新兴的网络图片格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景
webp：webp是谷歌推出的一种全新的图片文件格式，与JPEG格式一样，WebP是一种有损压缩格式。不同的是，WebP格式的压缩效率更为出色，在同等质量下，WebP格式图像的体积要比JPEG格式图像小40%。

1.8.相对路径和绝对路径

相对路径：
- 同一级路径：图形，文件位于同一级，如<img src="1.png" />
- 下一级路径：“/”，图形文件位于HTML文件的下一级，如<img src="img/1.png" />
- 上一级路径：“../”，图形文件位于HTML文件的上一级，如<img src="../1.png" />
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

1.9.超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href属性：用于指定链接目标的url地址，必须属性
target属性：用于指定链接页面打开的方式，
- _self ：默认属性。在当前窗口或者框架中加载目标文档。
- _blank ：打开新的窗口或者新的标签页。在使用时，最好添加 rel=“noopener “属性，防止打开的新窗口对原窗口进行篡改。防止 window.opener API 的恶意行为。
- _parent ：在 frame 或者 iframe 中使用较多。在父级框架中载入目标文档，当 a 标签本身在顶层时，与 _self 相同。
- _top ：在 frame 或者 iframe 中使用较多。直接在顶层的框架中载入目标文档，加载整个窗口。
锚点链接：
- 作用：点击链接，可以快速定位到页面中的某个位置
- 在链接文本的href属性中，设置属性值为#名字
- 找到目标位置标签，里面添加一个 id属性=名字 <a href = "#two">第二季</a> <h3 id = "two">第二季介绍</h3>

1.10 .表格标签：在久远的web前端中表格是用来是实现页面布局的，现在的布局方式特别的多，基础使用DIV+CSS(后期详细的介绍)

定义完成的表结构
<body> <caption>学员基本信息</caption> -----定义表标题<table> ------整体表格<thead> -----定义表头<th>姓名</th> ----定义表格的列标题<th>性别</th> <th>年龄</th> </thead> <tbody> -----定义表的正文部分<tr> ----定义行<td>一只耳</td> ----定义行中的单元格<td>男</td> <td>18</td> </tr> <tr> <td>哪吒</td> <td>男</td> <td>17</td> </tr> <tr> <td>图图</td> <td>男</td> <td>8</td> </tr> </tbody><tfooter> -----定义表的结束部分<tr><td>结束</td><td>结束</td><td>结束</td><tr></tfooter></table>
</body>

说明：虽然完整的表结构如上代码那么多，但是实际开发时有如下建议，一定要认真看完哦

*.关于<tbody></tbody>在一个表中可以有多个，务必记住这一点，也可以省略不写，如果神略了浏览器在解析表格时会自动补全这个标签

*.在实际开发时大多人不写<tfooter>标签，个人建议还是写上吧毕竟要考虑所谓的语义化开发(有机会细细讲解)

table属性：

属性	属性值	说明
align	left、center、right	定义整个表格相对周围元素的对其方式
border	1或者" "	定义整个表格是否有边框，默认为" ",表示没有边框
cellpadding	length,像素值	定义单元格边沿与其内容之间的距离(空白)，默认1像素
cellspacing	length,像素值	定义单元格之间的空白，默认2像素
width	length像素值或者百分比均可	定义整个表格的宽度
bgcolor	颜色值	定义整个表格的背景颜色
background	图片地址	定义整个表格的背景图片

<table align=center border="1" cellpadding="20" cellspacing="0" width="500">

表格结构属性：

属性	属性值	说明
width	length,像素值	定义具体行或者单元格的宽度(会影响到其他相邻单元格的宽度)
height	length,像素值	定义具体行或者单元格的高度(会影响到其他相邻单元格的高度)
bgcolor	颜色值	定义具体行或者单元格的背景颜色
background	图片地址	定义具体行或者单元格的背景图片
align	left、center、right	定义具体行或者单元格中文本内容的位置
`rowspan`	number	合并单元格，跨行合并(纵向合并)，合并完成需要删除多余的单元格，删除个数=合并数-1
`colspan`	number	合并单元格，不跨行合并(横向合并)，合并完成需要删除多余的单元格，删除个数=合并数-1

<table border="1px" width="500px"><thead><th>ID</th><th>Name</th><th>Age</th></thead><tbody><tr><!-- 很想合并 --><td>1</td><td colspan="2">Onion1</td><!-- 删除多余的单元格 --><!-- <td>17</td> --></tr><tr><td>2</td><td>Onion2</td><!-- 纵向合并 --><td rowspan="3">17</td></tr><tr><td>3</td><td>Onion3</td><!-- 删除多余的单元格 --><!-- <td>17</td> --></tr><tr><td>4</td><td>Onion4</td><!-- 删除多余的单元格 --><!-- <td>17</td> --></tr></tbody></table>

1.11.列表标签

无序列表(就没有序号的列表呗)

<ul type="disc"> -----定义列表<li>列表项</li> ----定义列表项<li>列表项</li><li>列表项</li><li>列表项</li>
</ul>
type属性值参考："disc"实心圆"square"正方形

实际网页中常见的无序列表效果如下：

列表之间进行合理的嵌套：

列表之间可以进行嵌套，嵌套之后：第一级：type属性默认值为"disc"实心圆；第二级：type属性默认值为"circle"空心圆；第三级之后(包括第三级)：type属性默认值为"square"正方形。
代码如下：
<ul><li>列表项</li><li>列表项<ul><li>子列表项</li><li>子列表项<ul><li>孙列表项</li><li>孙列表项</li><li>孙列表项</li></ul></li><li>子列表项</li></ul></li><li>列表项</li><li>列表项</li>
</ul>

嵌套后的显示效果如下：

1.12.有序列表

<ol type="1"> -----定义列表<li>列表项</li> ----定义列表项<li>列表项</li><li>列表项</li><li>列表项</li>
</ol>
type属性值参考："A"，大写字母"a",小写字母"1",数字"I",大写罗马数字"i",小写罗马数字

1.13.自定义列表

<dl> ----定义列表<dt>游戏</dt> ----列表项<dd>王者荣耀</dd> ----列表明细<dd>阴阳师</dd><dd>连连看</dd>
</dl>

1.14.表单标签

一个完整的表单通常由表单域，表单控件（表单元素）和提示信息3部分组成
为什么需要表单：
- 使用表单目的是为了收集用户信息。在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。
表单域：一个包含表单元素的区域，<form></from>标签用于定义表单域，会把它范围内的表单元素信息提交给服务器

属性	属性值	作用
action	url地址	指定接受并处理表单数据的服务器程序的url地址
methods	get、post	用于设置表单数据的提交方式，其取值为get或post
name	名称	指定表单名称，用于区分同一个页面中的多个表单域

<form action="url地址" method="提交方式" name="表单域的名称"> </form>

1.15. 表单控件(表单元素)

input元素，输入表单元素，tyle属性设置不同的属性值用来指定不同的控件类型

type属性值如下：

属性值	描述
button	定义可点击按钮(大多情况下，用于脚本)
checkbox	定义复选框(多选框)
file	定义输入字段和"浏览"按钮，提供文件上传
hidden	定义隐藏的输入字段，大多用作占位符，结合脚本实现效果
image	定义图像形式的提交按钮
password	密码框，会掩饰输入的字符
radio	定义单选框，想要实现单选，必须加上name属性，同一个name视为同一组，同一组内只能选一个
reset	定义重置按钮，会清除表单中的所有数据
submit	定义提交按钮，带有提交功能，会把表单数据发送到服务器端
text	定义普通文本框，可以输入文本，默认宽度为20个字符

除 type属性外，<input>标签还有很多其他很多属性，其常用属性如下：

属性	属性值	描述
name	自定义	定义input的名称
value	自定义	定义input的值，真正往服务器端提交的数据
checked	checked	多选和单选的属性，表示选中，是个布尔值
maxlength	正整数	规定输入字符的最大个数

name 和 value 是每个表单元素都有的属性值，主要给后端人员使用。
name 是表单元素的名字，要求单选框和复选框要有相同的name值
checked 属性主要针对于单选框和复选框，主要作用是一打开页面，就可以默认选中某个表单元素

文本框与密码框：

type属性设置为text视为普通文本框
type属性设置为password视为密码框

<body> <form> 用户名：<input type="text"> <br/> 密码：<input type="password"></form>
</body>

单选框和复选框：

type 属性设置为 radio 是单选框
type 属性设置为 checkbox 是复选框
name 是表单元素的名字，要求单选框和复选框要有相同的name值

<form> 用户名：<input type="text"> <br> 密码：<input type="password"> <br /> <!-- radio是单选框，可以多选一 --> 性别：男<input type="radio"> 女 <input type="radio"> <!-- checkbox是多选框，可以多选 --> 爱好：吃饭<input type="checkbox" checked="checked"> 睡觉<input type="checkbox"> 打游戏<input type="checkbox">
</form>

name和value属性:

name属性：当前input表单的名字，后台可以通过这个name属性找到这个表单，name的主要作用就是用于区别不同的表单

<form> 用户名：<input type="text" value="请输入用户名"> <br> 密码：<input type="password"> <br /> <!-- radio是单选框，可以多选一 --> <!-- name是表单元素的名字，这里的性别单选按钮必须有相同的名字name，才能实现多选一 --> 性别：男<input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女"> <!-- checkbox是多选框，可以多选 --> 爱好：吃饭<input type="checkbox" name="habby" value="吃饭"> 睡觉<input type="checkbox" name="habby" value="睡觉"> 打游戏<input type="checkbox" name="habby" value="打游戏">
</form>

注意：单选框和复选框name必须一致，value可以不一样

checked和maxlength:

单选按钮和复选框可以设置checked 属性
当页面打开时候就可以默认选中这个按钮
单选框只能给其中一个加checked，复选框可以多加

性别:男<input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女">

maxlength:规定最多输入多少个字符

submit和reset:

type 属性设置为submit：提交按钮会把表单数据发送到服务器
type 属性设置为reset：重置按钮会清除表单中的所有数据

button和文件域:

type 属性设置为button：是一个按钮
type 属性设置为file：是一个文件域，可以上传文件

<input type="button" value="获取短信验证码"> <br>
<!-- 文件域：上传文件使用的 -->
上传头像：<input type="file">

label：

label标签用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器就会自动将焦点(光标)转到表单元素上，用来增加用户体验
label标签的 for属性应当与相关元素的id 属性相同

<label for="sex"> 男 </lable>
<input type="radio" name="sex" id="sex" />

1.16.select下拉表单元素

下拉表单元素
<select>中至少包含一对<option>
在<option>中定义 selected="selected" 时，当前项即为默认选中项。

<select> <option selected="selected">选项1</option> <option>选项2</option> <option>选项3</option> ...
</select>

1.17.textarea文本域元素

用于定义多行文本输入的控件：<textarea> 文本内容 </textarea>
cols = “每行中的字符数” ， rows = “显示的函数”，我们在实际开发中不会使用，都是用CSS来改变大小

表单综合：

<form action="http://www..." method="get"><!-- label标签定义表单控件的文字标注，input类型为text定义了一个单行文本输入框 --><p><label>姓名：</label><input type="text" name="username" /></p><!-- input类型为password定义了一个密码输入框 --><p><label>密码：</label><input type="password" name="password" /></p><!-- input类型为radio定义了单选框 --><p><label>性别：</label><label><input type="radio" name="gender" value="0" /> 男</label><label><input type="radio" name="gender" value="1" /> 女</label></p><!-- input类型为checkbox定义了单选框 --><p><label>爱好：</label><label><input type="checkbox" name="like" value="sing" /> 唱歌</label><label><input type="checkbox" name="like" value="run" /> 跑步</label><label><input type="checkbox" name="like" value="swiming" /> 游泳</label></p><!-- input类型为file定义上传照片或文件等资源 --><p><label>照片：</label><input type="file" name="person_pic"></p><!-- textarea定义多行文本输入 --><p><label>个人描述：</label><textarea name="about"></textarea></p><!-- select定义下拉列表选择 --><p><label>籍贯：</label><select name="site"><option value="0">北京</option><option value="1">上海</option><option value="2">广州</option><option value="3">深圳</option></select></p><!-- input类型为submit定义提交按钮还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：<input type="image" src="xxx.gif">--><p><input type="submit" name="" value="提交"><!-- input类型为reset定义重置按钮 --><input type="reset" name="" value="重置"></p></form>

总结：以上就是HTML(4)常用的标签，多年经验来说，建议各位在学习的过程中，掌握了基本架构标签和div之后，先学习CSS，盒子模型，浮动等，先练习搭建页面结构(画框框)，熟练之后，再来看这些标签，就能结合实际应用到页面上了，便于记忆和理解！！！

陆续更新中，如果有帮助到您，谢谢点赞，谢谢收藏，谢谢关注，谢谢支持，总之就是谢谢啦各位...........

Web从入门到放弃-HTML的学习(三)相关推荐

Web从入门到放弃-CSS的学习(五)
一.CSS的简单介绍(要想知道复杂的,百度一搜一看一了解) HTML本质作用就是把数据呈现到网页上而已(数据展示的一个载体) 当下看到花里胡哨的网页都是在HTML的基础上通过CSS和CSS3实现的 w ...
从入门到放弃——VO小白学习VIO系列（1）VINS环境搭建
从入门到放弃--VO小白学习VIO系列(1)VINS环境搭建前言入门知识 VINS环境的搭建安装Ubuntu16.06 安装ROS Kinetic 添加ROS源(国内源) 设置秘钥刷新源安装 ...
JavaScript30秒，从入门到放弃之Array（三）
原文链接:JavaScript30秒, 从入门到放弃之Array(三) 水平有限,欢迎批评指正 flattenDepth Flattens an array up to the specified d ...
python嵩天第二版第五章_如何避免从入门到放弃——python小组学习复盘
2019年春节python学习行动复盘2019-02-09 为了主攻python,没有参加心理学晨读.对心理学也不敢兴趣,怕耽误学习python的时间. 那么没学习心理学的情况下,python学的怎么 ...
虚拟机安装docker_Docker 从入门到放弃：新手学习笔记（上）
前言: 本文记录的是作为一个新手,从了解 Docker 是什么.Docker 技术包含哪些概念到上手使用.安装以及发布 Docker 镜像的整个过程.作者在学习过程中参阅了诸多文档和教程,在此一并感谢 ...
Web从入门到放弃-web的基本介绍(一)
一.网页介绍 1.1. 起源刚开始的互联网是主要是显示文本文档,所以初期为了规范显示,有了HTML,使用标签规范,规定<h><h2>标题,<p>段落等标签. 1. ...
【模型蒸馏】从入门到放弃：深度学习中的模型蒸馏技术
点击上方,选择星标或置顶,每天给你送干货! 阅读大概需要17分钟跟随小博主,每天进步一丢丢来自 | 知乎作者 | 小锋子Shawn 地址 | https://zhuanlan.zhihu.c ...
爬虫从入门到放弃 - 纯新手学习-爬虫基本原理
1.什么是爬虫? 请求网站并提取数据的自动化程序请求:客户端向服务端发送请求获得网页资源,是一段html代码,包含html标签和一段信息. 提取:提取出想要的信息,然后将结构化的数据存储到文本自动 ...
web前端入门指南：来看看这位大佬的学习之路吧！
开始他的表演第一章:为什么要学习前端开发?web前端开发是什么? 从事前端开发工作差不多3年了,自己也从一个什么都不懂的小白积累了一定的理论和实践经验.编写<Web前端入门指南>系列文章 ...

Web从入门到放弃-HTML的学习(三)

一、HTML基本标记

Web从入门到放弃-HTML的学习(三)相关推荐

最新文章

热门文章