HTML5复习——B站

天落枫

已于 2022-10-14 13:04:57 修改

阅读量520

点赞数 2

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

于 2020-11-25 20:51:09 首次发布

本文链接：https://blog.csdn.net/xiapi3/article/details/109897199

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、Html介绍

超文本标记语言：Hyper Text Markup Language
W3C：万维网
w3c标准包括：

结构化标准语言：html xml
表现标准语言：css
行为标准语言：dom ECMAScript(JS)

html的注释：

  <!DOCTYPE html>
  <html>
      <head>
          <meta charset="UTF-8">
          <title>问好！</title>
      </head>
  
      <body>
          html，大爷你好！
      </body>
  </html>

其中：
DOCTYPE：告诉浏览器使用什么规范
<html> 标记放在 HTML 文件的开头，是一个形式上的标记；
<body> 标记称为主体标记，网页所要显示的内容都放在这个标记内，它是 HTML 文件的重要所在；
<head> 标记称为头标记，起的作用是放置关于此 HTML 文件的信息，如提供索引、定义 CSS 样式等；
<title> 标记称为标题标记，起的作用是设定网页标题；
meta：描述网站信息：元数据，一般做SEO

<meta name="keywords" content="淘宝,学习,购物"/>
<meta name="description" content="边学习便购物"/>

二、基本标签

文字标签

<p>段落标签，行间距比较大
<br>换行标签，行间距比较小
<h1>~<h6>标题标签
<center>文字居中标签
<blockquote>文字段落缩进标签
<pre></pre>保留当前文字编辑格式不改变
<hr/>水平线

列表

<ul>无序
<ol>有序
<dl>自定义列表，自定义列表包括dl：自定义列表标签，dt：自定义列表标题，dd：自定义列表项组成。

  <ul>
      <li>abvc</li>
      <li>efasd</li>
      <li>abhhhvc</li>
  </ul>

<dl>
	<dt>学科</dt>
	<dd>java</dd>
	<dd>linux</dd>
</dl>

div块

块级容器，可以嵌套其他的容器，一个块标签独占一行

<div id="d1" style="border:1px red solid;">
<h1>hh</h1>
<h2>hh</h2></div>

span行内标签

内联元素，文本容器，一行可以有多个行内标签

我的好朋<span style="color:red" id="s">友</span>
<script type="text/javascript">s.innerText="wo";</script>

注意：js中可以通过id属性引用相应对象，并操作标记属性和方法。innerText指标记开始和标记结束中间的文本部分。

标签属性设置contenteditable='true'则，标签间的内容可以在线编辑

三、基本属性

帮助 HTML 标记进一步控制 HTML 文件的内容

比如，内容的对齐方式（如本例），文字的大小、字体、颜色，网页的背景样式，图片的插入，等等。

<标记名称属性名 1=“属性值 1” 属性名 2=“属性值 2” …>

align

控制段落水平位置–左对齐、居中、右对齐

align=left|center|right

bgcolor

设置背景颜色，两种表示法：1、颜色值red-blue等；2、十六进制FFFFFF

文字特殊样式

标记                显示效果
<b></b>             文字以粗体方式显示
<i></i>             文字以斜体方式显示
<u></u>             文字以加下划线方式显示
<s></s>             文字以加下删除方式显示
<big></big>         文字以放大方式显示
<small></small>     文字以缩小方式显示
<strong></strong>   文字以加强强调方式显示(粗体)--带语义，方便搜索引擎和语音阅读
<em></em>           文字以强调方式显示(斜体)--带语义，方便搜索引擎和语音阅读
<address></address> 用来显示电子邮件地址或网址
<code></code>       用来说明代码与指令

font 标签

color-颜色
size-大小
face-字体

特殊符号

符号    HTML 代码
<       &lt;
>       &gt;
©       &copy;
空格    &nbsp;
上标    <sup></sup>
下标    <sub></sub>

三、其他标签

1. 图像标签

基本格式：<img src=url alt="xxx" title="xxx" width="x/ height="x">

src：可以使用绝对路径或者相对路径：../表示上一级
alt：图象没加载出来，替换文本
title：相当于ToolTips，鼠标悬停文字

  <img alt="图片" width="100" hight="100" title="美女" src="D:/face.jpg">

