HTML入门-页面结构&基础标签

一、什么是html？

html 超文本标记语言

• 文本：文字元素

• 超文本：视频，图片，音乐，链接

• 标记符：由左书名号和右书名号包裹一个标签名字的构造-----<p>

• 语言：人与电脑交流的语言方式

二、动态网页与静态网页区别？

• 动态网页

  编辑好的前端代码随着时间的变化，显示的内容在变化（你没有再次修改任何 代码）-----上线的产品页面都是动态页面

• 静态网页

  编辑好的前端代码随着时间的变化，显示的内容没有任何变化

三、三个版本和一个标准

• html4.0.1

  经典版本----80%

• xhtml1.0

  语法严谨—3%-5%

• html5

  最新版本-----平台

• W3C

  万维网联盟

四、html5的扩展

• 广义的html5 ：html，css，javascript—组合技术

• 狭义的html5：HTML技术

五、html创建文件（重点）

1. 创建一个文本文档文件
2. 将后缀名改为.html
3. 在文件中添加标签内容
4. 保存后通过浏览器打开查看

六、html格式（重点）

• 双标签

  语法结构：

  <元素名>内容</元素名>

• 单标签

  语法结构

  <元素名>（开始就是结束）

• 标签属性

  原理：为了给当前标签的内容进行细节的样式设置
  必须写在开始标签内
  语法结构：

  <开始标签 属性名="属性值">内容</结束标签>

  size----改变文字的字号（字体大小）
  class----类名----（给当前标签取的别名，可以多个存在）
  id----唯一性----整个页面（html文档）
  style----样式属性----利用它实现css样式修改
  title----提示性文本

七、html基本结构（重点）

1. 完成文件创建的步骤

2. 写声明标签告知浏览器我当前书写的html版本，让其按照对应版本进行编译

3. 书写

4. 在html标签中书写

5. 在html标签中书写

八、注释

语法结构

<!-- 注释内容 -->

特点：不会再网页上显示只是在后台为编程人员提供说明

九、基础标签（重点）

• hn标签----标题标签

  注意：n代表的是1-6的数字
  一般用来作为文章内容的标题

  语法结构

  <hn>内容</hn>

• p标签----段落标签

  利用它来实现一段文本的内容

  语法结构

  <p>文本内容</p>

• br标签----换行标签

  语法结构

  文本<br>文本

• hr标签----水平分割标签

  语法结构

  文本 <hr> 文本

十、文本标签

• 重点掌握标签（重点）

1. strong文字加粗标签

   <strong>内容</strong>

2. em文字倾斜标签

   <em>内容</em>

3. del删除样式标签

   <del>内容</del>

• 了解标签

4. 文字加粗标签

   <b>内容</b>

5. 文字倾斜标签

   <i>内容</i>

6. 相对字号增减标签

   <small>内容</small>
<big>内容</big>

7. 保留格式标签

   <pre>内容</pre>

8. 下滑线标签

   <u>内容</u>

9. 上下标标签

   <sub>内容<sub>
<sup>内容<sup>

十一、布局标签

• div标签

  块级元素标签----盒子标签

• span标签

  行内元素标签----布局盒子内部文本样式的改变

• 区别

  块级元素默认自动占满整行，行内元素文本占多少我就占多少

十二、特殊符号

•  ----英文字符空格
•  ----中文字符空格
• >----大于 >
• <----小于 <