HTML网页入门

导入

网页

什么是HTML

是超文本标记语言，不是编程语言，是标记语言
标记语言是一套标记标签
* 超文本：
    1. 可加入图片、动画、声音等（超越文本限制）
    2. 可从一个文件跳转到另一个文件（超链接）

网页形成

开发代码→浏览器显示代码（解析、渲染）→生成web界面

常用浏览器

IE浏览器、火狐、谷歌、Edge、Safari、Opera

浏览器内核

作用：读取网页内容，整理讯息，计算网页的显示方式并显示页面
[浏览器内核](images/image.png)
国内浏览器一般用Webkit/Blink

Web标准

为什么

浏览器不同，显示页面和排版不同

Web标准的构成

1. 结构：对网页元素进行整理和分类，eg：HTML
2. 表现：设置网页元素的版式、颜色、大小等外观样式，eg：CSS
3. 行为：网页模型的定义及交互的编写，eg：JavaScript
Web标准提出的最佳体验方案：结构、样式、行为相分离
即结构写到HTML文件中、表现写到CSS文件中、行为写到JavaScript文件中

基本语法
1.1 HTML标签是由尖括号包围的关键词，eg：<HTML>
1.2 HTML标签通常成对出现，即双标签，前一个是开始标签，后一个是结束标签 eg：<HTML></HTML>
1.3 有极少数单标签，eg：<br/>
标签关系
包含关系、并列关系

基本结构标签

第一个HTML
1.1 HTML标签：<HTML></HTML>是页面中最大的标签，即根标签
1.2 文档的头部：<head></head>head标签中必须要设置的标签是title
1.3 文档的标题：<title></title>即网页标题
1.4 文档的主体：<body></body>元素包含文档的所有内容，页面内容基本都放到body里面

tips：1.文档后缀名是.html或.htm
2.vscode:新建文件（Ctrl+N），保存（Ctrl+S），生成页面骨架结构（!+Tab键）

对vscode自动生成骨架结构的解释

<!DOCTYPE html>  //文档类型声明标签，意思是当前页面采取HTML5版本来显示网页
<html lang="en"> //语言种类
//en定义为英语，zh-CN定义为中文
<head>
    <meta charset="UTF-8"> //字符集规定使用哪种字符编码，如果不写会出现乱码
    //charset常用GB2312、BIG5、GBK、UTF-8(万国码)
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

常用标签

标签语义

标定标签的含义，可以让页面结构更清晰

标题标签`<h1>-<h6>`（一共六级）

<h1>我是一级标题</h1>

段落和换行标签

<p>我是一个段落标签</p>
tips：每一行前后都加上<p></p>
强制换行（单标签）：<br />

文本格式化标签

加粗 <strong></strong>或<b></b>
<strong>语义更强烈
倾斜 <em></em>或<i></i>
<em>语义更强烈
删除线 <del></del>或<s></s>
<del>语义更强烈
下划线<ins></ins>或<u></u>
<ins>语义更强烈

`<div>`和`<span>`标签

无语义，作为盒子装内容，都用来布局

<div>标签独占一行,大盒子（div表示分割、分区）
<span>标签一行可放多个，小盒子（span表示跨距）

图像标签和路径

图像标签
<img>是单标签
使用：<img src="图像url" />
src是<img>标签的必须属性，用于指定图像文件的路径和文件名

图像标签的其他属性：
· src 图片路径 必须属性
· alt 文本替换文本，图像不能显示的文字
· title 文本提示文本，鼠标放到图片上现实的文字
· width 像素设置图像的宽度
· height 像素设置图像的高度
· border 像素设置图像的边框粗细(一般通过css设定)

tips：
1.1 属性不分先后顺序，属性之间加空格
1.2 采取键值对格式，即 key=“value” 属性=“属性值”

路径
2.1 目录文件夹和根目录
目录文件夹：存放项目所需要的所有html文件和图片
根目录：打开目录文件夹的第一层
2.2 路径
2.2.1 相对路径
同一级：直接写图片名称
下一级：使用符号/ eg：images/image.png
上一级：使用符号…/
2.2.2 绝对路径
eg：D:\前端\HTML\笔记\images\image.png

超链接标签

<a>用于定义超链接

格式：
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
两个属性的作用：
href：必须属性，指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能
target：指定连接页面的打开方式，其中_self为默认值（在当前窗口打开链接），_blank为在新窗口的打开方式（在新窗口打开链接）
链接分类
2.1 外部标签
链接一定要加http://
2.2 内部标签
只写名字即可
2.3 空链接
<a href="#">空链接</a>
2.4 下载链接
如果href里面的地址是一个文件(.exe)或者压缩包(.zip)，就会下载这个文件
<a href="">下载地址</a>
2.5 网页元素链接
如文本、视频、图像、音频、表格等
<a href=" https://b23.tv/nYk5y5w"><img src="images/00-image.png" /></a>
2.6 锚点链接
在链接文本的href属性中，设置属性值为 #名字的形式，如<a href="#two">第二集</a>
在目标位置标签里面添加一个 id = 名字，如：<h3 id="two">第二集介绍</h3>

