HTML 学习笔记（一）

作者：lxmoe

2022-11-04
辽宁
本文字数：1083 字
阅读完需：约 4 分钟

浏览器内核

浏览器有两大引擎分别为渲染引擎与 JS 引擎

渲染引擎：取得网页内容 html，整理讯息 css,计算网页显示方式
JS 引擎：解析 Javascript 语言

浏览器内核分为很多种，我们经常使用的浏览器内核有 firefox，chrome，edge，而他们的内核也不同，所以就会产生了代码相同，结果不同的现象，内核都有啥？有如下的内核

Trident（IE 内核）
Gecko(firefox)
webkit(safari)
Chromium/Blink(chorme)

Web 标准

Web 分有三个标准，分别为结构标准，样式标准，行为标准，其标准对于我们的开发也有不同的作用规范

结构标准：对网页元素进行整理和分类
样式标准：设置网页外观
行为标准：网页模型定义与交互编写

HTML 骨架

HTML骨架在网页中起到重要的作用，一个基本结构如下

<html>    <head>        <title> </title>    </head>    <body></body></html>

复制代码

HTML 标签

HTML标签是放置在HTML骨架中的元素，可以进行一些元素的排版

排版标签

排版标签有很多种，我们可以利用排版标签来为我们的网页进行基础的排版，比如段落，标题，盒子，行内盒子等等，下面一一介绍了各个标签

标头标签：

<head> </head>

复制代码

一般是存放meta和link以及script等标签的位置

段落标签：

<p></p>

复制代码

水平线标签：

<hr />**单标签

复制代码

换行标签：

<br />**单标签

复制代码

div、span 标签：

<div></div>

复制代码

文本格式化标签

文本格式化标签可以为我们的文本添加基本的格式化样式，比如粗体，斜体，删除线等等

<b></b> <strong> </strong> 粗体<i></i> <em> </em>  斜体<s></s> <del> </del>  删除线<u></u> <ins> </ins>  下划线

复制代码

标签属性

每个标签都有属性我们可以通过属性为元素添加不同的效果

写在开始标签中，可以有多个属性
采用 key=“value”形式

<hr width="300"/>

复制代码

图像标签

<img src="图像url"/>**设置图像路径
<img src="图像url" alt="这是一张图片"/>**设置图像路径、图片加载失败时显示的文本
<img src="图像url" title="这是我的图片"/>**设置图像路径、鼠标悬停在图片上时显示的标题
<img src="图像url" title="这是我的图片" width="" height="" border=""/>**设置图像路径、鼠标悬停在图片上时显示的标题、图像宽和高、边框宽度

复制代码

链接标签

<a herf="跳转目标" target="目标窗口的弹出方式"><a/>    <a herf="跳转目标" target="_blank"><a/>    **另外打开一个窗口    <a herf="跳转目标" target="self"><a/>    **在本窗口打开    <a herf="#" target="目标窗口的弹出方式">不可跳转<a/>

复制代码

锚点定位

——用于实现单击可直接定位并移动到对应位置

<a href="_#xxx_"> 嘻嘻 < /a><h3 id="xxx"> 哈哈 </h3>  **链接的名称应和id名称保持一致

复制代码

Base 标签

——用于设置整体链接打开方式

<base target="_blank"/>

复制代码

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/67487b61a90bbc967ab913f87】。文章转载请联系作者。

lxmoe

关注

还未添加个人签名 2022-08-06 加入

还未添加个人简介

发布

暂无评论

创作场景

HTML 学习笔记（一）

浏览器内核

Web 标准

HTML 骨架

HTML 标签

排版标签

文本格式化标签

标签属性

图像标签

链接标签

锚点定位

Base 标签

lxmoe

评论