HTML知识点汇总

最新推荐文章于 2024-09-28 19:02:04 发布

〔我、在“未来”等你〕

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量534

点赞数 26

分类专栏：前端学习笔记文章标签： html 前端

本文链接：https://blog.csdn.net/2303_77552180/article/details/140145056

版权

前端学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML

框架

<heml>
	<head>		
   	 	<title>网页的标题</title>	<!--标签上显示内容-->  <!--head和title是父子关系-->
    </head>
    <body>	<!--head和body是兄弟关系-->
        网页的主体内容		<!--页面内的内容-->
    </body>
</heml>

注释：

<!-- ... -->

换行标签：

<br>

水平下划线：

<hr>

标题标签

只有六级
文字都加粗，从h1–>h6字号逐渐减小
独占一行(默认要换行)

<h1>
    <!--一级标签-->
</h1>

<h2>
    <!--二级标签-->
</h2>

<h6>
    
</h6>

段落标签

段落之间存在较大的间隙
独占一行（默认要换行）

<p>
    
</p>

文本格式化标签

加粗

<b></b>
<strong</strong>

倾斜

<i></i>
<em></em>

下划线

<u></u>
<ins></ins>

删除线

<s></s>
<del></del>

图片标签

单标签

<img src="" alt="" title="" width="" height="">
<!--src是属性名--> <!--src是必填，其他都是选填-->
<!--src后面的""是路径-->
<!--alt是替换文本，当图片加载失败时的替换文本-->
<!--title是提示文本，当鼠标悬停在图片上时，显示提示文本-->
<!--wideh和height是对宽和高的设置，当只设置一个时，是等比例放大、缩小-->

路径

绝对路径

从盘符开始的路径
完整的网络地址

<img src="D:\img\dog.gif">

相对路径（相对于我的路径）

从当前文件开始出发开始找目标文件的过程

<img src="img/dog.gif">
	  <!--img是同级目录名-->
<img src="./img/dog.gif">

<img src="/img/dog.gif">

<img src="../img/dog.gif">

音频文件

<audio src="img/music.mp3" controls autoplay="true"></audio>
<!--controls 播放按钮
	autoplay自动播放
	loop 循环播放-->

视频文件

<video src="img/video.mp4" controls></video>

超链接

访问内部资源

<!--访问内部资源-->
<a href="img/cat.gif" target="_self">超链接</a>
<a href="img/cat.gif" target="_blank">超链接</a>
<!-- _self是在当前页面打开 (默认值)
	 _blank是在新页面打开-->

访问外部资源

<!--访问外部资源-->
<a herf="https://www.baidu.com">百度</a>
<!-- _self是在当前页面打开 (默认值)
	 _blank是在新页面打开-->

锚点（在页面内跳转：回到锚点处）

<!--锚点-->
<div id="div">
    
</div>

<a href="#div">锚点</a>

列表标签

按照行的方式，整齐显示内容
无序列表
- 列表的每一项前默认显示圆点标识

<!--无序列表-->
<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

ul标签中只允许包含li标签

li标签可以包含任意内容

有序列表
- 列表的每一项前默认显示序号标识

<!--有序列表-->
<ol>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ol>

自定义列表(底部导航)

<!--自定义标签-->
<dl>
    <dt>主体</dt>		 <!--默认换行-->
    <dd>说明文字</dd>	<!--dd前会默认显示缩进效果-->
</dl>

表格标签

在网页中以行+列的单元格的方式整齐展示和数据

table标签：表格整体
tr标签：表格每行
td标签：对于主题的每一项内容（每一个单元格）

<table border="1">	<!--主要用css调整表格属性，但是HTML可以有基本的border:边框宽度 width:表格宽度  height:表格高度-->
    <tr>	<!--第一行-->
        <td>学号</td>
        <td>姓名</td>
        <td>成绩</td>
    </tr>
    
    <tr>	<!--第二行,注意与第一行数据相对应-->
        <td>001</td>
        <td>张三</td>
        <td>80</td>
    </tr>
</table>

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

<table>
    <caption>...</caption> <!--表格大标题-->
    <tr>
        <th>学号</th>		<!--表头单元格-->
        <th>姓名</th>
    </tr>
</table>

caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换td标签）

表格的结构标签(现在一般默认网页会编译)

