HTML基础总结——速通知识点

一、基础知识点

Web标准构成：
在这里插入图片描述
HTML页面的固定结构

<html>
	<head>
		<title>网页的标题</title>
</head>
<body>
	网页的主体内容
</body>
</html>

二、语法

2.1注释

在vscode中：将光标置于需要注释的行，然后ctrl + /

2.2 标签

2.2.1结构

<strong>包裹的内容</strong>

左边是开始标签，右边的是结束标签
常见标签由两部分组成，成对出现叫双标签；
少数标签仅由一部分组成，称为单标签。

2.2.2标签间的关系

父子关系

<head>
		<title>网页的标题</title>
</head>

兄弟关系

<head></head>
<body></body>

2.2.3排版标签

1标题标签

用来突出显示文章主题
代码：h系列标签

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

6级标题，重要程度依次递减
特点：
文字都有加粗，大小依次递减
输入h1然后回车enter，直接出现<h1> </h1>
复制粘贴：将光标置于某一行，直接按下Ctrl c ，接着切换另一行之间直接按 ctrl +v
选中一个字符，按Ctrl D，可选中最近的一个相同字符，然后对他们的操作就能统一

2 段落标签

用于分段显示

<p></p>

特点：
段落之间存在间隙
独占一行
文段太长：查看-自动换行

3 换行标签

<br>

单标签，段落之间不存在间隙，直接放在需要强制换行的文本中就可以

4 水平线标签

<hr>

在想产生水平线的部分直接添加即可

2.2.4 文本格式化标签

以下两者在视觉上没有区别，只在语义上有区别。b,u,i,s没有strong,ins,em,del重要。
在这里插入图片描述

2.2.5媒体标签介绍

1 图片标签

作用：在网页中显示图片

<img src=”” alt=””>

单标签
Img标签需要展示对应的效果，需要借助标签的属性进行设置
标签上可以同时存在多个属性，Src和alt都是属性，属性之间以按空格隔开，属性没有顺序之分
属性名alt
替换文本
当图片加载失败时，才显示替换文本
属性名title
属性值：提示文本
当鼠标悬停时，才可以显示的文本
注意：title属性不仅仅可以用于图片标签，还可以用于其他标签
属性名：width,height
宽度和高度：控制图片尺寸，只设置其中一个，设置其中一个，另一个等比例缩放

2 路径

页面要加载图片，需要先找到对应的图片
相对路径：从当前文件开始出发找目标文件的过程
同级目录：当前文件和目标文件在同一个文件夹下

<img scr=”文件.gif”>
<img scr=”./文件.gif”>

<img scr=”文件夹名/文件.gif”>

上级目录
在上一级目录<img scr=”../文件.gif”>
在上上一级目录<img scr=”../../文件.gif”>
文件在上一级目录中的另一个文件夹下<img scr=”../文件夹名/文件.gif”>

3音频标签

<audio src=””></audio>

在这里插入图片描述

<audio src=”” controls></audio>

加上控件的效果。
在这里插入图片描述

4 视频标签

<video src=””></video>

想要正常播放,controls事实上是必须的
在这里插入图片描述

2.2.6链接标签

点击之后，从一个页面跳转到另一个页面

<a href=”目标网页”>提示词</a>

在这里插入图片描述
当网页开发初期还不知道要跳转的网页地址，将href的值设为#

2.2.7 列表标签

1基本概念

场景：在网页中按照行展示关联性的内容，如新闻列表，排行榜，账单
特点：按照行的方式，整齐显示内容
种类：无序列表，有序列表，自定义列表

2无序列表

在这里插入图片描述

<body>
    <ul>
        <li>榴莲</li>
        <li>苹果</li>
        <li>香蕉</li>
    </ul>
</body>

实现效果：
在这里插入图片描述

3有序列表

在这里插入图片描述

<ol>
       <li>张三</li>
       <li>李四</li>
</ol>

实现效果：

张三
李四

#### 4自定义列表 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d7fa67c2554340c1ad57d822a8418b67.png)

<dl>
        <dt>帮助中心</dt>
        <dd>常见问题</dd>
        <dd>联系我们</dd>
</dl>

实现效果：

帮助中心

常见问题

联系我们

注意：dl标签里只能放dt/dd标签
dt/dd标签内可以包含任意内容

2.2.8 表格标签

1基本标签

在这里插入图片描述

2表格属性

在这里插入图片描述

