HTML学习

一、HTML语法规范

标签：必须包含在一对尖括号里面
双标签：

1	<html></html>

单标签：

<br />

标签的关系：

包含关系

<head>
    <title>
    </title>
</head>

并列关系

1 2	<head></head> <body></body>

标签内的属性：每个属性之间需要使用空格隔开，并且每个属性都是字符串（尽管它表示的是一个数字）

1	<img src = "abc/def.png" height="500"></img>

二、HTML基本结构标签

html标签：页面中最大的标签，根标签
head标签：文档的头部
title标签：文档的标题
body标签：文档的主体

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是一个标题</title>
</head>
<body>
    
</body>
</html>

可以将以上内容放在以html为后缀名的文件中

VSCODE可以添加的插件

Auto Rename Tag：在修改一个标签的时候自动修改与之匹配的另一个标签
自动格式化：VSCODE自带，左下角管理-设置-文本编辑器-正在格式化-FormatOnPaste和FormatOnSave勾选
One Dark Pro：用于修改代码的颜色样式
Open In Browser：用于在浏览器中打开HTML文档
Live Server：自动在浏览器中更新
vscode icons：用于在资源管理器显示不同图标
easy less：自动编译less文件

vscode中的一些快捷键

快速复制某一行：shift+alt+下箭头
选中多个相同的单词：ctrl+d
添加多个光标：ctrl+alt+上/下箭头
查找替换：ctrl+h
快速跳到某一行：ctrl+g

三、HTML位于开头的标签

!DOCTYPE:声明文档类型，必须放在第一行，不是一个html标签

html标签中的lang参数：语言

en：英文
zh-CN：中文

meta标签：用于提供html文档的元数据，提供有关文档的信息。写在head中常见的属性：

charset：文档的字符集，如UTF-8
name/content：元数据的名称/内容，写在一个meta中

四、HTML常用标签

1、结构标签

h1-h6：标题标签，1最大，6最小。

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

p：段落标签，用于分段

1	<p>我是一个段落</p>

br /：换行标签，用于换行

1	我是第一行<br>我是第二行

2、文本格式化标签

strong/b：粗体
em/i：斜体
del/s：删除线
ins/u：下划线

3、网页布局标签

div/span：盒子，用于在里面装内容，用于布局网页，在CSS中会经常用到

特点：

div单独占一行，块级元素，大盒子
span一行可以放多个，小盒子

4、图像标签

img：图像标签。
image中的属性：

其中，width和height单位为像素，一般只设置一个，且border一般使用css设定

5、超链接标签

a：超链接标签，用于从一个页面链接到另一个页面

两个属性：herf：指定连接目标的url；target：指定页面打开方式，_self为本窗口(默认)，_black为新窗口打开

1	<a herf="www.baidu.com" target="_blank">百度</a>

外部链接：http://www.baidu.com

内部链接：index.html

空链接：#

下载链接：herf里面是一个文件

网页元素链接：在网页元素外面添加一个超链接标签

锚点链接：#theID（需要在网页元素中添加一个id为"theID"的内容）

6、注释标签

1	<!-- 注释语句 -->

vscode中可以使用ctrl+/来快速使用注释标签

7、特殊字符

五、HTML其他重要标签

1、表格标签

普通标签

<table border="1" cellspacing="0">
    <tr>
        <th>表头文字1</th> <th>表头文字2</th>
    </tr>
    <tr>
        <td>单元格内的文字</td>
        <td>单元格内的文字</td>
    </tr>
</table>

table用于定义一个表格
tr表示表格中的一行
td表示一行中的一格
th表示表头，类似td，但是会加粗居中显示

表格属性标签：（通常不使用，一般使用css来显示）

如果想要表格之间有边框，且为一条线，那么设置border=1且cellspacing=0

表格结构标签

thead表示表头部分
tbody表示表格主体部分

以上标签都放在table标签中，主要用于让表格有更好的语义

合并单元格

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

使用时，标签放在左上角的单元格，并需要删除被合并的单元格

2、列表标签

用来布局的，特点：整齐，有序

分为无序列表、有序列表、自定义列表

无序列表

<ul>
    <li>一个列表项</li>
    <li>一个列表项</li>
    ...
</ul>

样式通常使用css设置

有序列表

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    ...
</ol>

自定义列表

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>

    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
</dl>

dl用于定义列表
dt用于表示mc
dd表示名词的解释

dl中只能放dt和dd两个标签

3、表单标签

表单：填写的单子

form标签用于定义表单域

1	<form action="url地址" method="提交方式" name="表单域名称">

表单域就是form标签

input输入表单控件

input：单标签radi，用于收集用户信息。不同的type值表示input具体是什么

input中的其他属性：

想要在多个选项中单选，只需要将这些选项的name改为同一个name即可

<form action="duahsdiasduoa.php" method="get">
    用户名：<input type="text" name="username" placeholder="请输入用户名"><br>
    性别：男<input type="radio" name="sex" value="male">女<input type="radio" name="sex" value="female"><br>
    喜欢：红<input type="checkbox" name="like" value="red">黄<input type="checkbox" name="like" value="yellow">蓝<input
        type="checkbox" name="like" value="blue"><br>
    <input type="submit" name="submit" value="点击提交">
    <input type="reset" value="重新填写">
</form>

提交后，在请求的url中会列举出这些param，它们不是作为HTTP报文的首部，而是直接的URL中的参数。参数的值就是这个表单项的value值。

button按钮经常和JavaScript搭配使用，来触发某些事件

label标签

用于绑定一个表单元素，点击label标签内的文本时就会自动将光标转到对应的表单元素上

<form>
    <label for="male">男</label>
    <input type="radio" id="male" value="male" name="sex">
    <label for="female">女</label>
    <input type="radio" id="female" value="female" name="sex">
</form>

for用于指定一个ID，点击后就会跳转到对应ID的表单元素上

select下拉表单控件

<select>
    <option>红</option>
    <option>黄</option>
    <option>蓝</option>
</select>

select至少包含一个option

option中，selected属性可以设定默认是否选定

textarea文本域元素

一个用于输入大量文本的文本框

1
2
3

<textarea rows="3" cols="20">
    请输入内容
</textarea>