1.HTML语法规范

1365 views

1.HTML语法规范

1.1 基本语法概述

  1. HTML标签是由尖括号包围的关键词，例如<html>
  2. HTML 标签通常是成对出现的，例如<html>和</html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签
  3. 有些特殊的标签必须是单标签（极少情况），例如<br/>

1.2 标签关系

包含关系；并列关系

1.3 第一个HTML网页

每个网页都会有一个基本的结构标签(骨架标签) , 页面内容也是在这些基本标签上书写。HTML页面也称为HTML文档

<html>   # HTML标签：页面中最大的标签，根标签
 <head>   # 文档的头部标签：注意在head标签中我们必须要设置的标签是title
  <title>我的第一个页面</title>  
  # 文档的标题标签：让页面拥有一个属于自己的网页标题
 </head>
 <body>   #文档的主体标签：元素包含文档的所有内容，页面内容基本都是放到body里面的
  你好！
 </body>
</html>

1.4 VSCode

1.4.1 使用

新建文件 → 保存为.html文件 → 输入!后Tab → 右键“Open In Default Browser”

1.4.2 VSCode工具生成骨架标签新增代码

1.< !DOCTYPE>标签

不是一个HTML标签，它就是文档类型声明标签。

作用：告诉浏览器使用哪种HTML版本来显示网页。

位置：文档中的最前面的位置,处于<html>标签之前。

<!DOCTYPE html> 意思是：当前页面采取的是HTML5版本来显示网页

2.lang语言

用来定义当前文档显示的语言。

< html lang=“en”> 定义语言为英语（也可以显示中文）

< html lang="zh-CN"> 定义语言为中文（也可以显示英文）

3.charset 字符集

字符集(Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。在<head>标签内,可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。

< meta charset="UTF-8" /> //不写会乱码

charset常用的值有: GB2312、BIG5、 GBK和UTF-8 ,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符。

2. HTML标签

2.1 HTML常用标签

1.标题标签

<h1>—<h6> <h1> 我是一级标题 </h1> // 加粗一行显示

h为单词head的缩写,意为头部、标题。

2.段落标签

<p> 定义段落,它可以将整个网页分为若千个段落，段落间有空隙。

<p>我是一个段落标签</p>

p为单词paragraph [' paeragraef]的缩写,意为段落。

3.换行标签

<br/> 强制换行，无间隙，单标签

单词break的缩写,意为打断、换行。

2.2 文本格式化标签

图片

2.3 < div>和< span>标签

<div>和<span>是一个盒子，用来装内容的。

<div>这是头部</div> 大盒子，一行一个 （div是division的缩写，表示分割、分区）

<span>今日价格</span> 小盒子，一行多个（span意为跨度、跨距）

2.4 图像标签

<img src="图像URL" /> 插入一张名为“图像URL”的图片

img是image的缩写,意为图像

src是<img>标签的必须属性，指定图像文件的路径和文件名。

<img src="img. jpg" alt=" 图片未显示成功” title=" 这是一张照片" width= "500" border= "15"/>

相对路径：

图片

2.5 超链接标签

<a href="跳转目标” target=" 目标窗口的弹出方式">文本或图像</a>（a为单词anchor的缩写，意为锚）

图片

外部链接：<a href= "http://www.qq.com" target="_blank"> 腾讯</a>

内部链接：<a href="gongsijianjie.htm1" target="_blank">公司简介</a>

空链接：<a href="#">公司地址</a>

下载链接：<a href="img.zip">下载文件</a>

网页元素的链接：<a href="http://www.baidu.com"><img src="img.jpg" /></a>

锚点链接：<a href="#live">个人生活</a>；<h3 id="live">个人生活</h3>

2.6 注释和特殊字符

注释：< !--注释语句--> 快捷键: ctrl + /

特殊字符：

图片

2.7 表格标签（展示数据）

2.7.1 基本标签

图片

  1. <table> </table>是用于定义表格的标签。
  2. <tr> </tr>标签用于定义表格中的行,必须嵌套在<table> </table>标签中。（table row）
  3. < td> < /td>用于定义行中的单元格,必须嵌套在<tr> </tr>标签中。（table data）
  4. <th>标签表示HTML表格的表头部分，会加粗居中。（table head）

图片

2.7.2 表格属性

图片

图片

<thead>标签表格的头部区域、<tbody>标签表格的主体区域

图片

2.7.3 合并单元格

合并单元格方式：

● 跨行合并: rowspan= "合并单元格的个数”

● 跨列合并: colspan= "合并单元格的个数"：<td colspan="2" > </td>

目标单元格: (写合并代码)

●跨行：最上侧单元格

●跨列：最左侧单元格

2.8 列表标签（布局）

2.8.1 无序列表

<ul></ul>标签：无序列表

<li></li>标签：列表项

图片

1.无序列表的各个列表项之间没有顺序级别之分,并列的。

2.<ul></ul>中只能嵌套<li></li>，<li></li>内部可以容纳所有元素。

2.8.2 有序列表

<ol> </ol>标签：有序列表

图片

1.有序列表的各个列表项之间有顺序级别之分。

2.<ol> </ol>中只能嵌套<li></li>，<li></li>内部可以容纳所有元素。

2.8.3 自定义列表

标签：自定义列表

图片

  1. <dl> </dl>里面只能包含<dt>和<dd>。
  2. 通常<dt>对应多个<dd>。

图片

2.9 表单列表（收集信息）

表单：表单域、表单控件(也称为表单元素) 、提示信息

图片

2.9.1 表单域

<form> 标签：表单域，表示包含表单元素的区域，实现用户信息的收集和传递给服务器。

图片

常用属性：

图片

2.9.2 表单控件(表单元素)

表单元素：允许用户在表单中输入或者选择的内容控件

① input输入表单元素（收集用户信息）

图片

● <input/> 标签为单标签

● type 属性，通过设置不同的属性值来指定不同的控件类型

图片

● 其他属性

图片

  1. name 和 value是每个表单元素都有的属性值，主要给后台人员使用
  2. name 表单元素的名字，要求单选按钮和复选框要有相同的name值
  3. checked属性主要针对于单选按钮和复选框，一打开页面就可以默认选中某个表单元素

图片

图片

● 表单标签

<label>标签：绑定一个表单元素，当点击

图片图片

② select 下拉表单元素

图片

图片

③ textarea 文本域元素

<textarea>标签：多行文本输入的控件（留言板，评论等）

图片

3 学习网站

●W3C: http://www.w3school.com.cn/

●MDN: https://developer.mozilla.org/zh-CN/