HTML 和HTML5知识点详细总结，一起学习吧

最新推荐文章于 2024-06-18 21:14:33 发布

前端小媛

最新推荐文章于 2024-06-18 21:14:33 发布

阅读量470

点赞数 2

分类专栏： HTML 文章标签：前端 html 学习 html5

本文链接：https://blog.csdn.net/qq_59012240/article/details/125595976

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

表单

表单是用来采集用户的输入数据，然后将数据提交给服务器

组成

表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位按钮和一般按钮；

表单标签＜form＞＜/form＞

功能：用于申明表单，定义采集数据的范围，也就是＜form＞和＜/form＞里面包含的数据将被提交到服务器
语法：<form action="url"method="get" ></form>
action=“” 服务器地址（数据提交的路径）
method=“” 数据提交方式
- get / post

<input type="" name="" value="" placeholder="">

type 类型
- 输入框
  - 文本框 text
    - name 名字
    - value 值初始值
    - placeholder 输入域的提醒文本
    - maxlength 规定输入字段中的字符的最大长度（最多输入的字符数）
    - checked="checked" (checked) 首次加载中默认被选中 checked 按钮主要针对于单选按钮和复选框
    - required 必填项
    - disabled 不能修改
    - readonly 只读状态
  - 密码框 password
  - 复选框 checkbox
  - 单选框 radio
    - 代码格式：＜input type="radio"name="..." value="..."＞
    - 必须写上相同的name值才能每次选中一个
  - 多行文本框（文本域）
    - 是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。
    - ＜textarea name="..."style=" : ; "＞＜/textarea＞
    - ＜textarea name="..."cols="..." rows="..." ＞＜/textarea＞
    - resize是否调整表格大小
      - resize:none;表格不可拖动
  - 下拉选择框
    - 下拉选择框允许你在一个有限的空间设置多种选项。
    - ＜select name="..."size="..." multiple＞＜option value="..."selected＞文本＜/option＞...＜/select＞
    - selected 下拉选择框选项默认被选中
    - multiple 多个的
  - 文件上传框
    - <input type="file" name="myfile">
    - 默认只能上传一个可以加multiple属性上传多个文件
  - 隐藏域
    - <input type="hidden" >
- 按钮
  - submit 提交按钮提交按钮会把表单数据发送到服务器
  - <button>按钮</button>
    - <button type="submit/reset/button">提交/重置/普通按钮</button>
  - reset 重置按钮重置按钮会清除表单中的所有数据
  - button 普通按钮定义可点击按钮
  - image 图片提交按钮
    - src="图片路径" alt=""
label 双标记标签
- <label> 标签的 for 属性应当与相关元素的 id 属性相同。
- 点击文字时也可以勾选
  - label的两种用法

块元素(display:block)

特征
- 1.独占一行 2.默认受浏览器影响 3.块元素里可以嵌套任何元素（p元素除外）
分类
- p、h1、h2 、h3、 h4、 h5、 h6、ol 、ul、 body、hr

行内块元素

分类
- img
行内元素(display:inline)
- 特征
  - 1.可以和其他元素在一行上显示、2.宽度只受内容影响、3.外边距、行高、内边距等可能只有一部分起作用、4、行内元素里可以嵌套行内元素、行内块元素以及文本
- 分类
  - b、strong、i、em、sup、sub

换行标记

<br>换行
- 用于段落内部的换行
- 可以加好几个br，实现换行效果
  - 如：<br><br><br><br>....

列表

<ul>无序列表<ul/>
- 一个ul里面可以放多个li(列表项)
<ol>有序列表<ol/>
- 有先后顺序
<li>列表项<li/>
- 里面可以放其他元素

定义列表

<dl>定义列表</dl>、<dt>定义列表项</dt>、<dd>列表项说明</dd>
dd里面或dt里面可以放其他元素，而dl里面只能放dt和dd
倾斜
- <i>斜体<i/><em>我也是斜体<em/>
  - <i></i>仅表示加粗、<em></em>不仅表示加粗，还有强调意味
  - i后期用来引入图标
加粗
- <b>文本加粗</b>、<strong>我也是文本加粗</strong>行内元素
  - <b></b>仅表示加粗、<strong></strong>不仅表示加粗，还有强调意味
小号字体
- <small>定义小字体的文字</small>
上下标
- <sup>上标</sup>、<sub>下标</sub>
  - 浏览器运行显示

html4被淘汰的标签

<center>居中</center>
<font>字体</font>
<big>大字体</big>
水平线
- <hr>水平线

特殊符号

< 大于号和 > 小于号（< 和 >）
空格
-  
- &ensp;
- &emsp;
  - 两个&emsp;等价于一个汉字，等价于一个&ensp;的空格
© 版权符号
• 小圆点
× 关闭（ ×）
- 浏览器不显示，查看网页源代码可以看到
- 可以用于组织说明，文档修改历史记录

五大浏览器

Internet Explorer、Firefox、Safari、Opera、Google Chrome

浏览器内核

负责对网页语法的解释并渲染（显示）网页
Trident(IE内核)、Gecko(Firefox内核)、Webkit(Safari内核，Chrome内核原型，开源)

概念

HTML（Hyper Text Markup Language）超文本标记语言，是制作网页的最基本的语言，直接由浏览器执行

注释

HTML注释
更好地说明文档内容，解释说明
HBuilder X快捷键：ctrl+/

html基本结构

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html>
<!DOCTYPE html>
-
<head><title>我是标题</title></head>
-
<head><meta charset="utf-8"></head>
-

<img>行内标记定义了一个行内图像

(行内块元素：能设置宽度，可以和其他元素在一行显示)

<img src="" alt="" >
- 属性名="属性值 "
- src 引入图片的路径
  - 绝对路径
    - 暂不使用
  - 相对路径
    - ./当前目录
      - 当html文件与图片在同一个目录下，src的值是图片名称或者./图片名称
        如：<img src="图片名称">或<./图片名称>
      - 当html文件与图片所在文件夹在同一个目录下，src的值是先写图片文件夹名称，再写图片名称
        如：<img src="图片文件夹名称/图片名称">或者<iimg src="./图片文件夹名称/图片名称">
    - ../上级目录（跳出当前目录）
      - 当HTML文件所在文件夹与图片在同一个目录下，src的值是先通过../跳出当前目录，再写图片名称
        如：<img src="../图片名称">
      - 当html文件所在文件夹与图片所在文件夹在同一个目录下，src的值是先通过../跳出当前目录，再写图片文件夹的名称，最后写图片名称
        如：<img src="../图片文件夹名称/图片名称">
alt 当图片加载失败时的替代文本
图片大小
- 如：width="200" 宽度为200像素
- 如：height="300" 高度为300像素
- 单位：百分比%（默认浏览器的百分比）会跟着父元素、像素
title 鼠标移到标签上的提醒文本
- 如：title="xxxxx"，图片上会显示"xxxxx

段落标签：<p></p>

功能：对网页上的文字进行分段
特点：间距比较大
换行标签：<br/>
- 单标签
居中对齐标签：<center>居中的内容</center>
- 让段落或者文字能够相对于父标签居中显示
标题标签：格式<h1>1级标题</h1>...<h6>6级标题</h6>
- 功能：定义网页的文字
- 特点：标签独占一行
字体设置标签：格式<font>标题</font>
- 功能：修改文字颜色、字体、大小

行内框架

<iframe src="" frameborder="0" width="" height="" scrolling=""></iframe> 也可放图片
- src引入页面路径
- frameborder 框架边框 1有边框 0无边框
- scrolling 滚动条 yes有滚动条 no无滚动条

表格

一般用在后台比较多
基本结构
- <table></table>
  - 定义表格的基本框架
- <tr></tr>
  - 定义表格的行
- <td></td>
  - 定义表格中行内的单元格
- <th></th>
  - 定义表格中行内的单元格（标题），自动将文本加粗，居中对齐

表格属性

cellspacing 单元格与单元格之间的距离
cellpadding 内容与单元格之间的距离
col表格列的属性 row行
border 边框
- 值为1
width宽度
height 高度
align 水平方向对齐方式
- left左对齐(默认) center 居中对齐 right 右对齐
valign 垂直方向对齐方式
- middle垂直居中对齐(默认) top垂直居上对齐 bottom垂直居下对齐
bgcolor背景颜色 background-color
bordercolor 边框颜色
rules 规定内侧边框哪部分可见
- none 均不可见
- rows 水平边框可见（垂直方向不可见）
- cols 位于列之间的线条可见
- all 位于行与列之间的线条可见
表格的合并
- colspan
  - colspan="合并单元格个数"
  - 左右合并单元格（水平合并单元格）
- rowspan
  - 上下合并单元格
完整的表格标记
- <thead></thead>
  - 定义表头部分
- <tfoot></tfoot>
  - 定义表格脚注
- <tbody></tbody>
  - 定义表格主体

<div></div>块级元素

1、总是在新行上开始，占据一整行；

2、高度，行高以及外边距和内边距都可控制；

3、宽带始终是与浏览器宽度一样，与内容无关；

4、它可以容纳行内（内联）元素和其他块元素。

<span></span>行内元素

1、和其他元素都在一行上

2、高，行高及外边距和内边距部分可改变；

3、宽度只与内容有关；

4、行内元素只能容纳文本或者其他行内元素。

网页分类

jpg有损压缩，色彩表现度较好，不支持动图
webp 支持有损压缩和无损压缩，减少文件大小，达到和JPEG·的效果
png 支持透明效果
GIF 色彩表现少，解析速度快，支持动图，是网页中修饰类图片的首选
<a href="" target="_blank">内容</a>超链接
- href超文本引入
  - href="" 刷新本页面
  - href="http://www.baidu.com" 跳转百度网页
  - href=" 可以写自己做的网页名（看路径引入）" 跳转自己写的页面里
- target="_blank" 在新窗口中打开链接

<base href="" target="_blank">

描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的，会使下方没有默认自己网页的实现这个标签的网页

放在头部<head></head>
锚点#id值
- 如：定义锚点<p id=“zj”>第三章</p>
- 定义指向该锚地的链接<a href=“#zj”>点击查看第三章</a>
id属性

热点区域

<map>name属性
- 规定图像映射的名称
<img src="" alt="" usemap="#name值">
<map name="name" ><area shape="" coords="" target=""></map>
- shape形状
  - rect矩形 circle圆形 poly多边形
- coords 坐标
  - 当shape="rect" ,coords="x1 y1 x2 y2"
  - 当shape="circle" ,coords="x1 y1 R"
  - 当shape="poly"，coords="x1 y1 x2 y2..."
- href 跳转路径
- target，链接打开方式

HTML5 新增语义化标签+视频、音频

HTML布局（块元素）
- <header> </header> 双标记
  - 头部
  - 和div 差不多，比div 语义性更强
- <nav> </nav> 导航
- <main> </main> 用于指定文档的主体内容
  - 在文档中是唯一的
- <section> </section> 章节、文章评论
- <article> </article> 文章（类似p）
- <aside> </aside> 侧边栏
- <footer> </footer> 底部
- <figure> </figure>
  - 规定独立的流内容（图像、图表、照片、代码等等）
  - <figure> <figcaption> </figcaption></figure>
- <details></details>
- <details> <summary>XXXX</summary> </details>
HTML布局（行内元素）
- <time></time>
- <mark></mark>
HTML布局（行内块元素）
- 进度条
  - <progress>你的浏览器不支持此标签</progress>
  - <progress min="0" max="100" value="50" >你的浏览器不支持此标签</progress>
- 度量衡
  - <meter min="0" max="100" value="50"(这个可以调，必需，规定度量的进度) low="60" high="80"></meter>
  - <meter min="0" max="100" value="50"></meter>
- datalist
新增表单控件
- Input 类型
  - 输入域
    - email 邮箱
      - <input type="email" name="email" id="email">
    - url 网址
      - <input type="url" name="url">
    - number 数字域
      - <input type="number" name="age" value="18" min="0" max="100" step="2">
        min
        
        max
        
        value 初始值
        
        step 步长
    - search 搜索域
      - <input type="search">
    - tel 电话号码
      - pattern 控制数字长度
  - 日期控件
    - 年月日
      - <input type="date" name="date">
    - 年月
      - <input type="month" name="month">
    - 年周
      - <input type="week" name="week">
    - 时分
      - <input type="time" name="time" id="">
    - UTC时间
      - <input type="datetime" name="datatime">
    - 本地时间
      - <input type="datetime-local" name="datatime-local">
  - 滑动条
    - <input type="range" name="range" min="0" max="10" step="2" value="2">
  - 拾色器
    - <input type="color" value="#ff0000">
    - 改变初始值，设置value 为十六进制
  - 自动获取焦点 autofocus
    - <input type="text" autofocus>
  - autocomplete 自动补全
    - <input type="text" name="uname" autocomplete="on">
    - 取值：默认值on off 关闭自动补全
音频+视频
- <audio src="./song.mp3" controls></audio>
- <video src="./explore_promo.mp4" controls autoplay muted loop></video>
  - 视频和音频共有属性
    - autoplay 自动播放
    - controls 用来显示音频或视频的控件，不加显示不出来
    - muted 静音状态
    - loop 循环播放
    - poster 视频封面（URL）

前端小媛

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML 和HTML5知识点详细总结，一起学习吧

描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的，会使下方没有默认自己网页的实现这个标签的网页。(行内块元素能设置宽度，可以和其他元素在一行显示)4、它可以容纳行内（内联）元素和其他块元素。2、高度，行高以及外边距和内边距都可控制；4、行内元素只能容纳文本或者其他行内元素。2、高，行高及外边距和内边距部分可改变；行内元素。块级元素。HTML布局（行内块元素）段落标签1、和其他元素都在一行上。HTML布局（行内元素）...
复制链接

扫一扫

专栏目录