HTML标签+认识浏览器
HTML标签
原文引用链接: https://blog.csdn.net/qq_43665891/article/details/104471454.
标签也叫元素,标记,具有某些特定的含义和作用以及外观表现
标签基本形式：
<标签名 属性名1=“属性值1” 属性名2=“属性值2” …> ## 单标签
<标签名 属性名1=“属性值1” 属性名2=“属性值2” …>内容</标签名>
说明：
1，标签名是一个“单词”（有的单词可能只有一个字母）。
2，属性名也是一个“单词”，表示对该标签的进一步“修饰”（设定）。
3，有的标签没有“内容部分”，则后面的结尾标签部分不用写——这种称为“单标签”。 ——绝大多数标签都是“双标签”，只有很少几个是单标签。
4，不同的标签有不同的属性，不同的属性有不同的含义（或作用）。
5，有的属性可以出现在所有标签上——叫做通用属性。
注释格式:
<!-- 这是个注释 -->
标签的分类
形式分类:
按标签形式，html标签可以分为双标签和单标签。
单标签比较少，只有几个，比如：br，hr，input，img，link
功能分类:
文字标签：i, u, sub, sup, s, font
结构标签：html, head, title, body, div, span, br, hr, h1~h6, pre, blockquote
连接标签：a， link
图像标签：img
列表标签：ul， ol， li， dl， dt，dd
表格标签：table， tr， td， th， caption， thead， tbody， tfoot
表单标签：form， input， select， option， textarea，button，
其他： meta， style， script，
结构标签
嵌套关系：
就是一个标签内，再放其他标签。比如：
<p>
<a href=”http://www.baidu.com” > go to baidu </a>
</p>
并列关系：
<p>这是段落1</p>
<p>这是段落2</p>
排版标签
内容级结构标签
内容级结构标签在一个html文档中可以出现多次，而且都应该在body标签中。 内容级结构标签也常称为“排版标签”，主要包括：
h1~h6，br， hr， p， pre， blockquote， div， span， 表格标签等等
- h1～h6：
标题标签，用于设定一定级别的标题，h1是最大的标题，h6是最小的标题
属性 :align：left（左） | center（中） | right（右） - br：
换行标签，表示新的一行，能够让其后的内容放到下一行的开头开始显示。
单标签 - hr:
横线标签，就是输出一根横线，有几个常用属性，如下所示：
noshade:去除阴影
<hr width=”宽度值” color=”颜色值” align=”对齐方式” size=”粗细” noshade />
- p:
段落标签，表示“一个段落”，此时文字前后自然会有一个空行。
属性：align，其值可以为：left（默认）， center，right - pre:
预格式化标签，表示其中的内容“原样输出”， 主要是其中的换行符，tab符以及空格能在网页上也直观显示出该有的效果。 - blockquote:
引用标签，表示其中的内容是“引用别人的话”，通常在学术著作中比较常见(不常用,就是加粗)
块标签和行内标签
块标签： 一个标签写出后，不管其是否有内容（是否单标签），或内容多少，都会“独占一行”。
比如：hr, p, h1, div等
行内标签： 一个标签跟另一个标签如果相继出现，则在页面表现上会在一行出现。
比如：b， strong， font等
块元素可以设置宽高，行内元素不可以设置宽高
文本标签
文本标签主要用于修饰文字内容，以实现一定的文字外观效果，或表达一定的含义，或二者兼具。
文本标签主要包括：
-
b：粗体
-
strong：加强，强调（也会表现为粗体）
-
i：斜体
-
em：强调（斜体）
-
s：删除线
-
del：删除线
-
u：下划线
-
ins：下划线
-
sub：下标
-
sup：上标
-
big：字体变大115%
-
small：字体变小85%
-
font：可以设置文字大小，颜色和字体的文本标签。
该标签有几个属性。
<font size=”大小” color=”颜色” face=”字体” > 文本</font>
列表标签
列表标签是为了在网页中实现“列表效果”的版面布局效果。
列表标签包括三种：
- 无序列表：ul>li,
- 有序列表：ol>li,
- 定义列表：dl>dt,dd
无序列表ul>li:
形式为:
<ul type=”列表项目符号”>
<li>项目1。。。。</li>
<li>项目2。。。。</li>
。。。更多项目按照上述li形式写出。。。
</ul>
ul标签有一个属性type，可取值为：
disc： 小圆点，默认值
circle： 小圆圈
square： 四方形块
有序列表ol>li :
形式为:
<ol type=”序号类型” start=”起始序号”>
<li>项目1.。。。。</li>
<li>项目2。。。。</li>
。。。更多项目
</ol>
属性说明：
序号类型：
表示有序列表的序号是什么字符或数字，有如下可用的值：
- 1： 阿拉伯数字
- a： 小写字母
- A： 大写字母
- i： 小写罗马数字
- I： 大写罗马数字
起始序号：
表示上述编号是从哪个开始，不管序号类型是什么，都只要用一个阿拉伯数字来表示。
序号类型和起始需要都可以省略（内部都有默认值）。
定义列表dl>dt，dd:
形式:
<dl>
<dt>条目名称1</dt>
<dd>条目内容1。。。</dd>
<dt>条目名称2</dt>
<dd>条目内容2。。。</dd>
。。。更多条目。。。
</dl>
图像标签
图像标签就是为了显示图片。 图片标签就一个：img
形式:
<img src=”.....图片路径” width=”xxx” height=”xxx” alt=”xxx” align=”xxx” border=”xxx” />
属性说明：
- src：用于设定图片的路径。
图片格式有很多种，网页上主流的3种：png, jpg, gif - width，height：设定图片的宽高。通常只设定其中一项，另一项会自动按比例缩放。
- alt：设定图片的“替换文本”，主要用于搜索引擎作为搜索图片的关键字。
- align：设定图片的“对齐方式”。它可以让图片紧贴左边或右边展示，以使其周围文字可以“绕图展示”（但注意：align不能让图片“居中排列”）
- border：用于设定图片的边框线宽度；
链接标签
链接标签
<a>主要是为了实现网页中的“链接”，以使用户可以点击并跳转。
链接分为两种：超链接 和 锚点链接
语法：<a href=”URL”>内容</a>
假链接：<a href=”#”>内容</a>
超链接
实现从当前页面跳转到目标页面
例如:
<a href="1/3/02.html">跳转</a>
<a href="https://www.baidu.com/">点击我跳转到百度首页</a>
<a href="baidu.com">
<img src="1.jpg">
</a>
属性：
- target: _self(默认在当前窗口中打开新页面) | _blank (在新窗口中打开新页面)
修改所有链接的target默认值在 head标签中设置 base标签
<base target="_blank">
- title： 设置鼠标悬停到超链接上的文字提示。
锚链接
锚链接实现的是在当前页面中跳转
<p id="id名">内容</p>
<a href="#id名">内容</a>
Link标签
通过link标签可以设置网页图标
<link rel="icon" href="favicon.ico">
注意 :
要将link标签放到head标签中
link标签中的属性rel=“icon”。
href=“图标路径”
一般将网页图标放到网站的根目录下。
表格标签
Table>tr>td，th
<table 属性.... >
<tr >
<td 属性.... > 内容 </td>
。。。若干个单元格。。。
</tr>
。。。若干个行。。。
</table>
属性 :
- table： 表示表格（整体），有多个常用属性。
- tr： 表示行，基本上没有什么属性。
- td： 表示单元格（列），有多个常用属性。
注意：这里，table，tr， td是严格的嵌套关系，即只能按此层次关系出现。
table常用属性
| 属性名 | 含义 | 常用属性值 |
|---|---|---|
| border | 设置表格的边框宽度 | 像素值(默认为0) |
| cellspacing | 设置单元格与单元格边框之间的空白间距宽度 | 像素值(默认为2像素) |
| cellpadding | 设置单元格内容与边框线之间的空白间距宽度 | 像素值(默认为1像素) |
| width | 设置表格的宽度 | 像素值 |
| height | 设置表格的高度 | 像素值 |
| align | 设置表格在网页中的水平对齐方式 | left、center、right |
| bgcolor | 设置表格的整体背景颜色 | |
| background | 设置表格的整体背景图 | |
| bordercolor | 格的边框线颜色 |
td标签常用属性:
| 属性名 | 含义 | 常用属性值 |
|---|---|---|
| width | 设置单元格的宽度 | 像素值 |
| height | 设置单元格的高度 | 像素值 |
| align | 设置单元格中的内容的水平对齐方式 | left、center、right |
| valign | 设置单元格中的内容的垂直对齐方式 | top、middle、bottom |
| rowspan | 设置要跨行（纵向）合并的单元格数 | 要合并的数量 |
| colspan | 设置要跨列（横向）合并的单元格数 | 要合并的数量 |
| bgcolor | 设置单元格的背景颜色 | |
| background | 设置单元格的背景图 |
td标签可以使用th进行替换，表示“标题单元格”，其本质也是单元格。
表格高级 :
thead，tbody，tfoot 三个标签 , 写不写效果一样.可以忽略这块
就是table标签里,分为thead标题部,tdboy内容部,和底部tfoof,在这三个部分里在写tr ,因为不写也会自动给补上的
表单标签
表单有很多种，比如： 单行文本框，多行文本框，密码框，单选项，多选项，下拉选项等等。
表单标签主要包括：
form, input, select>option, textarea, button,
其中:
- form标签是“盒子标签”（或称为容器标签），需要用它将其他表单标签包含起来。
- input标签虽然只是一个标签，但其有很多个形式（根据type属性的不同）。
表单标签的常见形式类似这样
详解:
form标签 :
form标签的作用是用于将其他表单标签“包”起来，以便作为一个整体，可以提交数据到服务器。
形式：
<form name=”表单名称” action=”目标地址” method=”数据提交方式” >
。。。这里写其他具体的一个一个表单标签。。。
。。。还可以出现几乎所有其他各种标签（除了html，body，head等少数几个）。。。
</form>
作用:通过表单控制实现收集用户信息
使用场景:注册页面,登录页面
表单域:
- method:设置表单提交方式 get|post
- action : 用来处理表单提交数据信息的一个后台文件
输入框:
<input type = "text">
属性:
- maxlength : 设置当前控件最多能输入多少个字符
- readonly : 设置让当前控件为只读模式(不能输入)(无值属性)
- disabled : 设置当前控件不能输入(无值属性)
- value : 设置当前控件的默认值
- name : 设置当前控件名称
- id : 唯一标识符
密码文本框 :
<input type = "password">
与文本框中的属性一样
隐藏文本框 :
<input type ="hidden" name = "pswd" value="数据">
隐藏文本框在网页上不可见，但其中的数据可用
单选项 :
<input type="radio">
注意: 想要让单选控件实现单选效果,我们需要给控件设置相同的name值
<input type="radio" name="a" >男
<input type="radio" name="a" >女
属性:
- checked : 设置默认选中项 (无值属性)
多选项 :
<input type = "checkbox">
属性:
- checked : 设置默认选中项 (无值属性)
文件域
<input type="file">
提交按钮
<input type="submit" value="提交">
提交表单数据
图片按钮
<input type="image" scg="图片.jpg">
提交表单数据
重置按钮
<input type="reset">
将表单控件中的值恢复到默认值,重置是恢复到刚开始的样子,不是清空
普通按钮
<input type="button" name="" value="按钮">
不能实现提交表单,配合js使用
表单框
<fieldset>
<legend>人员注册信息</legend>
邮箱地址:<input type"txt" value = "请输入地址" name="" id="" readonly disabled maxlength="6">
</fieldset>
下拉列表 , Select，option
这两个标签是联合使用的，用于实现网页上的“列表选项”，通常就是下拉列表。
<select name=”名称” size=”行数”>
<option value=”值1”>文字1<option>
<option value=”值2” selected=”selected” >文字2<option>
。。。更多选项照上述格式写出。。。
</select>
属性:
-
size属性：表示该列表选项展示出的项数（行数），如果为1（默认值），就是下拉列表。
-
select属性：表示该option选项默认被选中。只应该出现在一个option上。
<select name=”名称” size=”行数”>
<optgroup label="文字1">
<option value=”值1”>文字2<option>
<option value=”值2” selected=”selected” >文字3<option>
。。。更多选项照上述格式写出。。。
</select>
textarea 标签
textarea标签用于实现“多行文本输入框
<textarea name=”名称” cols=”列数” rows=”行数”>这里可以放内容，通常留空</textarea>
button标签
button标签就是“按钮标签”，其作用是在网页上展示一个“按钮”而已。
<button name=”名称” >按钮文字</button>
一般不需要用这个标签，而是直接使用来实现更为常见，效果一样。
meta标签(元信息标签)
meta标签用于定义有关网页（文档）的相关信息（不作为网页的内容表现信息）。
meta标签常用的网页（文档）的相关信息如下所示：
设定针对搜索引擎的关键词：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
设定对页面的描述：
<meta name="description" content="xxx怎么怎么样" />
设定网页的作者或制作组
<meta name="Author" content="某人，某组">
设定网页每隔多少秒数自动刷新一次：
<meta http-equiv="refresh" content="5" />
设定网页在一定时间后自动跳转到另一个页面：
<Meta http-equiv="Refresh" Content="等待的秒数; url=要跳转到的网页地址">
内嵌框架
就是在这个页面里面 ,显示另一个页面的内容
<iframe src=”要嵌入进来的网页地址” name=”框架名称” width=”宽度” height=”高度” frameborder=”1或0” scrolling=”yes或no”></iframe>
说明：
- iframe是双标签，但标签中通常不放任何内容。
- frameborder：用于设定框架窗口是否显示“边框线”，1表示显示，0表示不显示。
- scrolling：用于设定框架窗口是否显示滚动条（类似浏览器的滚动条）。
特殊字符
更多见下文:
原文引用链接：https://blog.csdn.net/qq_32506555/article/details/50791518.
认识浏览器
原文引用链接：https://blog.csdn.net/weixin_46415852/article/details/104543485
一、关于浏览器
（1）主流浏览器标准：市场占有率3%以上且拥有自己的内核。
（2）目前最为主流浏览器有五大款，分别是：Internet Explorer、Safari、Mozilla Firefox、 Google Chrome、Opera
（3）最早的浏览器：Mosaic / Netscape Navigator(网景领航者)（1994-2008）简称NN。
浏览器与浏览器之间也会产生矛盾，解决矛盾最好的方法莫过于打一架！在上世纪90年代就爆发了第一次浏览器大战，微软发布了他的IE浏览器，和网景公司的Netscape
Navigator浏览器大打出手，取代了网景公司Netscape
Navigator在市场的主导地位。甚至还引发了美国诉微软案官司。在20世纪的时候又发生了第二次浏览器大战，Internet
Explorer9便是战争的产物！
二、五大浏览器内核
（1）Trident（MSHTML）（三叉戟；三插线；三齿鱼叉）
（2）Gecko（壁虎）
（3）Presto（迅速的）
（4）Webkit（Safari内核，Chrome内核原型，它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核）
（5）Blink（由Google和Opera Software开发的浏览器排版引擎）
三、五大浏览器内核代表作品
- Trident：IE、Maxthon(遨游)、腾讯、Theworld世界之窗、360浏览器。代表作品IE，因为IE捆绑在Windows中，所以占有极高的市场份额，又称IE内核或是MSHTML，此内核只能应用于Windows平台，且是不开源的。
- Gecko：代表作品Mozilla Firefox、NetScape 6以后版本，是开源的，它的最大优势是跨平台，能在Microsoft Windows、Linux和macOS X等主要操作系统上运行。
- Webkit：代表作品Safari、Chrome、遨游浏览器3，是一个开源项目。
- Presto：代表作品Opera(前内核)，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。Opera现已改用Google Chrome的Blink内核。
- Blink：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。
浏览器内核：
（1）主要分成两部分：渲染引擎和JS引擎。
（2）渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等）、以及计算网页的显示方式，然后会输出至显示器或打印机，浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
（3）JS引擎：解析和执行JavaScript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分得很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
71
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
