【温故知新】HTML学习笔记（上）

HTML固定结构：

<html> 
      <head>
            <title> </title>
      </head>
      <body>
      </body>    
</html>

HTML标签分类：

1、双标签 <head> </head> 一对夫妻
2、单标签 <br /> 数量非常少

其中“/”称之为关闭符

HTML标签关系：

1、嵌套关系（父子关系）

<html> 
      <head>
            <title> </title>
      </head>    
</html>

2、并列关系（兄弟关系）

<head> </head>
<body> </body>

用记事本来书写开发效率很低，很容易忽视错误。实际工作中，为了效率，推荐使用Subline工具。
生成HTML骨架快捷键：
输入“html:5”，按下“TAB”键。
输入“!”，按下“TAB”键。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝网 淘 你喜欢</title>
</head>
<body>
    双十二马上要来了！
</body>
</html>

预览时，直接单击鼠标右键，在浏览器中打开即可。

<!DOCTYPE html> ：HTML的版本号，这里表示HTML 5的版本，目前基本都是使用该版本。
lang="en" ：语言，虽然这里是"en" ，但是也可以录入中文。
<meta charset="UTF-8"> ：字符集，"UTF-8"是目前最常用的字符集编码方式，常用的还有GBK和GB2312，GB2312（国标）是简体中文，包括了6763个汉字，BIG5是为了繁体中文港澳台等使用，GBK包含全部中文字符，是GB2312的扩展，加入了繁体字的支持，并且兼容GB2312，而UTF-8则包含了全世界所有国家用到的字符。

HTML标签语义化

就是白话，一眼看去，就知道那个是重点，结构是什么，知道每块的内容是干什么的。核心是在合适的地方给一个合理的标签，它遵循的原则是，先确定语义的HTML，再选合适的CSS。

HTML常用的标签

HTML的标签有很多，正常学习时查询手册即可。
这里首先介绍一下基本的排版标签。
1、标题标签
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
HTML有6个等级的标题，依次变小，可作为标题使用，并且依据重要性递减。

2、段落标签
<p> 文本内容 </p>
默认情况下，文本在一个段落中会根据浏览器窗口大小自动换行。

3、水平线标签
<hr /> 是一个单标签
就是一条线。

4、换行标签
<br /> 是一个单标签
就是强制换一行，直接按回车/空格是没有效果的，区别于段落标签的是行间距。

5、div和span标签
div和span没有语义，是我们网页布局的两个主要盒子，比如CSS+DIV。
<div> </div> : div一行只能有一个
<span> </span> : span一行可有多个

6、文本格式化标签
粗体： <strong> </strong> 语义强烈，推荐使用
<b> </b>
斜体： <em> </em> 语义强烈，推荐使用
<i> </i>
加删除线： <del> </del> 语义强烈，推荐使用
<s> </s>
加下划线： <ins> </ins> 语义强烈，推荐使用
<u> </u>

7、图像标签
<img src="图像URL" /> 是一个单标签
src是其中一个属性，表明图像的路径。
alt是其中一个属性，是替换文本（提示文本），要是图像显示不出来，可以以文字进行提示。
titile是其中一个属性，鼠标放上去（悬停时）会有说明文本。
width/height是其中的属性，表明图像的宽度和高度，正常改一个值就可以了，自动等比缩放。
border是其中一个属性，可以给图像添加边框。

8、链接标签
<a herf="跳转目标" target="目标窗口的弹出方式"> 这里放文本或者图像 </a>
href是属性，指定链接目标的url地址，外部链接http协议不能省略（例如http://www.baidu.com），要是链接已经有了，但是还不可以跳转，那就以“#”代替。
target是属性，指定链接页面的打开方式，其取值有self（默认 “_self”）和blank（新窗口打开“_blank”）两种。

9、锚点定位
通过定位（创建锚点）的方式，快速去往页面某一个位置（目标内容）。
分为两步实现：
使用<a href="#id名"> 链接文本 </a> 创建链接文本
使用相应的id名标注跳转目标的位置（使用id属性 id="id名"）

10、base标签
<base /> 是一个单标签
在head部分使用，比如页面中有多个链接，可以设置整体链接的打开状态。

<head>
      <base target="_blank" />
</head>

11、特殊字符标签
空格： 
小于号<：<
大于号>：>
和号&：&
人民币¥：¥
版权©：©
注册商标®：®
摄氏度°：°
正负号±：±
乘号X：×
除号÷：÷
平方（上标2）²：²
立方（上标3）³：³

12、注释标签

多写注释是非常好的写代码习惯，浏览器不会执行。

13、路径介绍

相对路径

在同一级路径：直接输入 <img src="aa.jpg" />
在下一级路径：需要经过相应文件夹，以“/”隔开 <img src="images/aa.jpg" />
在上一级路径：上一级需要输入“../”<img src="../aa.jpg" />

绝对路径

完整的路径地址 <img src="D:\project\images\aa.jpg" />
这种方式基本不会用到。

14、列表标签
容器里面装载着文字或者图表的一种形式叫列表。
列表最大的特点是整齐有序。
分为以下三类：

无序列表：依次罗列，没有顺序，<ul>标签里面只能放<li>，而在<li>里面则可以容纳所有标签，无序列表会带有自己的样式属性，这部分是CSS的功能；

有序列表：有上下顺序，<ol>标签里面只能放<li>，而在<li>里面则可以容纳所有标签

<ol>，会自动带有1、2、3、4...的顺序，具体样式也是在CSS里面调整；
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>

自定义列表：常用于对术语或者名词进行解释和描述，列表项前面没有任何项目；

SAP剑客

发布了1987 篇原创文章 · 获赞 3853 · 访问量 1014万+

他的留言板关注

【温故知新】HTML学习笔记（上）

猜你喜欢