Html学习笔记（一）
常见的浏览器及其内核
- Google浏览器：Chromium/Blink,之前用的webkit
- IE浏览器：Trident—“兼容模式”
- Edge浏览器：EdgeHTML
- 火狐浏览器：Gecko—代码公开
- Safari浏览器：webkit
- Opera浏览器：Presto—“前任内核”，目前使用Blink内核
Web标准
好处：
- 让Web的发展前景更广阔
- 内容能被更广泛的设备访问
- 更容易被搜索引擎搜索
- 降低网站流量费用
- 使网站更易于维护
- 提高页面浏览速度
构成：
结构标准：结构用于对网页元素进行整理和分类，主要包括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）是通过-等标签进行定义的。 定义最大的标题。 定义最小的标题。
段落标签（熟记）
段落是通过 标签定义的。
水平线标签（认识）
hr 元素可用于分隔内容。
换行标签（熟记）
如果希望在不产生一个新段落的情况下进行换行（新行），可以使用
也许发现
即使
div span标签（重点）
div和span是没有语义的，是我们网页布局主要的两个盒子
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。 在 HTML 中，图像由 HTML 使用超级链接与网络上的另一个文档相连。 基本语法： href 属性规定链接指向的页面的 URL。 base标签 在html中还有一种特殊的标签——注释标签。如果需要在html文档中添加一些便于阅读和理解但又不需要显示在页面的注释文字，就需要使用注释标签，基本语法格式如下： HTML有2种路径的写法：相对路径 和绝对路径。 HTML相对路径(Relative Path) 同一个目录的文件引用 我们现在建一个源文件index.html，在index.html里要引用login.html文件作为超链接。 假设index.html路径是：C:\Users\lenovo\Desktop\index.html 表示上级目录 假设index.html路径是：C:\Users\lenovo\Desktop\index.html 假设index.html路径是：C:\Users\lenovo\Desktop\index.html 假设index.html路径是：C:\Users\lenovo\Desktop\index.html 表示下级目录 假设index.html路径是：C:\Users\lenovo\Desktop\index.html 假设index.html路径是：C:\Users\lenovo\Desktop\index.html HTML绝对路径(Absolute Path) HTML绝对路径(absolute path)指带域名的文件的完整路径。 假设你注册了域名www.php.cn，并申请了虚拟主机，你的虚拟主机提供商会给你一个目录，比如www，这个www就是你网站的根目录。 假设你在www根目录下放了一个文件index.html，这个文件的绝对路径就是： http://www.php.cn/index.html。 假设你在www根目录下建了一个目录叫html_student，然后在该目录下放了一个文件index.html，这个文件的绝对路径就是http://www.php.cn/html_student/index.html。 HTML 支持有序、无序和自定义列表 无序列表 ul （重点） 注意：ul标签只能放li标签 有序列表 ol （了解） 浏览器显示如下： 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。 自定义列表 （理解） 浏览器显示如下： 定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
如果用 id 或 class 来标记
可以对同一个
标签被用来组合文档中的行内元素。
如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。
可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。可以对同一个元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
文本格式化标签（熟记）
标签属性
属性总是以名称/值对的形式出现，比如：name=”value”。
属性总是在 HTML 元素的开始标签中规定。<标签名 属性1="属性值1" 属性2="属性值2" ...> 内容
图像标签Img（重点）
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
定义图像的语法是：<img src="图像URL" />
属性
属性值
描述
scr
URL
图像的路径
alt
文本
图像不能显示时的替换文本
title
文本
鼠标悬停时显示的内容
width
像素
设置图像的宽度
height
像素
设置图像的高度
border
数字
设置图像边框的宽度
链接标签（重点）
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用 标签在 HTML 中创建链接。
有两种使用标签的方式：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像a>
target属性规定在何处打开链接文档。
锚点定位（难点）
通过创建锚点链接，用户能够快速定位到目标内容
创建锚点需要两步：
base标签可以设置整体链接的打开状态，写在之间特殊字符标签（理解）
特殊字符
描述
字符的代码
空格符
<
小于号
<
>
大于号
>
&
和号
&
¥
人民币
¥
©
版权
©
®
注册商标
®
°
摄氏度
°
±
正负号
±
×
乘号
×
÷
除号
÷
²
平方2
²
³
立方3
³注释标签
路径
如果源文件和引用文件在同一个目录里，直接写引用文件名即可。
假设login.html路径是：C:\Users\lenovo\Desktop\login.html
在index.html加入login.html超链接的代码应该这样写： <a href = "login.html">login.htmla>
../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。
假设login.html路径是：C:\Users\lenovo\login.html
在index.html加入login.html超链接的代码应该这样写： <a href = "../login.html">login.htmla>
假设login.html路径是：C:\Users\login.html
在index.html加入login.html超链接的代码应该这样写： <a href = "../../login.html">loginx.htmla>
假设login.html路径是：C:\Users\lenovo\Desktop\Dreamweave\login.html
在index.html加入login.html超链接的代码应该这样写： <a href = "../Dreamweave/login.html">loginx.htmla>
引用下级目录的文件，直接写下级目录文件的路径即可。
假设login.html路径是：C:\Users\lenovo\Desktop\html\login.html
在index.html加入login.html超链接的代码应该这样写： <a href = "html/login.html">login.htmla>
假设login.html路径是：C:\Users\lenovo\Desktop\html\student\login.html
在index.html加入login.html超链接的代码应该这样写： <a href = "html/student/login.html">login.htmla> 列表标签
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于。
浏览器显示如下：<ul>
<li>Coffeeli>
<li>Milkli>
ul>
li标签中可以存放所有标签
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于标签。<ol>
<li>Coffeeli>
<li>Milkli>
ol>
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以开始。每个自定义列表项的定义以开始。<dl>
<dt>Coffeedt>
<dd>Black hot drinkdd>
<dt>Milkdt>
<dd>White cold drinkdd>
dl>