HTML基础

尚硅谷HTML+CSS课程笔记

超文本

通过超链接将不同空间的文字、图片等各种信息组织在一起，能从当前阅读的内容跳转到超链接指向的内容。

HTML文档声明

语法：H5<!DOCTYPE html>
具体可查看W3C官网

字符编码、设置语言

head标签中加入标签

设置语言：在html标签中加入lang属性

1
2
3
4
5
6
7
8
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    </body>
</html>

详细可查看W3School或W3C

VSC中输入!可以快速生成HTML标准结构
开发者文档：W3C、W3School、MDN

HTML元素

HTML元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

HTML 元素以开始标签起始，
HTML 元素以结束标签终止，
元素的内容是开始标签与结束标签之间的内容

HTML标签

排版标签

标题标签

语法：<h1/>...<h6/>

注意，一个标准的网站最好只有一个<h1>标签,段落标签不能互相嵌套

段落标签

语法：<p>

注意，标签中不能写块元素

盒模型

语法：<div>

语义化标签：特定标签表达特定内容
1.代码可读性强
2.利于SEO（搜索引擎优化）
3.方便设备解析

块级元素与行内元素

块级元素：独占一行的元素（排版标签） 例如<h1><p><div>

行内元素：不独占一行 例如<span><input>

行内元素之间的一个或多个空格、换行等会被浏览器解析成为一个空格，导致两个行内元素之间出现一个空格

规则：

    1. 块级元素内可以写行内元素与行内元素
    1. 行内元素中可以写行内元素，但不能写块级元素
1
2
3
4
<span>
    <div></div><!--行内元素，违规-->
</span>
<span><span/>
    1. h标签不能互相嵌套
    1. p标签中不能写块元素

文本标签

文本标签通常它用于包裹：词汇、短语等，通常卸载排版标签中，对比排版标签，文本标签更加微观，且文本标签通常都是行内元素

常用标签

1.双标签<em></em>，包裹着重阅读的内容

2.双标签<strong></strong>，包裹着重阅读的内容

3.双标签<span></span>没有语义，通用的用于包裹短语的容

不常用标签

1.双标签<cite></cite>，包裹作品标题

2.双标签<dfn></dfn>,包裹专属名词

3.双标签<del></del>,包裹删除文本；双标签<ins></ins>，包裹插入文本

4.双标签<sub></sub>，下标；双标签<sup></sup>上标

5.双标签<code></code>，代码

6.双标签<samp></samp>，将上下文中的某些内容提取

7.双标签<kbd></kbd>，键盘文本 表示文本是通过键盘输入的

8.双标签<abbr></abbr>，代表缩写，最好配合该标签的title属性，达到光标移动后显示提示的功能

9.双标签<bdo></bdo >，更改文本方向，配合dir属性，可选ltr（left to right）rtl

10.双标签<var></var>，表示变量

11.双标签<small></small>，表示声明、版权等

12.双标签<b></b>，表示摘要中的关键字

13.双标签<i></i>，人物的思想活动（还有其它意思）

14.双标签<u></u>，与正常内容有反差的文字

15.双标签<q></q>，短引用

16.块元素双标签<blockquote></blockquote>，长引用

17.块元素双标签<address></address>，表示地址

图片标签

img 行内块元素

属性：

  1. 图片路径 src

图片路径有三种：相对路径、本地绝对路径、网络绝对路径
相对路径： ./同级 /下一级 ../上一级
绝对路径：以跟位置为参考点：
1.本地绝对路径：很少使用
2.网络绝对路径：服务器如果开启了防盗链，造成图片引入失败

  1. 高、宽：height width注意，只定义一个的时候，是等比例缩放的

  2. 图片描述alt:搜索引擎可以通过该属性知道alt的内容，图片无法展示的时候，浏览器会显示alt的值

图片格式

jpg:有损压缩，颜色丰富，占用空间小，不支持透明背景；适合对图片没有极高要求的场景

png:无损压缩，颜色丰富，支持透明背景，可以高质量呈现图片

bmp:不进行压缩，占用空间大，保存细节多，但占用空间极大，适合对图片细节要求极高的场景

gif:颜色支持少，支持简单透明背景，动态图

webp:专门在网页中呈现图片，也支持动态图，但兼容性不好，兼容性较差

如何解决兼容性差？利用JS判断浏览器是否支持webp,一种后缀是.jpg.webp 一种是.jpg

base64:将图片转码为base64（一串特殊文本） 直接作为img标签的src属性即可，适用于较小的图片或需要和网页一起加载的图片（不需要浏览器发起请求）

超链接

<a></a>
属性：

  1. herf属性:跳转位置（本地路径的文件或外部链接）

如果跳转浏览器不能打开的文件，会触发下载，如果浏览器可以打开，则直接展示

  1. target属性:跳转时如何打开页面值：_self当前标签打开（默认值） _blank在新标签打开

  2. <a>虽然是行内元素可以包裹除a标签之外的元素
    22

  3. download属性：强制出发下载，属性的值是下载文件（本地或在线）的名称

  4. 锚点:

  • 特殊的超链接，没有标签体<a name="xxx"></a>超链接选择锚点时，herf="#xxx"
  • 使用id属性的元素可以被当作锚点跳转,herf=#idname【推荐】,最好不要用数字开头
  • 特殊锚点：回到顶部herf="#"
  • 特殊锚点：刷新页面herf=""
  • 跳转到其它页面的锚点：herf="other#xxx"

  1. herf执行脚本:herf="javascript:code;"

  2. 唤起指定应用:

  • herf="tell:telephonenum"拨打电话
  • herf="mail:mailnum"发送邮箱
  • herf="sms:smsenum"发送短信

列表

列表中的列表项使用<li></li>标签

  1. 有序列表 Ordered <ol></ol>

  2. 无需列表 Unordered <ul></ul>

  3. 定义列表 Definition <dl></dl>(也可以表达树形结构)

1
2
3
4
5
6
7
8
9
10
11
12
13
<dt></dt><!--术语名称-->
<dd></dd><!--术语描述-->

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<!--Coffee
    Black hot drink
Milk
    White cold drink -->

注意:

  1. 列表中的子项应该都是<li>，或者用<li>包裹的元素
  2. 尽可能不单独使用<li>
  3. 列表中可以包裹列表
1
2
3
4
5
6
7
8
9
10
11
<ol>
    <li>item1</li>
    <li>
        <span>item2</li>
        <ul>
            <li>sublist1</li>
        </ul>

    </li>
</0l>

  1. 自定义标签中，一个术语名称可以有多个术语描述

表格

表格的结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<table border="1" >
    <caption>表标题</caption>
    <!--表头-->
    <thead>
        <!--表头第一行-->
        <tr>
            <th>第一个表头项</th>
            <th>第二个表头项</th>
            <th>第三个表头项</th>
        </tr>
    </thead>
    <!--表格主体-->
    <tbody>
        <tr>
            <td>(1,1)</td>
            <td>(1,2)</td>
            <td>(1,3)</td>
        </tr>
        <tr>
            <td>(2,1)</td>
            <td>(2,2)</td>
            <td>(2,3)</td>
        </tr>
    </tbody>
    <!--表格脚注-->
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td>sum</td>
        </tr>
    </tfoot>
</table>

表格常用属性

table标签属性

  1. border:控制表格边框（最外层边框）不能控制单元格边框
  2. width:控制表格整体宽度
  3. height:控制表格高度,表示表格高度至少为多少（不动表头和脚注高度）
  4. cellspacing:控制单元格之间的间距（是单元格距离为0，不是合并单元框）

thead tbody tfoot tr 属性

  1. 可用height属性，如果该属性超过表格高度，则表格高度自动增大，如果不够，则高度会补正到body高度中
  2. align:控制水平对齐的方向，可选right center right
  3. valign:控制垂直对齐的方向，可选bottom middle top

th td属性

  1. height 影响一行
  2. width 影响一列
  3. align
  4. valign

表格的跨行与跨列

拥有属性的元素 th td

  1. 跨列 colspan="num"
  2. 跨行 rowspan="num"

常用标签

(推荐使用<br />和<hr />)

  1. 换行标签 <br> 单标签 可以换行多行
  2. 分割线 <hr> 单标签（装饰线用CSS写，标签要语义化）
  3. 按原文显示 <pre></pre> 双标签保存标签内文字的空格、回车，保留原有格式

表单

网页中的交互区域

表单结构

1
2
3
4
5
<!--百度中，/s路由地址将展示搜索结果，wd变量表示搜索内容-->
<form action="https://xxx.com/s">
    <input type="txt" name="wd" method="get/post">
    <button>搜索</button>
</form>

form属性:

  1. action属性指定提交的地址
  2. target同a
  3. method表单提交方式

input属性:

  1. name表示提交数据的名字
  2. type设置输入数据的类型
    • txt 文本
    • password密码
    • radio选择按钮
    • checkbox多选按钮
    • hidden隐藏域
    • submit提交按钮
    • button普通按钮
  3. value控制输入变量的默认值（一般情况下非选择/提交）
  4. maxlength控制输入长度
  5. checked设置选择按钮的默认值，如果在input中添加该属性，则表示该属性默认被选中（无需值）

表单常用控件

单选按钮

需要使用value设置默认值,同时，一组选择按钮应该具有相同的数据名

1
2
3
性别：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女
多选按钮
1
2
3
<input type="checkbox" name="hobby" value="a">a
<input type="checkbox" name="hobby" value="b">b
<input type="checkbox" name="hobby" value="c">c
表单隐藏域

hidden 作用：防止非法注册

提交按钮

此时value表示按钮中显示的文字，不能写name（按钮没有对应的变量值）

1
2
3
4
<!--默认显示提交，可通过value更改，type如果不写，默认是submit-->
<input type="submit" value="确认">
<!--或者使用button;当需要提交时，type可不写-->
<button type="submit">提交</button>
重置按钮
1
2
3
4
<!--默认显示重置，可通过value更改-->
<input type="reset" value="确认">
<!--或者使用button;当需要提交时，type可不写-->
<button type="reset">重置</button>
普通按钮

不引起表单的重置与提交

1
2
3
4
<!--默认显示重置，可通过value更改-->
<input type="button" value="普通按钮">
<!--或者使用button;当需要提交时，type可不写-->
<button type="button">普通按钮</button>
多行输入文本域

<textarea></textarea>

属性：

  1. name
  2. cols默认行数（几行字）
  3. rows默认列数（几列字）
下拉框

selected属性指定默认选项

1
2
3
4
5
<select name="place">
    <option vlaue="1">x1</option>
    <option vlaue="2" selected>x2</option>
    <option vlaue="3">x3</option>
</select>
禁用

disabled属性

按钮、下拉框、输入框等都可以使用

label标签

<label></label>

实现提示文字和表单控件关联,即可以实现只要点击对应的文字就可以与表单控件交互而不是单纯和控件交互

属性:

  1. for:一般与id联用，可以实现点击label即可与对应id的空间交互

联用的两种方法：

1
2
3
4
5
6
7
8
9
10
<!--实现点击文字即可完成对应跳转-->
<!--第一种：分开写，联用-->
<label for="zhanghu">账户：</label>
<input id="zhanghu" type="text" name="acxcount"><br>
<!--第二种：合并嵌套-->
<label>
    账户：
    <input id="zhanghu" type="text" name="acxcount">
</label><br>
<!--选择框、多选框都类似-->
表单内容的主次分类
1
2
3
4
5
<fieldset>
    <legend>分类标题</legend>
    <!--表单中的控件等-->
</fieldset>

框架标签

<iframe></iframe>嵌入内容（一般用于嵌入广告等） 行内元素

属性：

  1. src指定嵌入的内容
  2. width
  3. height
  4. frameborder元素最外边框的宽度

<iframe>标签与<a>联动:target与name相同即可
<form>标签与<iframe>联动:target与name相同即可，提交表单后的结果放在

1
2
3
4
5
6
7
<a herf="www.xxx.com" target="framename">链接1</a>
<a herf="www.yyy.com" target="framename">链接2</a>
<form action="www.ccc.com" target="framename">
    <input type="text" name="keyword">
    <input type="submit" value="搜索">
</form>
<iframe name="framename" formborder="0" ></iframe>

字符实体

常用字符实体：

  1. 空格&nbsp;
  2. 小于号&lt;,大于号&gt;
  3. and符号&amp;
  4. 版权所有&copy
  5. 乘号&times;
  6. 除号&divide;

参考文档：MDN 术语表 Entity

HTML全局属性

  1. id不可重复，不可使用的标签：<head> <html> <meta> <script> <style> <title>
  2. class指定类名
  3. style设置样式
  4. dir 在<bdo>标签中：修改显示顺序 在<div>上，文字靠左、靠右；也有不能使用的标签<head> <html> <meta> <script> <style> <title>
  5. title设置文字提示
  6. lang 设置指定语言(几乎任何标签中都可以使用。除<head> <html> <meta> <script> <style> <title>)

meta元信息

<meta>单标签 标签中写网页中的基本信息
属性：

  • charset 设置编码

针对IE浏览器的兼容性设置

  • http-equiv兼容性
  • content 优质渲染

针对移动端设备配置

  • name=viewpoint
  • content 优质渲染

配置网页关键字

  • name=keywords
  • content=关键字,关键字

网页描述信息

  • name=description
  • content=描述信息

针对爬虫的配置

  • name=robots

针对网页作者

  • name=author

针对网页生成工具

  • name=generator

配置版权信息

  • name=copyright

配置自动刷新

  • http-equiv=refresh
  • content=刷新的目标网址
语言学习 > HTML
#HTML
HTML基础
https://mapllle.site/2023/09/26/Language/HTML/HTMLnote1/
作者
MAple
发布于
2023年9月26日
许可协议