HTML笔记（一）

bubu笔记基于b站：web前端 web基础 菜鸟教程

常见的浏览器及其内核

• Google浏览器：Chromium/Blink,之前用的webkit
• IE浏览器：Trident—“兼容模式”
• Edge浏览器：EdgeHTML
• 火狐浏览器：Gecko—代码公开
• Safari浏览器：webkit
• Opera浏览器：Presto—“前任内核”，目前使用Blink内核
   

W3C的建立

• 伯纳斯李1994年建立万维网联盟（W3C）
• W3C的出现为了制定网页开发的标准，以使同一个网页在不同浏览器中有相同的效果
• 所以，我们编写的网页都需要遵循W3C的标准

遵循标准的好处：

1. 让Web的发展前景更广阔
2. 内容能被更广泛的设备访问
3. 更容易被搜索引擎搜索
4. 降低网站流量费用
5. 使网站更易于维护
6. 提高页面浏览速度

网页的结构

根据W3C的标准，一个网页主要由三部分组成：结构，表现还有行为。

什么是HTML？

HTML（Hyper Text Markup Language）超文本标记语言

html有固定的结构

标签属性

• 标签可以拥有多个属性，必须写在开始标签中，位于标签名后
• 属性之间不分先后顺序，标签名和属性、属性与属性之间均以空格分开
• 任何标签的属性都有默认值，省略该属性则取默认值
• 标签一般成对出现，但是也存在一些自结束标签

<标签名 属性1="属性值1" 属性2="属性值2" ...> 内容 

HTML的一些常用标签

标签

HTML 语言头部的一个辅助性标签，我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等。

属性	值	描述
charset( H5  New)	gb2312：简体中文 BIG5：繁体中文 GBK：包含全部中文字符，兼容GB2312 UTF-8：包含全世界所有国家需要用到的字符	定义文档的字符编码
http-equiv	content-type default-style refresh	把 content 属性关联到 HTTP 头部。
name	description（简介） keywords（关键字）	用来告诉搜索引擎你的网站主要内容 为搜索引擎提供的关键字列表
content	text	定义与 http-equiv 或 name 属性相关的元信息。
...	...	...

语法

charset

name

 http-equiv

3秒后跳转到腾讯界面

     

标题标签

标题是通过

-

等标签进行定义的。

定义最大的标题。

定义最小的标题。

段落标签

段落是通过

标签定义的。

水平线标签

---

标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。

换行标签

注释标签

快捷方式   选中文本CTRL+ /

文本格式化标签

HTML字符实体 

在HTML中，某些字符是预留的，这些预留字符必须被替换为字符实体。例如：在HTML中不能使用小于号(<)和大于号(>)，这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在HTML源代码中使用字符实体

 图像标签

在HTML标签中, 标签用于定义HTML页面中的图像。

img是单词image的缩写,意为图像。

src是标签的必须属性,它用于指定图像文件的路径和文件名。

 链接标签

基本语法

文本或图像

href 属性规定链接指向的页面的 URL。
target属性规定在何处打开链接文档。

锚点定位
通过创建锚点链接，用户能够快速定位到目标内容
创建链接文本，使用相应的Id名标注跳转目标的位置

 
 
jxust

路径

路径有相对路径和绝对路径

相对路径

相对与某个基准目录的路径

./ 表示当前文件所在目录，可以省略不写

../ 表示当前文件所在目录的上一级目录

“../web/abc.txt” 从当前位置→返回上一级菜单→进入web→找到abc.txt
同一目录下文件想调用 abc.txt 可以“./abc.txt”和“abc.txt”表示相对路径

绝对路径

一个完整路径(URL和物理路径)

例 D:\web\file.txt 表示 file.txt 的绝对路径

快捷方法

 列表标签

列表标签分为：有序列表、无序列表、自定义列表

有序列表	使用ol标签来创建有序列表	使用li来表示列表项
无序列表（常用）	使用ul标签来创建无序列表	使用li来表示列表项
自定义列表	使用dl标签来创建定义列表	使用dt来表示内容 使用dd来对内容进行解释说明

 

        
结构
        
行为
        
表现
    

    

        
结构
        
行为
        
表现
    

    

        
结构
        
结构表示网页的结构

    

布局标签

HTML5新增

header 表示网页的头部

main 表示网页的主体部分（一个页面中只会有一个main）

footer 表示网页的底部

nav 表示网页中的导航

aside 表示和主体相关的其他内容（侧边栏）

article 表示一个独立的文章

section 表示一个独立的区块，上边的标签都不能表示时使用section

div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素

span 行内元素，没有任何语义，一般用于网页中选中文字

​
    
  头部
    
    
    主体

    
   底部

    
     导航

    
   侧边栏

    
  独立的文章

    
   独立的区块

    
     大盒子 块级元素
    
        小盒子  行内元素

​