2021-07-08HTML再回顾-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43199838/article/details/118540622

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

标题基本骨架结构

html 根标签
head 文档的头部，必须设定title
title 文档的标题
body 文档的主体

HTML文档的后缀名必须是.html或者.htm

html<!DOCTYPE>文档类型声明，使用那个版本的HTML版本来显示网页。
<!DOCTYPE html>即是使用HTML5版来显示网页。该标签必须位于网页最前面，并且不是HTML标签，仅是文档类型声明标签。
lang语言类型，定义文档显示的语言。

符号	语言
en	英语
zh-CN	中文
fr	法语

但是一般也可以互相显示，只用于标明是什么语言的网站。

<meta charset="UTF-8">通过设定charset的属性来规定HTML文档应该使用哪种字符编码。
charset常用的值有：GB2312，BIG5，GBK，UTF-8，其中UTF-8基本包含了全世界各个国家需要使用到的字符，所以就比较常用。

vscode建议安装的插件

插件	功能
Open in Browser	右击选择浏览器打开html
Auto Rename Tag	自动重命名配对标签
JS-CSS-HTML Formatter	格式化
Auto Rename Tag	自动重命名配对标签

VScode设置快速格式化代码

首选项，设置，emmet.include中添加

“editor.formatOnType”:true
“editor.formatOnSave”:true

HTML常用标签

w3c标签说明

标签	标签名	语义	特点
`<h1>-<h6>`	标题	定义标题，并且依据重要性递减	字体变粗，字号变大，独占一行
`<p>`	段落	定义段落	文本在段落中根据浏览器窗口的大小自动换行，段落之间有空隙
`<br/>`	换行	强制换行	单标签，br/仅为换一行，没有空隙，不似p标签
`<strong>`、`<b>`	加粗	文本加粗	本文格式化标签
`<em>`、`<i>`	倾斜	文本倾斜	本文格式化标签
`<del>`、`<s>`	删除线	文本加删除线	本文格式化标签
`<ins>`、`<u>`	下划线	文本加下划线	本文格式化标签
`<div>`	盒子	内容块	一行只能放一个div内容
`<span>`	盒子	内容块	一行可以放多个span内容
`<img src="" >`	图像	引用图像	可单标签，其中src（必须）：图像的路径，alt：替代文本，title：显示文本
`<a href=""></a>`	超链接	链接跳转	其中href（必须）：跳转路径，target：打开链接的方式，其中_self为当前页面打开，_blank为新窗口打开

目录文件夹和路径

目录文件夹
- html文件（所在目录为根目录）
- images
  - 图像

关于超链接的几种类型

<!-- 外部链接 -->
<a href="http:www.baidu.com"></a>
<!-- 内部链接 -->
<a href="html01.html"></a>
<!-- 空链接 -->
<a href="#"></a>
<!-- 下载链接 -->
<a href="img.zip"></a>

其中内部链接是文件的路径，根目录如果不经过重置的话也是当前html文件所在的目录为根目录。
其中下载链接中，href的属性为.exe和.zip的话是可直接下载该文件。
超链接的元素可以是文字、图片、音频、表格、视频等等。

关于锚点链接

即可快速定位当网页中的某个位置。
第一步
在链接文本的href属性中，设置属性值为#id名的形式，例如<a href="#ke">可爱</a>
第二步p
找到目标位置标签，设置该id名为对应的id名，例如<p id="ke">可爱</p>

关于特殊字符

w3c的特殊字符表

显示结果	描述	实体名称
	空格	&nbsp
<	小于号	&lt
>	大于号	&gt

关于表格

一行两列

    <table>
        <tr>
            <!-- 定义表头，文字会加粗居中显示-->
            <th></th>
        </tr>
        <!-- 定义行 -->
        <tr>
            <!-- 定义列 -->
            <td></td>
            <td></td>
        </tr>
    </table>

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或者“”	规定表格单元是否拥有边框，默认是没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定表格之间的空白，默认2像素
width	像素值或者百分比	规定表格的宽度

但是一般不会直接设定表格的属性，而是用CSS进行设定。

关于合并单元格

跨行合并：rowspan = “合并单元格的个数”，在最上侧单元格为目标单元格，写合并代码
跨列合并：colspan = “合并单元格的个数”，在最左侧单元格为目标单元格，写合并代码

关于列表

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

标签	标签名	特点
`<ul><li></li></ul>`	无序列表	子元素之间是无序的，并列的，ul只能嵌套li，而li里面什么元素都可
`<ol><li></li></ol>`	有序列表	子元素之间是有序的，ol只能嵌套li，li中什么元素都可放
`<dl><dt></dt><dd></dd></dl>`	自定义列表	dl只能嵌套dt和dd，经常一个dt对应多个dd

关于表单

在HTML中一个完整的表单通常由表单域<from></from>、表单控件<input><select><textarea>等、提示信息三个部分组成。

<from></from>常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

`<input>`标签：

属性	属性值	描述
type	button	按钮
type	checkbox	复选框
type	file	文件
type	hidden	定义隐藏的输入字段
type	image	定义图像形式的按钮
type	password	密码，字符被掩码
type	radio	单选按钮
type	reset	重置按钮，点击表单中的所有数据就会清空
type	submit	提交按钮，提交按钮会把表单数据发送到服务器
type	text	定义单行的输入字段，用户可在其中输入文本，默认宽度是20个字符
name	元素名称	定义元素的名称
value	元素值	定义元素的值
checked	checked	规定首次加载的时候是否被选中
maxlength	正整数	规定输入字段中的字符的最大长度

name和value是每个表单元素都有的属性值，主要是给后台人员使用。
name表单的名字，要求单选按钮和复选框要有相同的name值。

label标签

    <label for="sex">男</label>
    <input type="radio" name="sex" id="sex">

<label>标签用于绑定一个表单元素，当点击该标签的文本时，浏览器就会自动将焦点转到选择对应的表单元素上，用来增加用户体验。
对应关系有label标签中的for属性的值===》input的id值

`<select>`标签

    <select name="" id="">
        <option>天津</option>
        <option>北京</option>
    </select>

<select>是复选框标签，其中至少包含一对<option>，<option>中定义selected时，当前项即为默认选中项。

`<textarea>`标签

<textarea name="" id="" cols="30" rows="10"></textarea>

定义多行输入文本框，cols=“每行中的字符数”，rows=“显示行数”，但是实际上还是用CSS来定义文本框的样式。输入超过每行字数就会自动换行，超过显示行数就会出现滚轴。