Web 标准
主要包括: 结构(HTML) 、表现(CSS)、 行为(JavaScript)
HTML 指的是超文本标记语言
HTML 不是一种编程语言,而是一种标记语言
标记语言是一套标记标签
总结: HTML 作用是标记标签来描述网页,把网页内容在浏览器中展示出来.
HTML骨架:
<!DOCTYPE html> //文档类型,告诉我们使用的哪个HTML版本.h5
<html lang="en"> // 英文(可不带)
<head>
<meta charset="UTF-8">// 字符集,UTF-8则包含全世界所有国家需要用到的字符,以后统一使用UTF-8字符串.
<title>Document</title>
</head>
<body>
</body>
</html>
HTML标签分类:
<head> </head> 双标签
<br/> 单标签
快速生成HTML骨架:
在页面输入以下2个中任意一个:
1. html:5
2. !
在sublime里面然后按下tab键即可生成HTML骨架
HTML标签语义化:
遵循的原则: 先确定语义的HTML,再选合适的CSS
HTML常用的标签:
排版标签
标题标签(熟记) :
h1 h2 h3 h4 h5 h6 共六个
小技巧: 按住滚轮向下拉可实现多行统一编辑.(sublime)
段落标签(熟记) :
<p>我是一个段落</p>
水平线标签(认识) :
<hr /> 是单标签,在网页中显示默认样式的水平线
换行标记(熟记)
<br /> 是单标签,换行用
div span 标签(重点)
div 和 span :
div span 是没有语义的,是我们网页布局主要的2个盒子
div 就是division的缩写,分割、分区的意思,其实有很多div来组合网页.
span,跨度、跨距、范围
<div>布局用,独占一行</div> <span>布局用,可共用一行</span>
文本格式化标签(熟记)
| 标签 | 显示效果 |
|---|---|
<b></b>和<strong></strong> |
文字以 粗体 方式显示(XHTML推荐使用 strong) |
<i></i>和<em></em> |
文字以 斜体 方式显示(XHTML推荐使用 em) |
<s></s>和<del></del> |
文字以 |
<u></u>和<ins></ins> |
文字以 加下划线 方式显示(XHTML不赞成使用u) |
b i s u 只有使用,没有强调的意思 ; strong em del ins 语义更加强烈
图像标签img(重点)
img 是单标签,说明如下 :
<img src="图像的路径" alt="图像不能显示时的替换文本" title="鼠标悬停时显示的文字" width="图xi像宽度px" height="图像高度px" border="设置图像边框的宽度">
链接标签(重点)
a标签给图片、表格、音频、视频等添加超链接,用来跳转到外部链接(URL)或者内部链接(内部页面) :
<a href="指定链接目标的URL地址,如还没地址可用#来占位" target="用于指定链接页面的打开方式,其取值有self和blank两种:默认self,其中blank在新窗口中打开">链接文字</a>
锚点定位(难点)
通过创建锚点链接,用户能够快速定位到目标内容.
创建锚点链接分为两步:
1.使用"a herf ="#id名"链接文字/a"创建链接文本.
2.使用相应的id名称标注跳转目标的位置.
<a href="#live">页面滚动到下面诗句位置 </a>
.....
<h2 id="live">酒醒只在花前坐，酒醉还来花下眠；半醒半醉日复日，花落花开年复年。 </h2>
base 标签
base标签是单标签,可以统一设置页面内链接的打开方式,self 和 blank两种 :
<head>
<base target="blank">
</head>
特殊字符标签
HTML为这些特殊字符准备了专门的替代代码:
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | |
|
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ¥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| ✖️ | 乘号 | × |
| ➗ | 除号 | ÷ |
| ² | 平方2(上标2) | ² |
| ³ | 立方3(上标3) | ³ |
注释标签
<!-- 快捷方式是"command + /" -->
路径(重点、难点)
相对路径:
1.图像文件和HTML文件位于同一文件夹:只需输入图像的名称即可,如:
<img src="logo.gif"/>2.图像文件位于文件的下一级文件夹:输入文件夹名称和文件名,之间用"/"隔开,如:
<img src="img01/logo.gif"/>3.图片文件位于HTML文件的上一级文件夹:在文件名之前加入"../",如果是上两级,则需要使用"../../",以此类推,如:
<img src="../logo.gif"/>
绝对路径:
1.本地绝对路径(没人用)
2.网址绝对地址路径(网址地址)
列表标签
1.无序列表 ul (重点) : (无顺序符号)
<ul> //ul标签里只能放li标签
<li>列表1</li> //li标签里可以放其他标签
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>
<h4>水果蔬菜</h4>
<p>西红柿</p>
</li>
</ul>
2.有序列表 ol (了解) : (有顺序符号)常用于排行榜
<ol> //ol标签里只能放li标签
<li>中国</li> //li标签里可以放其他标签
<li>美国</li>
<li>英国</li>
<li>法国</li>
<li>俄罗斯</li>
</ol>
3.自定义列表 (理解) : 常用于对术语或名词进行解释和描述
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd> //dd标签围绕dt标签来说明
<dd>名词1解释2</dd>
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
</dl>
