Html学习笔记（⼀）
常见的浏览器及其内核
Google浏览器：Chromium/Blink，之前⽤的webkit
IE浏览器：Trident—“兼容模式”
Edge浏览器：EdgeHTML
⽕狐浏览器：Gecko—代码公开
Safari浏览器：webkit
Opera浏览器：Presto—“前任内核”，⽬前使⽤Blink内核
Web标准
好处：
1. 让Web的发展前景更⼴阔
2. 内容能被更⼴泛的设备访问
3. 更容易被搜索引擎搜索
html ul标签
4. 降低⽹站流量费⽤
5. 使⽹站更易于维护
6. 提⾼页⾯浏览速度
构成：
结构标准：结构⽤于对⽹页元素进⾏整理和分类，主要包括XML和XHTML两个 部分
样式标准：表现⽤于设置⽹页元素的版式、颜⾊、⼤⼩等外观样式，主要指的 是CSS
⾏为标准：⾏为指的是⽹页模型的定义及交互的编写，主要包括DOM和CMAScript两个部分理想状态我们的源码：.html .css .js
开发⼯具
Dreamweave
Sublime
WebStorm
HBuilder
Visual Studio Code
HTML初识
超⽂本标记语⾔，主要通过HTML标签对⽹页中的⽂本、图⽚、声⾳等内容进⾏描述。HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词
HTML 标签通常是成对出现的
标签对中的第⼀个标签是开始标签，第⼆个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
语法⾻架
<html>根标签
<head>头标签
<title></title>标题标签
</head>
<body>主题标签
</body>
</html>
html标签：作⽤：所有html中标签的⼀个根节点
head标签：作⽤：⽤于存放：title,metal,base,style,script,link 注意在head标签中必须设置title标签
title标签 ：作⽤：让页⾯拥有⼀个属于⾃⼰的标题
body标签：作⽤：页⾯的主体部分，⽤于存放所有的html标签：p,h,a,b,u,i,s,em,dei,ins,strong,img
字符集
utf-8是⽬前最常⽤的字符集编码⽅式，常⽤的字符集编码⽅式还有gbk和gb2312
gb2312：简体中⽂
BIG5：繁体中⽂
GBK：包含全部中⽂字符，兼容GB2312
UTF-8：包含全世界所有国家需要⽤到的字符
HTML标签
排版标签
标题标签（熟记）
标题（Heading）是通过<h1>-<h6>等标签进⾏定义的。<h1> 定义最⼤的标题。<h6> 定义最⼩的标题。
段落标签（熟记）
段落是通过 <p>标签定义的。
⽔平线标签（认识）
<hr />标签在 HTML 页⾯中创建⽔平线。
hr 元素可⽤于分隔内容。
换⾏标签（熟记）
如果希望在不产⽣⼀个新段落的情况下进⾏换⾏（新⾏），可以使⽤ <br />标签。
<br />元素是⼀个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
也许发现<br> 与<br />很相似。在 XHTML、XML 以及未来的 HTML 版本中，不允许使⽤没有结束标签（闭合标签）的 HTML 元素。 即使 <br>在所有浏览器中的显⽰都没有问题，使⽤<br /> 也是更长远的保障。
div span标签（重点）
div和span是没有语义的，是我们⽹页布局主要的两个盒⼦
<div> 可定义⽂档中的分区或节（division/section）。
<div> 标签可以把⽂档分割为独⽴的、不同的部分。它可以⽤作严格的组织⼯具，并且不使⽤任何格式与其关联。
如果⽤ id 或 class 来标记<div>，那么该标签的作⽤会变得更加有效。
<div>是⼀个块级元素。这意味着它的内容⾃动地开始⼀个新⾏。实际上，换⾏是 <div>固有的唯⼀格式表现。可以通过<div>的 class 或id 应⽤额外的样式。不必为每⼀个<div>都加上类或 id，虽然这样做也有⼀定的好处。
可以对同⼀个<div> 元素应⽤ class 或 id 属性，但是更常见的情况是只应⽤其中⼀种。这两者的主要差异是，class ⽤于元素组（类似的元素，或者可以理解为某⼀类元素），⽽ id ⽤于标识单独的唯⼀的元素。
<span>标签被⽤来组合⽂档中的⾏内元素。
如果不对 span 应⽤样式，那么 span 元素中的⽂本与其他⽂本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。
可以为 span 应⽤ id 或 class 属性，这样既可以增加适当的语义，⼜便于对 span 应⽤样式。可以对同⼀个<span>元素应⽤ class 或 id 属性，但是更常见的情况是只应⽤其中⼀种。这两者的主要差异是，class ⽤于元素组（类似的元素，或者可以理解为某⼀类元素），⽽ id ⽤于标识单独的唯⼀的元素。
⽂本格式化标签（熟记）
标签属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，⽐如：name=”value”。
属性总是在 HTML 元素的开始标签中规定。
<；标签名属性1="属性值1"属性2="属性值2"...> 内容 </标签名>
标签可以拥有多个属性，必须写在开始标签中，位于标签名后
属性之间不分先后顺序，标签名和属性、属性与属性之间均以空格分开
任何标签的属性都有默认值，省略该属性则取默认值
图像标签Img（重点）
在 HTML 中，图像由 <img> 标签定义。
<img>ooooooo是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页⾯上显⽰图像，你需要使⽤源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
定义图像的语法是：
<img src="图像URL" />
<img />标记属性：
属性属性值描述
scr URL图像的路径
alt⽂本图像不能显⽰时的替换⽂本
title⽂本⿏标悬停时显⽰的内容
width像素设置图像的宽度
height像素设置图像的⾼度
border数字设置图像边框的宽度
链接标签（重点）
HTML 使⽤超级链接与⽹络上的另⼀个⽂档相连。
⼏乎可以在所有的⽹页中到链接。点击链接可以从⼀张页⾯跳转到另⼀张页⾯。
超链接可以是⼀个字，⼀个词，或者⼀组词，也可以是⼀幅图像，可以点击这些内容来跳转到新的⽂档或者当前⽂档中的某个部分。 当把⿏标指针移动到⽹页中的某个链接上时，箭头会变为⼀只⼩⼿。
我们通过使⽤<a> 标签在 HTML 中创建链接。
有两种使⽤<a>标签的⽅式：
1. 通过使⽤ href 属性 - 创建指向另⼀个⽂档的链接
2. 通过使⽤ name 属性 - 创建⽂档内的书签
基本语法：
<a href="跳转⽬标"target="⽬标窗⼝的弹出⽅式">⽂本或图像</a>
href 属性规定链接指向的页⾯的 URL。
target属性规定在何处打开链接⽂档。
锚点定位（难点）
通过创建锚点链接，⽤户能够快速定位到⽬标内容
创建锚点需要两步：
1. 使⽤”a href=”#id名”连接⽂本/a”创建链接⽂本
2. 使⽤相应的Id名标注跳转⽬标的位置
base标签
base标签可以设置整体链接的打开状态，写在<head></head>之间
特殊字符标签（理解）
特殊字符描述字符的代码
空格符 
<⼩于号<
>
⼤于号>&和号&¥⼈民币¥©版权©®注册商标®°摄⽒度°±正负号±×乘号×÷除号÷²平⽅2²³
⽴⽅3
³
特殊字符描述字符的代码注释标签
在html中还有⼀种特殊的标签——注释标签。如果需要在html⽂档中添加⼀些便于阅读和理解但⼜不需要显⽰在页⾯的注释⽂字，就需要使⽤注释标签，基本语法格式如下：
路径
HTML有2种路径的写法：相对路径 和绝对路径。HTML相对路径(Relative Path)同⼀个⽬录的⽂件引⽤
如果源⽂件和引⽤⽂件在同⼀个⽬录⾥，直接写引⽤⽂件名即可。
我们现在建⼀个源⽂件index.html，在index.html⾥要引⽤login.html⽂件作为超链接。假设index.html路径是：C:\Users\lenovo\Desktop\index.html 假设login.html路径是：C:\Users\lenovo\Desktop\login.html 在index.html加⼊login.html超链接的代码应该这样写：
表⽰上级⽬录
../表⽰源⽂件所在⽬录的上⼀级⽬录，../../表⽰源⽂件所在⽬录的上上级⽬录，以此类推。假设index.html路径是：C:\Users\lenovo\Desktop\index.html 假设login.html路径是：C:\Users\lenovo\login.html 在index.html加⼊login.html超链接的代码应该这样写：
假设index.html路径是：C:\Users\lenovo\Desktop\index.html 假设login.html路径是：C:\Users\login.html
在index.html加⼊login.html超链接的代码应该这样写：
<!-- 注释语句 -->
<a href = "login.html">login.html</a>
<a href = "../login.html">login.html</a>
<a href = "../../login.html">loginx.html</a>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。