【温故知新】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="data: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>

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

【温故知新】HTML学习笔记（上）相关推荐

nodejs学习笔记(上)
nodejs学习笔记 (上) 通过学习需要做到的是了解前后端是如何进行交互的 nodejs也是使用javaScript进行编写的 javaScript在不同的运行环境中有不同的作用在浏览器内核中 ...
学海灯塔新增学习笔记上传功能
又经过一天的努力,学海灯塔学习笔记上传功能实现.欢迎访问我们的学海灯塔学习笔记这一模块的功能和课程文件类似,由同学们上传自己的学习笔记,用户可以下载,并且可以对笔记进行打分,后期将增加文件讨论功能. ...
Python课程学习笔记上
笔记目录学前准备 Python解释器安装包下载安装 Pycharm 下载常用的快捷键 Python程序执行机制语法基础注释和中文乱码变量数据类型运算符数值运算符复合运算符比较运 ...
React学习笔记(上)
一.React文件的创建(不使用脚手架进行文件的创建过程) 1.1.这里的React文件是一个html文件,或者是一个js文件,需要安转相关依赖 React:是React的核心包 React-dom: ...
JVM学习笔记上(概述-本地方法栈)
背景前一阵跟着宋红康的视频学了学JVM,视频没有更新完,所以也没学完,这里记录一下笔记 JVM概述 JVM位置: 运行在操作系统之上相对于java语言,JVM的位置如下所示对于安卓的Davli ...
计算机网络基础学习笔记(上)
学习视频在观看学习视频前,可以先了解一下大概:互联网是如何运作的随看随记 TCP和UDP MAC和IP地址,从几个不同的角度讲的: CSDN博客知乎博客园从我的角度来看,MAC地址是区分IP ...
[学习笔记]上下界网络流
有的时候,网络流建模要考虑某些边必须选择若干次,又不能多于若干次,而且不太容易转化成比较好的限制模型, 就简单粗暴地给每条边定一个流量的上下界,求在满足上下界的基础上的一些问题. 大概有以下几种. 基 ...
CreateJS基础学习笔记(上)
1.CreateJS介绍了解CreateJS 1.CreateJS: 一款HTML5游戏开发的引擎 CreateJS是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低H ...
jQuery基础学习笔记(上)
1.简介及语法认识jQuery 1.jQuery: jQuery库可以通过一行简单的标记被添加到网页中. 2.什么事jQuery: jQuery是一个JavaScript函数库. 3 ...
git学习笔记(上)
1 安装 win安装地址安装之后自报家门 $ git config --global user.name "Your Name" $ git config --global u ...

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

【温故知新】HTML学习笔记（上）相关推荐

最新文章

热门文章