HTML基础语法
HTML基础语法
一、网页
-
网页是指在英特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合
-
HTML不是一种编程语言，而是一种标记语言（标记标签）；HTML是指超文本标记语言——可以加入图片、音乐等超越了文本限制|超级链接文本，它是用来描述一个网页的一种语言
-
浏览器：IE,Chrome,Firefox
- 浏览器内核（渲染引擎）：负责读取网页内容，整理信息，计算网页的显示方式并显示页面
-
web标准：结构、表现和行为相分离
-
标准 说明 结构 结构用于对网页元素进行整理和分类，HTML等 表现 表现用于设置网页元素的板式、颜色、大小等外观样式，CSS等 行为 行为是指网页元素的定义及交互的编写，JavaScript等
-
页面整体分为两部分：
-
一部分是head部分，主要是页面的整体信息和配置，内容不会出现在浏览器内部。
-
一部分是body部分，这部分内容则会在浏览器中展示出来
二、HTML标签
1、标签语法规范
HTML标签是有尖括号包围的关键字
HTML通常是成对出现的，称为双标签
<!-- <html><head><title><body><table><tr><td><span><p><form><h1><h2><h3><h4><h5><h6><object><style><b><u><strong><i><div><a><script><center> -->
<!-- 语法规范 -->
<html>
</html>
有些特殊的标签必须是单个标签，称为单标签
<br><hr><img><input><param><meta><link>
标签关系
- 包含关系
<head>
<title></title>
</head>
- 并列关系
<head></head>
<body></body>
2、HTML基本结构标签
（骨架标签）
| 标签名 | 定义 | 说明 |
|---|---|---|
| <html></html> | HTML标签 | 页面最大的标签，我们称为根标签 |
| <head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| <body></body> | 文档的主体 | 元素包括文档的所有内容，页面内容基本都是放到body标签里面的 |
<!DOCTYPE html> <!-- 文档类型声明标签 -->
<html lang="en"> <!-- 设定网页的语言，中文为lang="zh-CN" -->
<head>
<meta charset="UTF-8"> <!-- 编码格式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <!-- 文档的标题 -->
</head>
<body>
</body>
</html>
3、开发工具
VS Code的使用
快捷方式
- VS Code生成HTML骨架的快捷方式：!
-
新建文件：Ctrl + N
-
保存文件：Ctrl + S
-
格式化代码：Shift + Alt + F
插件的安装
- Chinese插件：汉化VS Code
- Open in Browser插件：右键选择浏览器打开
- Auto Rename Tag插件：自动重命名配对HTML/XML标签
4、HTML常用标签
语义标签
-
标题标签<h1> - <h6>（head）——作为标题使用，并且重要性依次递减
-
<h1>一级标签</h1>
-
-
段落标签<p>（paragraph）——可以把HTML文档分为若干个段落
-
<p>我是段落标签</p>
-
-
换行标签<br>（break）——文本强制换行
-
开始<br>换行
-
-
文本格式化标签
语义 标签 说明 加粗 <strong></strong>或<b></b> 更推荐使用<strong>标签加粗，语义更强烈 倾斜 <em></em>或<i></i> 更推荐使用<em>标签倾斜，语义更强烈 删除线 <del></del>或<s></s> 更推荐使用<del>标签添加，语义更强烈 下划线 <ins></ins>或<u></u> 更推荐使用<ins>标签添加，语义更强烈 -
<strong>加粗</strong> <em>倾斜</em> <del>删除线</del> <ins>下划线</ins>
-
盒子标签
没有语义，一个盒子，用来装内容的。
- <div>：用来布局，一行只能放一个<div>，大盒子
- <span>：用来布局，一行可以放多个<span>，小盒子
图像标签
语法：<img src="图像URL">
| 属性 | 说明 |
|---|---|
| src | 必须属性，指定图片文件的路径和文件名（超链接） |
| alt | 替换文本，图片不能显示时显示该内容（文本） |
| title | 提示文本，鼠标放到图像上时显示的文字（文本） |
| width | 设置图像的宽度（像素值或百分比） |
| height | 设置图像的高度（像素值或百分比） |
| border | 设置图像边框的粗细（像素值） |
图像标签可以拥有多个属性，必须写在标签名后面
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
属性采取键值对的格式，即key="value"的格式，属性="属性值"
路径
- 目录文件夹：就是普通的文件夹，里面只不过是放了我们做网页所需要的相关素材，比如html文件、图片等
- 根目录：打开目录文件夹的第一层就是根目录
- 相对路径：以html文件所在位置作为参考基础，而建立的目录路径
- 同级相对路径：文件名
- 下一级相对路径：./文件夹/文件名
- 上一级相对路径：../文件名
- 绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址（必须属性），当为标签应用href属性时，它就有了超链接功能 |
| target | 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口打开 |
链接类型
| 类型 | 作用 |
|---|---|
| 空链接（#） | 使得文本等元素呈现链接形式 |
| 外部链接 | 访问外部网站 |
| 内部链接 | 网站内部页面之间的相互链接，直接链接内部名称即可 |
| 下载链接 | 如果href里面地址是一个文件或者压缩包，会下载文件 |
| 网页元素链接 | 在网页中的各种网页元素，如文本、图像、表格、音频、视频等（当做文本类型放入即可）都可以添加超链接 |
| 锚点链接 | 点击链接，可以快速定位到页面中的位置 |
锚点链接的实现
- 在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#test">第二级</a>
- 找到目标位置标签，里面添加id="刚才的名字"，如<h3 id="test">第二级目录</h3>
注释标签
<!-- 要注释的内容 --> 快捷键：Ctrl + /
特殊字符
| 字符 | 数字参考 | 实体参考 | 描述 |
| " | " | " | Quotation mark |
| & | & | & | Ampersand |
| < | < | < | Less than |
| > | > | > | Greater than |
| (空白) |   | | Non-breaking space |
| ¡ | ¡ | ¡ | Inverted exclamation |
| ¢ | ¢ | ¢ | Cent sign |
| £ | £ | £ | Pound sterling |
| ¤ | ¤ | ¤ | General currency sign |
| ¥ | ¥ | ¥ | Yen sign |
| ¦ | ¦ | ¦ | broken vertical bar |
| § | § | § | Section sign |
| ¨ | ¨ | ¨ | Diæresis / umlaut |
| © | © | © | Copyright |
| ª | ª | ª | Feminine ordinal |
| « | « | « | Left angle quote |
| ¬ | ¬ | ¬ | Not sign |
| | ­ | &sny; | Soft hyphen |
| ® | ® | ® | Registered trademark |
| ¯ | ¯ | ¯ | Macron accent |
| ° | ° | ° | Degree sign |
| ± | ± | ± | Plus or minus |
| ² | ² | ² | Superscript two |
| ³ | ³ | ³ | Superscript three |
| ´ | ´ | ´ | Acute accent |
| µ | µ | µ | Micro sign |
| ¶ | ¶ | ¶ | Paragraph sign |
| · | · | · | Middle dot |
| ¸ | ¸ | ¸ | Cedilla |
| ¹ | ¹ | &supl; | Superscript one |
| º | º | º | Masculine ordinal |
| » | » | » | Right angle quote |
| ¼ | ¼ | ¼ | Fraction one quarter |
| ½ | Ç | ½ | Fraction one half |
| ¾ | ¾ | ¾ | Fraction three-quarters |
| À | À | ¿ | Inverted question mark |
| À | À | À | Capital A, grave accent |
| Á | Á | Á | Capital A, acute accent |
| Â | Â | Â | Capital A, circumflex |
| Ã | Ã | Ã | Capital A, tilde |
| Ä | Ä | Ä | diæresis / umlau |
| Å | Å | Å | Capital A, ring |
| Æ | Æ | Æ | Capital AE, ligature |
| Ç | Ç | Ç | Capital C, cedilla |
| È | È | È | Capital E, grave accent |
| É | É | É | Capital E, acute accent |
| Ê | Ê | Ê | Capital E, circumflex |
| Ë | Ë | Ë | diæresis / umlau |
| Ì | Ì | Ì | Capital I, grave accent |
| Í | Í | Í | Capital I, acute accent |
| Î | Î | Î | Capital I, circumflex |
| Ï | Ï | &Imul; | diæresis / umlau |
| Ð | Ð | Ð | Capital ETH, Icelandic |
| Ñ | Ñ | Ñ | Capital N, tilde |
| Ò | Ò | Ò | Capital O, grave accent |
| Ó | Ó | Ó | Capital O, acute accent |
| Ô | Ô | Ô | Capital O, circumflex |
| Õ | Õ | Õ | Capital O, tilde |
| Ö | Ö | Ö | diæresis / umlau |
| × | × | × | Multiplication sign |
| Ø | Ø | Ø | Capital O, slash |
| Ù | Ù | Ù | Capital U, grave accent |
| Ú | Ú | Ú | Capital U, acute accent |
| Û | Û | Û | Capital U, circumflex |
| Ü | Ü | Ü | diæresis / umlau |
| Ý | Ý | Ý | Capital Y, acute accent |
| Þ | Þ | Þ | Capital Thorn,Icelandic, |
| ß | ß | ß | German sz |
| à | à | à | Small a, grave accent |
| á | á | á | Small a, acute accent |
| â | â | â | Small a, circumflex |
| ã | ã | ã | Small a, tilde |
| ä | ä | ä | diæresis / umlau |
| å | å | å | Small a, ring |
| æ | æ | æ | Small ae ligature |
| ç | ç | ç | Small c, cedilla |
| è | è | è | Small e, grave accent |
| é | é | é | Small e, acute accent |
| ê | ê | ê | Small e, circumflex |
| ë | ë | ë | diæresis / umlau |
| ì | ì | ì | Small i, grave accent |
| í | í | í | Small i, acute accent |
| î | î | î | Small i, circumflex |
| ï | ï | ï | diæresis / umlau |
| ð | ð | ð | Small eth, Icelandic |
| ñ | ñ | ñ | Small n, tilde |
| ò | ò | ò | Small o, grave accent |
| ó | ó | ó | Small o, acute accent |
| ô | ô | ô | Small o, circumflex |
| õ | õ | õ | Small o, tilde |
| ö | ö | ö | diæresis / umlau |
| ÷ | ÷ | ÷ | Division sign, |
| ø | ø | ø | Small o, slash |
| ù | ù | ù | Small u, grave accent |
| ú | ú | ú | Small u, acute accent |
| û | û | û | Small u, circumflex |
| ü | ü | ü | diæresis / umlau |
| ý | ý | ý | Small y, acute accetn |
| þ | þ | þ | Small thorn, Icelandic |
| ÿ | ÿ | ÿ | diæresis / umlaut |
表格标签
- <table></table>：用于定义表格标签
- <tr></tr>：标签用于定义表格中的行，必须嵌套在<table>标签中
- <td></td>：用于定义表格中的单元格，必须嵌套在<tr>标签中
- <th></th>：表示HTML表格中的表头部分，一般位于第一行或第一列
<table align="center" border="1">
<tr><th>属性名</th><th>属性值</th><th>描述</th></tr>
<tr><td>align</td><td>left、center、right</td><td>规定表格相对周围元素的对齐方式</td></tr>
<tr><td>border</td><td>1 或 ""</td><td>规定表格单元格之间是否拥有边框，默认为""，表示没有边框</td></tr>
<tr><td>cellpadding</td><td>像素值</td><td>规定单元格边沿与其内容之间的空白，默认像素1</td></tr>
<tr><td>cellspacing</td><td>像素值</td><td>规定单元格之间的空白，默认2像素</td></tr>
<tr><td>width</td><td>像素值或百分比</td><td>规定表格的宽度</td></tr>
</table>
表格的属性（了解）
属性要写到<table>里面去
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1 或 "" | 规定表格单元格之间是否拥有边框，默认为""，表示没有边框 |
| cellpadding | 像素值 | 规定单元格边沿与其内容之间的空白，默认像素1 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
结构标签
在表格标签中，分别用：
-
<thead>标签表示表格的头部区域：标签内部必须拥有<tr>标签，一般位于第一行
-
<tbody>标签表示把表格的主体区域：主要放数据的主体
其要在<table>标签里面
合并单元格
-
方式
-
跨行合并：rowspan="合并单元格的个数"
-
跨列合并：colspan="合并单元格的个数"
-
-
目标单元格
-
跨行：最上侧单元格为目标单元格，写合并代码
-
跨列：最左侧单元格为目标单元格，写合并代码
-
-
步骤
-
先确定跨行合并还是跨列合并
-
找到目标单元格，写上合并方式=合并单元格的数量，例如：<td colspan="2"></td>
-
删除多余的单元格
<table> <tr><th></th><th clospan="2"></th></tr> <tr><td></td><td></td><td></td></tr> </table> -
列表标签
无序列表*
在HTML标签中，<ul>（unordered list）标签表示HTML页面中项目的无序列表，一般会以项目符号呈现表项，而列表使用<li>标签定义列表项
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>···</li>
</ul>
- 无需列表的各个列表项之间没有顺序区别之分，是并列的
- <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签输入其他标签或者文字的做法是不允许的
- <li>与<ul>之间相当于一个容器，可以容纳所有的元素
- 无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置
有序列表
在HTML标签中，<ol>（ordered list）标签用于定义有序列表，列表顺序以数字来显示，并且使用<li>标签来定义列表项
<ol>
<li>列表1</li>
<li>列表2</li>
<li>···</li>
</ol>
- <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不允许的
- <li>与</li>之间相当于一个容器，可以容纳所有元素
- 有序列表会带有自己样式属性，但在实际使用时，我们会使用CSS来设置
自定义列表*
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
在HTML标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用
<dl>
<dt>名词</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
</dl>
- <dl></dl>里面只能包含<dt>和<dd>
- <dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>
表单标签
使用表单目的是为了搜集用户信息
在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成
表单域
表单域是一个包含表单元素的区域
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的搜集和传递
<form>会把它范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">
各种表单控件
</form>
在我们写表单元素之前，应该有个表单域把他们进行包含
表单域是<form>标签
常用属性
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
表单控件
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件
-
input输入表单元素
-
在<input>标签（单标签）中，包含一个type属性，根据不同type属性值，输入字段拥有很多形式
-
（提示：）<input type="属性值"> <!--比如--> name:<input type="text" name="username"> passwd:<input type="password" name="pwd"> sex:boy<input type="radio" name="sex">gril<input type="radio" name="sex">属性值 描述 button 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） checkbox 定义复选框 file 定义输入字段和浏览按钮，供文件上传 hidden 定义隐藏的输入字段 image 定义图像形式的提交按钮 password 定义密码字段。该字段中的字符被掩码 radio 定义单选按钮 reset 定义重置按钮。重置按钮会清除表单中的所有数据 submit 定义提交按钮。提交按钮会把表单数据发送到服务器 text 定义单行的输入字段，用户可以在其中输入文本，默认宽度为20个字符 date 选择时间，年月日 - radio：选项 <input type="radio">------------------|\checked="checked"此属性当打开页面时可以默认选中这个按钮
- checkbox：选项 <input type="checkbox" >-----|/
-
除type属性外，<input>标签还有其他很多属性
属性 属性值 描述 name 由用户定义 定义input元素的名称 value 由用户定义 规定input元素的值，默认显示的文字 checked checked 规定此input元素首次加载时应当被选中 maxlenth 正整数 规定输入字段中的字符的最大长度 name和value是每个表单元素都有的属性值，主要给后台人员使用
name表单元素的名字，要求单选按钮和复选框要有相同的name值
<label>标签：其为input元素定义标注（标签）
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应表单元素上，用来增加用户体验
<label for="sex">男</label>
<input type="radio" id="sex" name="sex">
-
-
select下拉表单元素
使用场景：在页面中，如果多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表
<select> <option>选项一</option> <option>选项二</option> </select><select>标签中至少包含一对<option>
在<option>中定义select="selected"时，当前项即为默认选中项——》<option select="selected">选项<option>
-
textarea文本域元素
使用场景：当用户输入内容较多数情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签
<textarea cols="一行多少个字" rows="行数"> 文本内容 </textarea>- 通过<textarea>标签可以轻松地创建多行文本输入框
- cols="每行中的字符数", rows="显示的行数"，我们在实际开发中不会使用，都是用CSS来改变大小的
三、查阅文档
经常查阅文档是有一个非常好的习惯
本文来自博客园，作者：Kenny_LZK，转载请注明原文链接：https://www.cnblogs.com/liuzhongkun/p/15664386.html
