HTML标签及浏览器概览

最新推荐文章于 2022-10-15 20:47:14 发布

叆-叇

最新推荐文章于 2022-10-15 20:47:14 发布

阅读量232

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_54481824/article/details/116033285

版权

本文详细介绍了HTML的基本标签如加粗、斜体、表格、列表、表单、label和下拉菜单，以及不同内核浏览器的概述。深入探讨了表格属性、表单元素和主流浏览器如IE、Chrome、Firefox和Safari的特点。

摘要由CSDN通过智能技术生成

文章目录

HTML标签
浏览器概览
主流浏览器分类：

HTML标签

（1）一般的常见标签：

<strong>加粗标签</strong><b>加粗标签</b>
<em>斜体标签</em><i>斜体标签</i>
<ins>下划线标签</ins><u>下划线标签</u>
<del>删除线标签</del><s>删除线标签</s>
<div>块级标签</div>
<span></span>
<h>标题标签</h>//标题标签一共六个，分别为h1-h6
<p>段落标签</p>
插入图片单标签<img src="url" />
强制换行单标签</br>
生成水平向标签</hr>
<a href="" target"" >超链接标签</a>
//在target中_self为在当前页面打开
//_blank为在额外窗口打开。

其中超链接标签中不仅仅可以添加文字，图片，音频等也可以添加超链接标签，放在a标签之中即可。

加粗标签、斜体标签、下划线标签和删除线标签推荐用strong em ins 和del 。但在实际操作过程中我们更偏向于用结构和样式相分离，用css修改样式更符合习惯。

div和span则是我们之后经常用到的块级标签。hr标签同样不常使用。

需要注意的是：浏览器会移除源代码中的空格和空行，所有的连续空格都会被算作一个空格。需要注意的是，HTML代买中所有连续的空行（换行）也会被显示为一个空格。所以我们需要特殊字符来辅助显示，例如&nbsp（空格符）

在这里插入图片描述

<a href=”#名字”>锚点链接</a>
//点击超链接中文字后会自动转到锚点位置。
<p id=”名字”></p>

（2）表格标签

<table>
  <tr>
     <td>我是单元格</td>
  </tr>
</table>

在表格标签中，tr标签用于定义表格中的行，必须嵌套在table标签之中。

td则用于定义表格中的单元格，必须嵌套在tr标签当中。

表格的属性：

<table align="  " border="" cellpadding="" cellspacing="">
</table>
<table  cellpadding="" cellspacing="" width="">
</table>

在这里插入图片描述

在table中这五个标签定义了表格的属性：

1.align定义了表格相对周围元素的对齐方式

2.border规定表格单元是否有边框，默认为没有边框

3.cellpadding规定单元边沿与其内容之间的空白，默认为1像素

4.cellspacing规定单元格之间的空白，默认为2像素

5.width则规定了表格的宽度

另外，将表格标签嵌套在thead和tbody标签中会使结构更加清晰。

合并单元格：
首先确定需要跨行合并还是跨列合并，然后找到目标单元格，写上合并方式，这里以跨列合并为例。最后删除多余的单元格即可。

（3）列表标签：

无序列表

<ul>
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
  ...
</ul>

在这里插入图片描述

注意：

1.无序列表顾名思义，各个列表项之间没有顺序级别之分，是并列的。

2.ul中只能嵌套li标签，直接在ul标签中输入其他标签或者文字的做法是不被允许的。

3.li与之间相当于一个容器，可以容纳所有元素。

4.无序列表会带有自己的样式属性（例如li之前的圆点），但在实际使用时，我们会使用css来设置。

有序列表

<ol>
  <li>有序列表</li>
  <li>有序列表</li>
  <li>有序列表</li>
  ...
</ol>

在这里插入图片描述

列表的注意点大致相同，参照ul注意点即可

自定义列表

<dl>
  <dt>标题</dt>
  <dd>解释1</dd>
  <dd>解释2</dd>
</dl>

在这里插入图片描述

（4）表单标签：

<form action="" method="" name="" >
  <input type="">
</form>

在这里插入图片描述

form之中的元素到时可以直接提交到后台进行数据处理。input为单标签，type属性设置不同的属性值同来指定不同的控件类型。
type属性值如下：

在这里插入图片描述

（5）label标签：

<label for="yes">正确</label>
<input type="radio" name="yes" id="yes" />

label标签为input标签定义标注，当点击label标签内的内容是，浏览器会自动将光标转到对应的表单元素上来增加用户体验。

（6）下拉菜单&表单元素

<select>
  <option select="seleceted">选项1</option>
  <option>选项1</option>
  ...
</select>

在这里插入图片描述

注意，在下拉菜单中select中至少包含一对option，在option额中定义select=“selected”时，当前即为默认选中项。

<textarea row="3" cols="20">
文本内容
</textarea>

1.通过textarea标签可以轻松地创建多行文本输入框
2.cols，rows分别显示每行字符数和每行行数，但实际中还是css用的较多

浏览器概览

浏览器：浏览器是用来检索、展示以及传递Web信息资源的应用程序。Web信息资源由统一资源标识符( Uniform Resource Identifier，URI)所标记，它是一张网页、一张图片、一段视频或者任何在Web上所呈现的内容。使用者可以借助超级链接( Hyperlinks)，通过浏览器浏览互相关联的信息。

浏览器的种类很多，但是主流的内核只有四种，各种不同的浏览器，就是在主流内核的基础上，添加不同的功能构成。

（1）Trident内核

代表产品为Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器有：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等 [3] 。

（2）Gecko内核

代表作品为Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎，是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9 [3] 。

（3）WebKit内核

代表作品有Safari、Chrome。WebKit是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示 [3] 。

（4）Presto内核

代表作品Opera。Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版 [3] 。

主流浏览器分类：

（1）IE浏览器

IE浏览器是微软推出的Windows系统自带的浏览器，它的内核是由微软独立开发的，简称IE内核，该浏览器只支持Windows平台。国内大部分的浏览器，都是在IE内核基础上提供了一些插件，如360浏览器、搜狗浏览器等。
在这里插入图片描述

（2）Chrome浏览器

Chrome浏览器由Google在开源项目的基础上进行独立开发的一款浏览器，市场占有率第一，而且它提供了很多方便开发者使用的插件，因此该浏览器也是本书开发的主要浏览器。Chrome浏览器不仅支持Windows平台，还支持Linux、Mac系统，同时它也提供了移动端的应用（如Android和iOS平台）。
在这里插入图片描述