2. 超链接标签

文字超链接：<a href="http://baidu.com">百度</a>

图片超链接：

<a href="http://baidu.com">
	<img width="300" src="https://www.baidu.com/cache/yunying/worldearthday/img/doodle_w.png">
</a>

超链接打开方式：

新窗口打开超链接：<a href="http://baidu.com" target="_blank">百度</a>

target属性，标识打开方式
_blank  新窗口显示目标
_self   当前窗口显示
_parent 父窗口显示
_top    浏览器窗口
_search 搜索区显示

锚链接

<a href="">回到顶部</a>
注意：首先需要标记，才能跳转，使用name做标记，href如果跳转锚，则需要带上#
同页面跳转：

<a name="top">top</a>
。。。
<a href="#top">回到顶部</a>

跨页面跳转：

<a href="xxx.html#top">回到xxx页面的顶部</a>

电子邮件链接

<a href="mailto:447560484@qq.com">百度</a>

框架链接frameset

网页布局工具，将浏览空间分割，独立显示不同网页
权重与body平级

cols属性分割左右窗口–三七开

<frameset cols="30%,*">
    <frame>
    <frame>
</frameset>

rows属性分割上下窗口

<frameset rows="30%,20%,*">
    <frame>
    <frame>
    <frame>
</frameset>

嵌套

frameset中的frame可以随意嵌套，只需用frameset替换frame即可

框架中插入网页
- 在frame标签中定义src属性即可
- 例
```
<frame src="a.html">
```

框架中建立链接

定义name属性，在链接标签中定义target为name值即可

...
<frameset cols="30%,*">
    <frame src="info.html">
    <frame name="show">
</frameset>
...

info.html-->
<body>
    <a href="a.html" target="show">a</a>
    <a href="b.html" target="show">b</a>
    <a href="c.html" target="show">c</a>
    ...
</body>

嵌入式框架iframe–网页浮动窗口，在一个网页中嵌套另一个网页

例

<body>
    <iframe src="http://baidu.com" name="baidu" frameborder="0" width="1000px" height="800px"></iframe>
</body>

可以通过内联框架iframe和a标签动态赋值iframe的src：

<iframe src="" name="baidu" frameborder="0" width="1000px" height="800px"></iframe>
<a href="http://baidu.com" target="baidu"/>

当iframe的src没有数据时，可以通过指定a标签target目标和跳转的目标，给iframe src动态赋值，target指向name。

3. label标签

label标签有一个属性：for，可以将焦点转移到目标控件上！

<input type="text" id="abc"/>
<label for="abc">点击标签在abc中输入</label>

四、表格标签

基本标签

标签<table></table>

行<tr></tr>
列<td></td>
表头<th></th>
表题<caption></caption>

注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tbody、tfoot，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
表格边框属性border="1"

例

  <table border="1">
      <caption>abc</caption>
      <tr>
          <th>1</th>
          <th>2</th>
      </tr>
      <tr>
          <td>1-1</td>
          <td>1-2</td>
      </tr>
      <tr>
          <td>2-1</td>
          <td>2-2</td>
      </tr>
  </table>

效果：

abc
1	2
1-1	1-2
2-1	2-2

cellpadding属性–单元格内容边距

例：cellpadding=“20px”

cellspacing属性–单元格线大小

例：cellspacing=“20px”

合并单元格

colspan左右合并–列属性
rowspan上下合并–列属性

<table border="1">
    <tr>
        <th>1</th>
        <th>2</th>
    </tr>
    <tr>
        <td colspan="2">1-1</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
    </tr>
</table>

效果：

1	2
1-1
2-1	2-2

align属性–水平对其方式：align="left|center|right"

valign属性–垂直对其方式：valign="top|middle|bottom"

bgcolor属性–背景色

<table border="1">
    <tr bgcolor="red">
        <th>1</th>
        <th>2</th>
    </tr>
    <tr>
        <td colspan="2">1-1</td>
    </tr>
    <tr>
        <td bgcolor="blue">2-1</td>
        <td>2-2</td>
    </tr>
</table>

五、表单★★★

表单一般都以：input类型
在这里插入图片描述