<body>
    <table border="1"
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>100</td>
            <td>好</td>
        </tr>
        <tr>
            <td>里斯</td>
            <td>10</td>
            <td>不好</td>
        </tr>
    </table>

实现效果：
在这里插入图片描述

3表格标题和表头单元格标签

在这里插入图片描述
caption标签书写在table标签内部
th标签书写在tr标签内部

<table border="1">
        <caption>成绩表</caption>
        <tr>
            <th>姓名</th>
            <th>成绩</t>
            <th>评语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>100</td>
            <td>好</td>
        </tr>
        <tr>
            <td>里斯</td>
            <td>10</td>
            <td>不好</td>
        </tr>
    </table>

在这里插入图片描述

4 表格的结构标签

让表格的内容结构分组，突出表格的不同部分（头部，主体和底部），使语义更加清晰
在这里插入图片描述

5合并单元格

将水平或者垂直多个单元格合并成一个单元格
在这里插入图片描述
在td中使用rowspan时，在要合并单元格的最上格添加rowspan，数量定义为要合并单元格的总数；其他行的相同内容td因为合并的内容不需要再写。
在td中使用colspan时，在要合并单元格的最左格添加colspan，数量定义为要合并单元格的总数；其他行的相同内容td因为合并的内容不需要再写。

2.2.9 表单标签

1场景

主要是注册和搜索

2 input系列标签

a. type

Input标签可以通过type属性值的不同展示不同的效果
在这里插入图片描述

b. 文本框

在网页中显示输入单行文本的标单控件

i type属性值：text

常用属性：
在这里插入图片描述

<input type="text" placeholder="请输入邮箱或手机号">

在这里插入图片描述

ii type属性值：radio

常用属性
在这里插入图片描述

gender:<input type="radio" name="gender">男 <input type="radio" name="gender"> 女

在这里插入图片描述

iii type属性值：file

常用属性
在这里插入图片描述

c. 按钮

在这里插入图片描述
要使submit和reset生效，需要将input、submit等标签全部置于form标签内。

<form action=””></form>

submit和reset按钮默认是提交和重置提示字，但是可以通过value改变。

<input type="submit" value="注册">

在这里插入图片描述

<button type=”submit”>提交按钮</button>
<button type=”reset”>提交按钮</button>

d. 下拉菜单

场景：在网页中提供多个选择项的下拉菜单表单控件
标签组成：
select标签：下拉菜单的整体
option标签：下拉菜单的每一项
select与option标签是父子关系
常见属性：selected 下拉菜单的默认选中，如果不设置默认option中的第一个选中

    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广东</option>
        <option>安徽</option>

    </select>

效果：
在这里插入图片描述

e. 文本域

在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：cols:规定了文本域内可见宽度
rows:规定了文本域内可见行数

工作中实际上利用css来设置大小，cols和rows设置不靠谱。
效果如下：
在这里插入图片描述

f. label标签

场景：常用于绑定内容与表单标签的关系
标签名：label
使用方法A：
1使用label标签把内容包裹起来；
2在表单标签上添加id属性
3在label标签的for属性中设置对应id属性值
使用方法B:
1直接使用label标签把内容和表单一起包裹起来
2需要把label标签的for属性删除即可

性别：
<input type="radio" name="gender" id="kun"> <label for="kun">男</label>
<label><input type="radio" name="gender">女</label>

g. 语义化标签

没有语义的布局标签div和span

content
<div>content</div>

完全一致，div内的内容独占一行
不同span包裹的内容部独占一行

有语义的布局标签（html5新版中，做手机网页使用）

在这里插入图片描述

h. 字符实体

能通过字符实体在网页中显示特殊符号
网页无法识别多个空格
空格—— 
5个空格：         

三、实践

3.1 学生成绩表

<!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>
    <table border="1">
        <caption><h3>优秀学术信息表</h3></caption>
        <tr>
            <th>年级</th>
            <th>姓名</th>
            <th>学号</th>
            <th>班级</th>
        </tr>
        <tr>
            <td rowspan="2">高三</td>
            <td>张三</td>
            <td>110</td>
            <td>三年二班</td>
        </tr>
        <tr>
            <!-- <td>高三</td> -->
            <td>赵四</td>
            <td>120</td>
            <td>三年三班</td>
        </tr>
        <tr>
            <td>评语</td>
            <td colspan="3">你们都很优秀</td>
            <!-- <td>你们都很优秀</td> -->
            <!-- <td>你们都很优秀</td> -->
        </tr>
    </table>
</body>
</html>