让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰

thead：表格头部

tbody：表格主体

tfoot：表格底部
表格结构标签写在table标签内部

表格标签内部用于包裹tr标签

合并单元格

将水平或垂直多个单元格合并成一个单元格

通过左上原则，确定保留谁删除谁
- 上下合并→只保留最上的，删除其他
- 左右合并→只保留最左的，删除其他

<table border="1">	
    <tr>	
        <td>学号</td>
        <td>姓名</td>
        <td>成绩</td>
    </tr>
    
    <tr>	
        <td>001</td>
        <td>张三</td>
        <td rowspan="2">80</td>  <!--跨行合并，跨两行，只保留第一行的-->
    </tr>
    
     <tr>	
        <td>001</td>
        <td>李四</td>
   <!--	<td>80</td>	--> <!--被合并了-->
    </tr>
</table>

rowspan：跨行合并→垂直方向合并
colspan：跨列合并→水平方向合并

表单标签

input系列

在网页中显示收集用户信息的表单效果，如：登录页、注册页

标签名	type属性值	说明
input	text	文本框，用于输入单行文本
input	password	密码框，用于输入密码
input	radio	单选框
input	checkbox	多选框
input	file	文件选择，用于之后上传文件
input	submit	提交按钮
input	reset	重置按钮
input	button	普通按钮，默认无功能，可通过js添加功能

文本框：<input type="text">
<br> <!--因为没有默认换行-->
<input typr="button value="普通按钮">

value属性：用户输入的内容，提交之后会发送给后端服务器

name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义

后端接收到数据的格式是：name的属性值 = value的属性值

占位符(提示词)

用户名：<input type="text" placeholder="请输入用户名...">
密码：<input type="password" placeholder="请输入密码...">

单选框

<input type="radio" name="sex" checked> 男 <!--两个name取相同的名字，构成一组，可构成单选框-->
<input type="radio" name="sex"> 女 		  <!--checked：默认选中-->

多选框

name 仍要取相同的，表示同一组，但type=“checkbox”

文件选择

<input type="file"> 
<input type="file" multiple>	<!--多文件选择-->

button按钮

<button>
    普通按钮	<!--等价于input中的type="button" value=""-->
</button>

select下拉菜单

select标签：下拉菜单的整体
option标签：下拉菜单的每一项

<select>
    <option>重庆</option>
    <option>上海</option>
    <option selected>广东</option>
</select>

属性
- selected：下拉菜单的默认选中
- value: （会涉及值传递）

textarea文本域标签

<textarea cols="60" rows="30"></textarea>

cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数
注意点：
- 右下角可以拖拽改变大小
- 实际开发时针对于样式效果推荐用CSS设置

label标签

<label for="user">用户名：</label><input type="text" id="user"><br>
<label>密码：</label><input type="password">

常用于绑定内容与表单标签的关系

使用方法1：

1.使用label标签把内容（如：文本）包裹起来

2.在表单标签上添加id属性

3.在label标签的for属性中设置对应的id属性值
使用方法2：

1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来

2.需要把label标签的for属性删除即可

form

用于收集用户的信息，并将用户输入的信息发送到WEB服务器上。

method属性
- method 属性指定提交表单数据时要使用的 HTTP 方法。
  
  表单数据可以作为 URL 变量（使用 method=“get”）或作为 HTTP post 事务（使用 method=“post”）发送。
  
  提交表单数据时，默认的 HTTP 方法是 GET。

<form method="get" action="">	<!--method：请求方法 get/post   action:发送到哪去-->
    <label for="user">用户名：</label><input type="text" id="user" name="user"><br> <!--发送信息必须用name-->
	<label>密码：</label><input type="password" name="pwb"><br>
    <input type="submit">
    <input type="reset">
</form>

语义化标签

没有语义的布局标签 div 和 span（容器，用于装东西布局）

div标签：一行只显示一个（独占一行）（默认换行）
span标签：一行可以显示多个（默认不换行）

<div>
    这是div标签
</div>
<span>这是span标签</span>

有语义的标签（了解）

header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

字符实体

如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格

在网页中展示特殊符号效果时，需要使用字符实体替代

语法：&实体名称

在这里插入图片描述

〔我、在“未来”等你〕

关注

26
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录