1. form表单

最主要的两个属性：method和action，用于向服务器提交数据

<form action="a.jsp" method="get">具体内容</form>

method–get:数据量小<10kb，通过url编码，数据与url通过？隔离，键值对采用=，不同键值对采用&隔离。
method–post:数据量大
action:不指定，则提交给当前程序，否则提交给指定程序，可以是页面，也可以是某个action请求

2. 文本表单

文本如：用户名：<input type="text" id="userName" name="userName" readonly/>
readonly：只读属性，页面上不可改写
disabled：禁用，禁用属性标识无法点击，无法交互
placeholder：由于提示输入：placeholder=“请输入数字”
注意： id必须唯一，用户名可以不唯一
密码 <input type="password" id="pwd" name="pwd"/>，密码表单：填入的数据用*代替
域 <textarea id="desc" name="desc" rows="4" cols="30">内容</textarea>

3. radio单选框

<input type="radio" name="sex" />男
<input type="radio" checked="checked" name="sex" />女

name相同才能保证在同一组
checked="checked"表示默认选中

4. checkbox复选框

<input type="checkbox" name="hobby">游泳
<input type="checkbox" name="hobby" checked>跑步
<input type="checkbox" name="hobby">健身

5. select下来列表

<select id="grade" name="grade">
	<option value="1">一年级</option>
	<option value="2">二年级</option>
	<option value="3" selected>三年级</option>
</select>

注意：selected属性可以设置默认选中

6. 按钮

// 普通按钮
<input type="button" value="reste" />

// 图片按钮（有自动提交功能）
<input type="image" src="../1.jpg"/>

// 提交按钮
<input type="submit" value="登陆"/>

// 重置按钮（会清空表单）
<input type="reset" value="清空"/>

注意：图片按钮有自动提交功能！出发submit form表单监听submit事件，触发后会将当前表单信息提交到form所规定的action目标。

7. 文件上传

<input type="file" id="f" name="f"/>

8. 滑块range

max和min限定范围，step限定步长

<input type="range" name="r" max="100" min="0" step="2"/>

9. 搜索search

<input type="search" name="s" />

10. data(html5规范)

<input type="data"/>

11. 隐藏域

放置在form标签中，用于存放ID信息做校验，提交的时候虽然看不到，但是提交的字段里有
<input type="hidden" value="ajdflkasdjlf32@kjafkjad"/>

注意！！！当表单中标签有name属性时，get方式会将其键值对显示在url中

12. 字段验证

验证很重要，在前端就验证好，避免后端压力过大
标签内置验证：

// 邮件验证
<input type="email" name="email/>
// url验证
<input type="url"/>
// 数字验证 max和min限定范围，step限定步长
<input type="number" name="num" max="100" min="0" step="10"/>
// 电话验证
<input type="tel"/>

属性验证：

required：当input带这个属性，则该控件必填，否则无法提交
pattern：正则验证，pattern=“正则”

六、媒体标签

视频标签video

必填选项：src，视频源地址
controls：显示控制组件
autoplay：自动播放
demo：

<video src=".../resources/video/1.mp4" controls autoplay></video>

音频标签audio

必填选项：src，音频源地址
controls：显示控制组件
autoplay：自动播放
demo：

<audio src=".../resources/video/1.mp3" controls autoplay></audio>

七、网页结构

在这里插入图片描述

八、HTML5新增

html5是唯一一个通用跨平台语言：PC MAC iPhone Android，快速迭代，降低成本，分发效率高

1 DOCTYPE

doctype用于指示浏览器运行在何种模式下去解析html文件

天落枫

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML5复习——B站

目录一、Html介绍二、基本标签文字标签列表div块span行内标签三、基本属性alignbgcolor文字特殊样式font 标签特殊符号三、其他标签1. 图像标签2. 超链接标签锚链接电子邮件链接框架链接iframe四、表格标签基本标签合并单元格bgcolor属性--背景色五、表单隐藏域一、Html介绍超文本标记语言：Hyper Text Markup LanguageW3C：万维网w3c标准包括：结构化标准语言：html xml表现标准语言：css行为标准语言：dom ECMAScrip
复制链接

扫一扫