• “若想要和网页做对比，点击F12，进入开发者模式，边学边看，尝试了解当前页面结构”

基本概念

• HTML

  • 超文本标记语言，由一套标记标签组成。

• 标签分类

  • 单标签：<标签名/>

  • 双标签：</标签名>

  • 带属性的标签： a代表标签类型为链接

• 标签元素

  • class：为html元素定义一个或多个类名(类名从样式文件引入)

  • id：定义元素的唯一id

    • 通过id可精准定位网页元素

  • style：规定元素的行内样式

  • title：描述了元素的额外信息 (作为工具条使用)

• 注释

• 基本网页骨架标签

  • 主要代码块写在body部分，head也可携带信息
  • 编码方式为UTF-8 或 GBK 支持中文编码

          代码块

常用标签

⭐下列演示代码，除第一个示例外，其余放在body里面实现！！！

• 标题标签：

  标题内容

  • h1到h6从大到小
  • 网页实例演示：(此实例为完整版，之后演示仅仅写Body部分)

h1的大小
h2的大小

• 段落标签：

  段落内容

  • 特点：使用即可自成一行
• 链接标签： 链接名

百度的链接

• 图片标签：

• 水平线标签：

  ---

下面是水平线
上面是水平线

• 换行标签：
  或者
  都行

人生
若只如初见
何事秋风悲画扇

• HTML 4 中语言推荐使用小写，XHTML 中强制使用小写。

HTML头部

⭐下列代码要放在head里面！！！

• base元素

  • 表示默认链接

  • target="_blank"在新窗口打开

• link元素

• style元素
  • 定义了HTML文档的样式文件引用地址

<！--假如为同级文件夹下的decorate的CSS文件，则可写为：-->

• 元素

• 元素
  • 插入js脚本

HTML图像

• alt属性
  • 为图像定义预备的可替换的文本
  • 下列语法执行后，若图片没有加载出来，则显示alt内定义的文字

•     
  • 定义图像中的可点击的区域

HTML列表

• 从上往下的列表
• 有序列表(带编号)：ol

奥力给
奥利奥

• 无序列表(带·)：ul

奥力给
奥利奥

• 自定义列表：dl为标志，列表项dt开始，dd结束

奥力给
..........奥利奥
奥特曼
..........奥利奥

HTML分块

• div
  • 文本外分块，常做页面布局
• span
  • 文本内分块，常做句子局部高亮作用

HTML表单

• 表单
  • input 元素
• 文本域

生日: 
年龄: 

• 密码文本域
  • 不会以明文显示

密码: 

• 单选按钮：

  China
  UK

        ·

• 复选按钮：

  China
  UK

• 提交按钮：

  心情: