【WEB】HTML最常用的基础知识

没脖子的喵先生

已于 2022-02-05 12:28:51 修改

阅读量239

点赞数

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

于 2022-01-27 22:14:47 首次发布

本文链接：https://blog.csdn.net/sinat_24645985/article/details/122724405

版权

web 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

常规定义解释

HTML

-了解-

超文本标记语言，是标记语言，并不是变成语言，全称Hyper Text Markup Language

web语义

-了解-

HTML标签所含的意思，用于告诉浏览器（机器）所要表达的意思

常用含有语义的标签，可以在网站收录和抓取的时候更有优势，但是不要乱用语义标签，会造成抓取不到重点

文档流

元素排版布局过程中，元素会自动从左往右，从上往下的流式排列

脱离文档流

也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

只有绝对定位absolute和浮动float才会脱离文档流。

行内元素

仅包含标签内容的空间，不可以设置宽高，内容占有多大面积元素标签就占有多大面积

块级元素

块级元素可以设置宽高，但依旧独占一行

行内块元素

可以设置宽高（块级元素特点），但是又不独占一行（行内元素特点）

行内元素与块级元素对比

一般情况下，行内元素只能包含数据和其他行内元素。
而块级元素可以包含行内元素和其他块级元素。

默认情况下，行内元素不会以新行开始，而块级元素会新起一行。

HTML属性

又叫标签属性

属性总是以名称/值对的形式出现，比如：name=“value”。个别属性可以只写值，一般当名称/值时一样的时候，比如noshade="noshade"就可以只写
属性总是以名称/值对的形式出现，比如：name=“value”。个别属性可以只写值，一般当名称/值时一样的时候，比如noshade="noshade"就可以只写

属性总是在 HTML 元素的开始标签中规定。

注释

用于解释说明作用的文字

常用标签

注释标签

<!--注释内容 -->

DOCTYPE

-了解-

<!DOCTYPE html>

文档说明标签，告诉浏览器用哪一种标准解析加载页面

写上此标签说明以HTML5标准，不写此标签说明以HTML4标准

一般IDE会自动生成

html标签

<html lang="en"> <!--en代表英文语言-->

一般用于提示浏览器页面原语言，比如Chrome会根据所在地区和网页匹配提示是否翻译此网页

标题标签

<h1>主标题（一级标题）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签

<p>这里是段落</p>

换行标签

<br />或者<br>

横线标签

-了解-

<hr />或者<hr>

横线标签用的比较少，多数都用<div>标签代替

加粗标签

<b>加粗，但是没有语义</b>
<strong>加粗，有语义，表示重要</strong>

倾斜标签

<i>倾斜，但是没有语义</i>
<em>倾斜，有语义，表示强调</em>

删除标签

<s>删除线，但是没有语义</s>
<del>删除线，有语义，表示删除</del>

下划线标签

<u></u>

下标标签

<sub></sub>

上标标签

<sup></sup>

特殊符号

'<' : &lt;
'>' : &gt;
空格 : &nbsp; <!-- 不推荐，受很多因素影响 -->
       &emsp; <!-- 推荐，正好是一个汉字的宽度，不受字体限制 -->
版权 ：&copy;
商标 ：&trade;和&reg;

div标签

<div></div>

盒模型常用标签，块级元素，常用于各种布局

span

<span></span>

一般用于对某个文本修饰时候，行内元素

列表

有序列表

<ol type="A" start="4"> <!--ordered list-->
       <li></li> <!-- list item -->
</ol>

<ol> 属性

type :序列类型，取值 1,A,a,I,i

start :第几位开始值，取值只能是 数字，表示从序列类型的第几个开始有序列表

无序列表

<ul> <!--unordered list-->
       <li></li> <!-- list item -->
</ul>

<ul> 属性

type :序列类型，取值 disc | circle | square | none

自定义列表

<dl>
       <dt></dt>
       <dd></dd>
</dl>

多用于图文混排

注意

ul和ol中只能放li，但是li中没有限制

一般dl>dt+dd组合一组，多组形成自定义列表

图片标签

<img src="图片路径"  alt="图片加载失败提示"
 title="鼠标悬停提示信息"/>

<img> 属性

src :图片路径，相对路径和绝对路径，绝对路径用的特别少

相对路径： ./ 代表当前路径下, ../ 代表上一层目录

超链接标签

<a href="http://www.w3school.com.cn">W3School</a>

<a> 属性

herf : 超链接网址，用于点击跳转

title : 鼠标悬停提示信息

target : 以什么样的方式打开网页，取值 _self 默认值，当前网页跳转。_bank 新窗口打开网页

表格标签

<table border="1"> <!-- 创建表格 -->
       <tr> <!-- 行 -->
              <th>Month</th> <!-- 表头,是特殊形式的td -->
              <th>Savings</th>
       </tr>
       <tr>
              <td>January</td> <!-- 单元格 -->
              <td>$100</td>
       </tr>
</table>

table 属性

-了解-

cellspacing : 单元格与单元格之间的间隙

cellpadding : 单元格与内容之间的间隙

一般情况下这两个值用于清除单元格默认样式，CSS中有替代样式 border-collapse:collapse;

td 属性

colspan : 单元格可横跨的列数

rowspan : 单元格可横跨的行数

表单相关标签

form | input | lable

<form action="/action_page.php">
       <label for="fname">First name:</label><br>
       <input type="text" id="fname" name="fname" value="Bill"><br>
       <label for="female">Female</label>
       <input type="radio" name="sex" id="female" />
       <input type="submit" value="Submit">
</form>

lable 标签

一般用于和 input 标签绑定，提升用户体验，不会有任何样式体验

label 标签的 for 属性应当与 input 的 id 属性相同，点击 lable 包含的内容会激活 input

form 标签

用于收集用户信息

属性

action : 提交信息的地址

method : 提交方式

POST（提交）| GET（获取）

input 标签

输入标签

属性

type : -必要- 输入类型（部分）

text（文本） | password（密码） | radio（单选框) | checkbox（多选框） | file（文件类型） | submit（提交
) | reset（重置） | button（按钮：同 button 标签，用于提交验证，优于submit） | hidden（隐藏：一般用于给后台传递隐藏信息）| color（颜色选择） | email（邮箱） | date（日期） | datetime-local（日期和时间）

placeholder : 提示信息

适用于以下的 type：text, search, url, telephone, email 以及 password。

value : 默认值或者显示文本

对于 “button”, “reset”, “submit” 类型 - 定义按钮上的文本

对于 “text”, “password”, “hidden” 类型 - 定义输入字段的初始（默认）值

对于 “checkbox”, “radio”, “image” 类型 - 定义与 input 元素相关的值。该值会发送到后台。

value 属性对于 type="checkbox" 和 type="radio" 是必需的。不适用于 type="file"

name : -必要- 表单需要提交信息的元素的key

checked : type="checkbox | radio" 选中

autofocus : 获取焦点

required ：必须项

pattern : 匹配正则表达式

disable : 禁用，不只限制于 input

readonly : 只读，不只限制于 input

下拉菜单

<select>
       <option value="1">黑龙江</option>
       <option value="2">杭州</option>
       <option value="2">天津</option>
</select>

select 属性

size : 控制下拉列表默认显示个 option 个数

mulitpe : 多选，默认显示 4 个 option ，可以用 size 修改显示数量

option 属性

value : 提供给后端的值

selected ：默认选中

按钮标签

<button>提交</button>

比 input 标签的 type="submit" 常用，便于表单验证

文本域

<textarea rows="3" cols="20">
这里是没脖子的喵先生的博客
</textarea>

一个大的文本输入框

textarea 属性

cols ：规定文本区内的可见宽度,使用CSS的 width 替代

rows : 规定文本区内的可见行数,使用CSS的 height 替代
placeholder : 提示文本

CSS中 resize 属性可以控制文本域是够能用通过鼠标拉伸，及可拉伸方向

vertical | horizonral | both | none（常用，不允许改变文本域大小）

字段集

-了解-

<fieldset>
       <legend>基本信息</legend> <!-- 标题 -->
       身高：<input type="text" />
       体重：<input type="text" />
</fieldset>

字段集一般配合 form 表单一起使用，会将 fieldset 内的信息整合在一个组（边框）之内，根据浏览器的不同会呈现不同的效果，很少使用此标签

header标签

<header></header>

H5增加的语义化标签

header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等等，没有使用个数限制，可以在每一个独立的区域都拥有

section标签

<section></section>

H5增加的语义化标签

一般表示内容区域

article标签

<article></article>

H5增加的语义化标签

代表文档、页面、应用程序、或网站中一个独立的、完整的、可以独自被外部引用的内容，它可以是一篇论坛帖子、一篇文章、一篇新闻报道、一篇博客文章等任何独立的内容块，它通常有自己的标题、页脚等。因此，article元素里面可包含独立的 header、footer 等结构化元素。

main标签

<main></main>

H5增加的语义化标签

用于表现网页主要内容区域

aside标签

-了解-

<aside></aside>

H5增加的语义化标签

代表跟文档的主内容区相关，但它又独立于主内容区，并且可以被单独拆分出来，而不会对整体内容产生影响。

应该将 aside元素放在 main 元素之后，然后通过CSS来改变它们的显示顺序

footer标签

<footer></footer>

H5增加的语义化标签

一般用于脚注信息，或者文档尾部扩展等信息

视频标签

<video src="./movie.mp4" controls preload="auto"></video>

video 属性

src : 视频地址

controls : 控制栏

preload : 预加载

auto（常用） | metadata | none（一般不用）

loop : 循环播放

autoplay : 自动播放

有此值时则忽略 preload

poster : 视频封面URL

muted : 静音

音频标签

    <audio src="./jiejie.wav" controls loop autoplay muted></audio>

audio 属性

src : 音频地址

controls : 控制栏

preload : 预加载

auto（常用） | metadata | none（一般不用）

loop : 循环播放

autoplay : 自动播放

有此值时则忽略 preload

muted : 静音

数据列表

<input list="browsers">
<datalist id="browsers">
       <option value="Internet Explorer">
       <option value="Firefox">
       <option value="Chrome">
       <option value="Opera">
       <option value="Safari">
</datalist>