注释标签

注释
格式：
作用：给开发者看
特殊字符

空格符 &nbsp;
小于号(<) &lt;
大于号(>) &gt;
和号(&) &amp;
人民币(￥) &yen;
版权(©) &copy;
注册商标() &reg;
摄氏度(℃) &deg;
正负号(±) &plusmn;
乘号(✖) &times;
除号(➗) &divide;
平方(上标2) &sup2;
立方(上标3) &sup3;

表格标签

作用：展示数据
基本语法

<table> //用于定义表格的标签
    <tr> //用于定义表格中的行，必须嵌套在<table></rable>中
        <td>单元格内的文字</td> 
          //用于定义表格中的单元格，必须嵌套在<tr></tr>中
          //td指表格单元中的数据内容
        ···
    </tr>
    ···
 </table>

表头单元格标签
<th></th>突出重要性，加粗居中
表格属性（写在<table>标签里）
表格结构标签
功能：把表格分割成表格头部和表格主体
<thead>表示表格头部区域，<tbody>表示表格主体区域
合并单元格
6.1 合并方式
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
6.2 目标单元格
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码
6.3 步骤
1. 先确定时跨行还是跨列
2. 找到目标单元格，写上合并方式=合并的单元格数量 eg：<td colspan="2"></td>
3. 删除单元格

列表标签

作用：用来布局，更整齐
分类：无序列表，有序列表,自定义列表
2.1 无序列表<ul>
tips：
1. <ul>标签中只能放<li>标签
2. <li>标签相当于一个容器，可以容纳任何元素 eg：<p>,<table>等
3. 无序列表带有自己的样式属性，但在实际使用时，用css来设置
  语法格式：
```
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ···
</ul>
```
2.2 有序列表<ol>
tips：
1. <ol>标签中只能放<li>标签
2. <li>标签相当于一个容器，可以容纳任何元素
3. 有序列表带有自己的样式属性，但在实际使用时，用css来设置
  语法格式：
```
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ···
</ol>
```
2.3 自定义列表<dl>
常用于对术语或名词进行解释和描述
tips：
1. <dl>标签中只能放<dt>,<dd>标签
2. <dt><dd>无数量限制，一般是一个<dt>对应多个<dd>
  语法格式：
```
<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>
```

表单标签

表单的组成：表单域、表单控件（表单元素）、提示信息

表单域<form>把它范围内的表单元素信息提交给服务器
语法格式：

<form action="表单地址" method="提交方式" name="表单域名称">
    各种表单元素控件
</form>

在这里插入图片描述

表单控件（表单元素）
2.1 <input />输入表单元素
- <input type="属性值" />
  tips：
  1. <input />是单标签
  2. type属性设置不同的属性值用来指定不同的控件类型
- <input name="属性值" />
  属性值由用户自定义，定义input元素的名称
- <input value="属性值" />
  属性值由用户自定义，定义input元素的值
- <input checked="checked" />
  属性值为checked，规定此input元素首次加载时应当被选中
- <input maxlength="属性值" />
  属性值为正整数，规定输入字段中的字符的最大长度
tips:
1.name和value是每个表单元素都有的属性值，主要给后台人员使用
2.name是表单元素的名字，要求单选按钮和复选按钮都要有相同的name值
3.checked属性主要针对单选按钮和复选框，一打开页面就可以默认选中某个元素，不需要用户点击

2.1拓展 <label>标签，双标签
为input元素定义标注，用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将光标转到或者
选择对应的表单元素上，用来增加用户体验
语法格式：
```
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
```
核心：<lable>标签中的for属性应该与相关元素的id属性相同

2.2 <select>下拉表单元素，双标签
有多个选项供用户选择时，为了节约空间，可使用下拉表单
使用格式：
```
<form>
    名字：
    <select>
        <option>选择1</option>
        <option>选择2</option>
        <option>选择3</option>
        ···
    </select>
</form>
```
tips：
1. <select>中至少包含一对<option>
2. 在<option>中定义selected="selected"时，当前项即为默认选中项
2.3 <textarea>表单元素
当用户输入内容较多时，就不能使用文本框表单，应该使用<textarea>标签，该标签可定义多行文本输入
语法格式：
```
<form>
    <textarea rows="" cols="20">//文本内容</textarea>
</form>
```
tips:
1. rows=“显示的行数”，cols=“每行中的字符数”，在实际开发中用css改变大小