常见的浏览器及其内核
- 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）是通过<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>标签的方式：
- 通过使用 href 属性 - 创建指向另一个文档的链接
- 通过使用 name 属性 - 创建文档内的书签
基本语法：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>href 属性规定链接指向的页面的 URL。
target属性规定在何处打开链接文档。
锚点定位（难点）
通过创建锚点链接，用户能够快速定位到目标内容
创建锚点需要两步：
- 使用”a href=”#id名”连接文本/a”创建链接文本
- 使用相应的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超链接的代码应该这样写：
<a href = "login.html">login.html</a> 表示上级目录
../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。
假设index.html路径是：C:\Users\lenovo\Desktop\index.html
假设login.html路径是：C:\Users\lenovo\login.html
在index.html加入login.html超链接的代码应该这样写：
<a href = "../login.html">login.html</a> 假设index.html路径是：C:\Users\lenovo\Desktop\index.html
假设login.html路径是：C:\Users\login.html
在index.html加入login.html超链接的代码应该这样写：
<a href = "../../login.html">loginx.html</a> 假设index.html路径是：C:\Users\lenovo\Desktop\index.html
假设login.html路径是：C:\Users\lenovo\Desktop\Dreamweave\login.html
在index.html加入login.html超链接的代码应该这样写：
<a href = "../Dreamweave/login.html">loginx.html</a> 表示下级目录
引用下级目录的文件，直接写下级目录文件的路径即可。
假设index.html路径是：C:\Users\lenovo\Desktop\index.html
假设login.html路径是：C:\Users\lenovo\Desktop\html\login.html
在index.html加入login.html超链接的代码应该这样写：
<a href = "html/login.html">login.html</a> 假设index.html路径是：C:\Users\lenovo\Desktop\index.html
假设login.html路径是：C:\Users\lenovo\Desktop\html\student\login.html
在index.html加入login.html超链接的代码应该这样写：
<a href = "html/student/login.html">login.html</a> 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>。
浏览器显示如下：
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>- Coffee
- Milk
注意：ul标签只能放li标签
li标签中可以存放所有标签
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
有序列表 ol （了解）
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于<ol> 标签。每个列表项始于<li>标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>浏览器显示如下：
- Coffee
- Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
自定义列表 （理解）
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>浏览器显示如下：
-
Coffee
- Black hot drink Milk
- White cold drink
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
扫一扫
324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
