1.站点的创建
站点的创建 ( 一个大的文件夹里面四个小的文件夹 : img 文件夹 , css 文件夹 , js 文件夹 , html 文件夹; 和一个小的页面文件: index.html 文件 )
2.快速创建页面结构
快捷键 : shift+!+tab
快捷键 : html:5
3.结构注释语句
快捷键 : ctrl+?
4.标签的含义
HTML 标签, 也称之为元素, 也称之为记号. 三个名字都是同样的意思
5 .标签的基本语法
5.1 单标签
基本语法 : <标签名字 属性="属性值" 属性="属性值" 属性 ="属性值">
5.2 双标签
基本语法 : <标签名字 属性="属性值" 属性="属性值" 属性="属性值"></标签名字>
6. 标签的特点
-
所有的标签都需要使用尖角号
-
单标签只有开始没有结束, 双标签有开始有结束
-
属性和属性值放在开始位置处
-
属性和标签名字之间必须带空格
-
属性和属性值之间使用等号链接
-
属性值需要带引号
-
每一组属性和属性值之间需要带空格
-
标签可以带一个属性也可以带多个属性甚至一个都不带
7.常用标签
7.1 标题标签
<!-- HTML中使用<h1>、<h2>、<h3>、<h4>、<h5>、<h6>等标签来定义标题部分,其语义格式如下 基本语法:<hn 属性="属性值">标题文档</hn> -->
<!-- 语法如下 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 运行结果如下 -->
7.2.段落标签
<!-- 浏览新闻网页的时候,经常能看见文章段落,经常使用<p>标签实现 基本语法:<p 属性="属性值">段落文本</p> -->
<!-- 语法如下 -->
<p>一段话·············</p>
<!-- 运行结果如下 -->
7.3 文本格式化标签
<!-- 文本格式化标签就是针对文本进行各种格式化的标签,如加粗,斜体,上标,下标等 -->
标签 | 文本显示效果 |
<strong> | 强调加粗 |
<em> | 强调斜体 |
<sub>/<sup> | 上标文本、下标文本 |
<del> | 加删除线方式 |
<ins> | 加下画线方式 |
7.3.1 strong
<!-- <strong>标签将文本定义为语气更强的强调语气 -->
<!-- 语法如下 -->
<strong>你好,世界</strong>
<!-- 运行结果如下 -->
7.3.2 em斜体
<!-- 语法如下 -->
<em>你好,世界</em>
<!-- 运行结果如下 -->
7.3.3 sub和sup 上标和下标
<!-- 上标:中间的字符在上方,多用于数学中的次方 -->
<!-- 下标:中间的字符在下方,多用于化学中的符号和公式 -->
<!-- 语法如下 -->
2<sup>5</sup>
H<sub>2</sub>O
<!-- 运行结果如下 -->
7.3.4 del和ins 删除线和下划线
<!-- 语法如下 -->
<del>你好,世界</del>
<ins>你好,世界</ins>
<!-- 运行结果如下 -->
7.4 引用标签
标签 | 作用 |
<blockquote> | 引用大段的段落解释 |
<q> | 引用小段的段落解析 |
<abbr> | 缩写或首字母缩略语 |
<address> | 引用文档地址信息 |
<cite> | 引用著作的标题 |
7.4.1 blockquote和q
<!-- 语法如下 -->
<q>那个夏天的蝉鸣比哪一年都聒噪,教室窗外枝桠疯长,却总也挡不住烈阳。</q>
<blockquote>
附中明理楼顶层的大课间向来吵闹,高二A班的学委从走廊漂移进教室,叫道:“报--咱班要进人了!""敬事房的小太监又来骗人了。”有人揶揄
"你他妈才小太监,我说真的。
"又不是期中又不是期末的,进什么人?"
“转校生啊。
</blockquote>
<!-- 运行结果如下 -->
7.4.2 abbr
<!-- 语法如下 -->
<abbr title="">某某</abbr>
<address>晋江文学城</address>
<cite>木苏里某某</cite>
<!-- 运行结果如下 -->
7.4.3 address和cite
<!-- 两个标签的效果都为斜体 -->
<!-- 语法如下 -->
<abbr title="">某某</abbr>
<address>晋江文学城</address>
<cite>木苏里某某</cite>
<!-- 运行结果如下 -->
7.5 水平线标签——hr
属性名 | 含义 | 属性取值 |
align | 水平对齐方式 | 可选择left,right,center三个值,默认为center,居中对齐 |
size | 水平线粗细 | 以像素(px)为单位,默认2px |
width | 水平线宽度 | 确定的像素值或浏览器窗口的百分比(默认为100%) |
color | 水平线颜色 | 颜色名称,十六进制#RGB,rgb(r,g,b) |
<!-- 语法如下 -->
<hr color="red" width="100px" size="3px" align="center" >
<!-- 运行结果如下 -->