HTML基础知识

A心动了

已于 2023-07-17 18:54:50 修改

阅读量563

点赞数 3

文章标签： html 前端

于 2023-07-12 17:52:03 首次发布

本文链接：https://blog.csdn.net/zhp19513507633/article/details/131687283

版权

HTML 基本认知

常见 5 大浏览器

IE
火狐 FireFox
谷歌 Chrome
Safari
欧朋 Opera

渲染引擎

IE浏览器内核：Trident内核，也是俗称的IE内核；
Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
Firefox浏览器内核：Gecko内核，俗称Firefox内核；
Safari浏览器内核：Webkitt内核；
Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

浏览器	内核
IE	Trident
FireFox	Gecko
Safari	Webkit
Chrome/Opera	Blink

Web 标准

保证不同浏览器打开页面显示效果一样

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式(如: 颜色、大小等)
行为	JavaScript	网页模型的定义与页面交互

B/S和C/S

B/S结构（Browser/Server，浏览器/服务器模式），是WEB兴起后的一种网络结构模式，WEB浏览器是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。客户机上只要安装一个浏览器，服务器安装SQL Server、Oracle、MySql等数据库。浏览器通过Web Server 同数据库进行数据交互。

优点：B/S最大的优点就是可以在任何地方进行操作而不用安装任何专门的软件，只要有一台能上网的电脑就能使用，客户端零安装、零维护。系统的扩展非常容易。

C/S是Client/Server的缩写。客户端/服务器开发模式,服务器通常采用高性能的PC、工作站或小型机，并采用大型数据库系统，如Oracle、Sybase、Informix或 SQL Server。客户端需要安装专用的客户端软件。C/S面向特定的用户，维护成本较高，常用于局域网

HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、视频等非文字元素。

网页的本质就是超文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

HTML 不是一种编程语言，而是一种标记语言。

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML 文档包含了HTML 标签及文本内容

HTML文档也叫做 web 页面，使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

开发工具

Visual Studio Code （首选）
WebStorm
Sublime Text
DreamWeaver
HBuilder

HTML文档结构

HTML 骨架

<html>
  <head>
    <title>网页的标签</title>
  </head>  
  <body>
    网页的主体
  </body>
</html>

html 最外层标签

<html> 元素是 HTML 页面的根元素:

head 头部

<head></head> 标签包含了文档的元（meta）数据，用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

body 主体

HTML标签分类

块级元素

块级元素独占一行可以设置宽高不设置宽度是继承父元素不设置高度内容撑开宽高 display:block

行内元素

行内元素从左到右排成一行不能设置宽高宽高由内容撑开可以设置左右内外边距行内元素中只能嵌套文本内容和行内元素（不能嵌套块级元素）

行内块元素

行内块元素 : 元素排成一行元素间默认有间距可以设置宽高和css属性需要再行内元素中设置 display:inline-block

HTML和css中的长度单位

绝对长度单位

px 像素

in 英寸 1in= 96px

cm 厘米 1cm =37.8px

mm 毫米

相对字体长度

em 1em = 16px (相对单位)

rem (相对单位

points

pica

可视区百分比长度单位

vw是可视区宽度单位。1vw等于可视区宽度的百分之一。
vw单位跟百分比很相似，不同的是vw的值对所有的元素都一样，与他们父元素或父元素的宽度无关。有点像rem单位那样总是相对于根元素。

vh和vw（viewport widht）单位一样，不同的是vh是相对于可视区的高度。

vmin

vmin的值是当前vw和vh中较小的值。
在标准尺寸类型的使用实例中，和由自己确定屏幕大小的vw、vh单位相比，vmin是一个更有用的度量标准。

vmax

vmax的值是vw和vh中的较大的值。
值得注意的浏览器支持问题：webkit内核的浏览器支持vmin，不支持vmax。但是Firefox支持vmax。

离奇的长度单位

百分比

以百分比为单位的长度值是基于具有相同属性的父元素的长度值。例如，如果一个元素呈现的宽度是450px，子元素的宽度设为50%，那么子元素呈现的宽度为225px。
杂言：百分比不是一个专门的长度单位，我把它也包括在本文中是因为百分比和长度关系很大。

HTML格式标签

所有的格式标签都是块标签。

标题标签

<h1~6 align="left|right|center|inherit"></h1~6>

div和span标签

div 是块级元素本身没有任何属性的样式，如果需要样式，需要后期添加 div为布局而生

span是行内元素本身没有任何属性的样式，如果需要样式，需要后期添加

不同点

1、div是将内容放到一个矩形的区块中，随意移动会影响布局。而span只是把内容定义成一个整体进行操作，不影响布局和显示。

2、div一般用于排版，而span一般用于局部文字的样式。

段落标签

段落标签主要用于HTML文档中的段落内容，p标签内无法嵌套其他的块标签

水平线标签

<hr width="宽度" size="大小" color="颜色"  noshade />

水平线标签主要用于题目与文章内容的分割作用

无意义块标签

无意义标签没有固定样式，使用什么样式就会表现出什么样式。

文本标签

字体标签

size：1~7
- 4表示正常，比4小为消耗字体，比4大为大号字体

粗体标签：

<b><b>

- <strong></strong>

斜体标签：

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

下划线标签：<u></u>

删除线标签：**<del></del>**

上标标签：<sup></sup>

下标标签：<sub></sub>

超链接

a 标签用来跳转页面

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

target 默认为_self表示在当前页面跳转并打开

-blank 表示在一个新页面跳转并打开原页面保留（典型的应用场景：在商品中跳转）

<a href="#id属性值" target=""></a>

a标签不仅可以给文字添加超链接，也可以为图片，视频，音频，表格等添加超链接

如果通过a标签指向一个URL那么这个URL必须在底之前存在http://或https://

使用锚点

1.在要跳转的目标处进行埋点

<a name='#锚点'></a>

空连接

<a href="##"> </a>

返回顶部：

<a href="#"> </a>

保持原位置

<a href="javascript:;"></a>

脚本连接

<a href="javascript:alert('hello')"></a>

电子邮件

<a href="mailto:邮箱地址"></a>

电话连接

<a href="tel：电话号码"></a>

相对路径和绝对路径

相对路径是指目标相对于当前文件的路径，网页结构设计中多采用这种方法来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。表示方法如下：

./ ：代表文件所在的目录（可以省略不写）

…/ ：代表文件所在的父级目录

…/…/ ：代表文件所在的父级目录的父级目录

/ ：代表文件所在的根目录

绝对路径是文件的真正路径，使用绝对路径链接外部资源。

注意：使用绝对路径必须输入完整的描述路径，这种方法指向的链接目标地址清晰明确，但有个缺点就是一旦文件被移动或删除久会造成文件无法显示，需要重新设置相关链接。

图片标签

img属于行内块标签

<img src="照片的地址" alt="当图片加载失败时显示的文字" title ="当鼠标移动到图片上显示的文字">

属性：

src：source的缩写，表示图片的路径，可以是本地文件也可以是网络路径

alt：图片无法显示的时候代替的文本，搜索引擎可以通过该属性搜索图片

title：鼠标悬停在图片上显示的内容

width：图片宽度

height：图片高度

注：宽高属性设置一个另一个会根据比例自适应

border：图片边框

HTML表格标签

在过去表格标签⽤的⾮常多，很多⽹站都是⽤表格标签进⾏布局，展示数据的。

table：表格
tr：table rows ⾏
td：table dock 单元格

表格标签之间是相互嵌套的。table>tr>td

如果我们需要添加表头的语义，可以使⽤⼀个新的标签，th标签，th：table head 表示表头单元格，替换的是td的位置，table>tr>th

标题
ID	商品名	价格	数量
1	2	3	4
1	2	3	4

表格分区

标题：caption

表头：thead

主体：tbody

页脚：tfoot

语义化标签。

tfoot的位置在thead与tbody之间

这四个表格分区标签本身没有任何样式，仅仅是⼀个区块划分标记罢了

表格标签属性

border：表格边框

cellpadding：单元格内的空间

cellspacing：单元格之间的空间

align：内容⽔平对⻬⽅式

valign：内容垂直对⻬⽅式

注意：

table 元素表示一个表格的声明

tr 元素表示表格的一行

td 元素表示一个单元格

默认的 table 表格是没有边框的 border属性表示增加一个边框

th 为表格添加标题单元格实际作用就是内部文字居中加

td th均属于单元格，包含2个属性 colspan rowspan

colspan 表示合并一行所在列合并

rolspan 表示合并一列所在行合并

HTML基础表单元素

单行文本框

属性：type="text"

<input  type="text"   name=""  size=""   maxlength="" placeholder='' value="">
<!--
type：值为text为单行文本框
size: 文本框的长度
maxlength：文本框可以输入内容的最大长度
placeholder：占位符
value：输入的内文本
name：自定义名称
-->

密码框

属性：type="password"

<input  type="password"   name=""  size=""   maxlength=""  value="">

多行文本框

<textarea  name=""   cols=""    rows=""  ></textarea>

注意：默认点击边框有一个蓝色的边框 input:focus{ outline: 0;}

单选框

属性：type="radio"

<input type="radio"  name=""  value=""  checked="checked" >
<!--
type：radio表示单选框
checked：默认选中
-->

注意：单选框name值相同则为同一按钮组；

单选框中被提交的值是value中的值

label

当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

<form>
  <label for="male">男</label>
  <input type="radio" name="sex" id="male" >
</form>

for属性：规定 label 绑定到哪个表单元素
< label > 标签的 for 属性应当与相关元素的 id 属性相同

复选框

属性：type="checkbox"

<input type="checkbox" name="hobby[]" value="乒乓球">
<input type="checkbox" name="hobby[]" value="篮球">
<input type="checkbox" name="hobby[]" value="羽毛球">
<input type="checkbox" name="hobby[]" value="网球">

注意：复选框name值必须为同名数组则为同一按钮组

下拉菜单

<!-- 单选下拉菜单 -->
<select name=""   size=""  >
	<optgroup label=分组名称>
		  <option value= " "   selected=selected></option>
        ……
    </optgroup>
 </select>
<!-- 多选下拉菜单 -->
<select name=""   size=""  multiple= "multiple" >
	<optgroup label=分组名称>
		  <option value=""   selected=selected></option>
        ……
    </optgroup>
 </select>

size：下拉菜单的高度

multiple：多重的，多个的

浏览框

<input  type="file"   name=""  accept="" >

accept：限制文件上传格式

accept=“.csv” 上传.csv格式

accept=“application/vnd.ms-excel” 上传.xls格式
accept=“application/vnd.openxmlformats-officedocument.spreadsheetml.sheet” 上传.xslx格式

accept=“text/plain” 上传.png/.jpg/etc格式

accept=“image/*” 上传图片格式

accept=“text/html” 上传.htm,.html格式

accept=“video/*” 上传video(.avi, .mpg, .mpeg, .mp4)格式

accept=“audio/*” 上传audio(.mp3, .wav, etc)格式

accept=“.pdf” 上传.pdf格式

accept=“application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel” 如果限制两种文件格式，同时限制

注意：表单提交方式必须为post
form必须设置属性enctype=“multipart/form-data”

隐藏域

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

注意：隐藏域不会在页面的显示
隐藏域的值仍会被提交到服务器

按钮

按钮有三种：普通、提交、重置

普通 type="button" 配合js完成⼀些操作
重置 type="reset" 重置表单数据有默认的按钮标题。
提交 type="submit" 提交表单

提交按钮

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

重置按钮

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

普通按钮

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

图片按钮

<input  type= "image"  src=""  name=""   value="">

readonly和disable属性

readonly

readonly 属性规定输入字段为只读,但其value值仍会被表单提交
readonly属性只针对text、password和textarea有效

disabled

disabled属性规定禁用该表单元素，其value值不会被表单提交
disabled属性对所有表单元素均有效，包括select, radio, checkbox, button等
使用disabled属性后表单元素背景会变成灰色

HTML5表单新特性

form / input autocomplete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete )：

<form action="" autocomplete="on">
    First name:<input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    E-mail: <input type="email" name="email" autocomplete="off"><br>
    <input type="submit">
</form>

form novalidate 属性

novalidate 属性是一个 boolean(布尔) 属性.

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

无需验证提交的表单数据：

<form action="demo-form.php" novalidate>
    E-mail: <input type="email" name="user_email">
    <input type="submit">
</form>

input placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

<form action="" autocomplete="on">
    用户：<input type="text" placeholder ='请输入用户名' ><br> //预期描述效果
    <input type="submit">
</form>

注意: placeholder 属性适用于以下类型的 <input>标签：text, search, url, tel, email 以及 password。

input required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。

<form action="" autocomplete="on">
    First name:<input type="text" required ><br> //禁止为空
    <input type="submit">
</form>

注意:required 属性适用于以下类型的 <input>标签：text, search, url, tel, email, password, date pickers, number, checkbox, radio 以及 file。

input autofocus 属性

autofocus 属性是一个 boolean 属性.

autofocus 属性规定在页面加载时，域自动地获得焦点。

让 “First name” input 输入域在页面载入时自动聚焦：

First name:<input type="text" name="fname" autofocus>

input form 属性

form 属性规定输入域所属的一个或多个表单。

**提示:**如需引用一个以上的表单，请使用空格分隔的列表。

位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分):

<form action="demo-form.php" id="form1">
    First name: <input type="text" name="fname"><br>
    <input type="submit" value="提交">
</form>

Last name: <input type="text" name="lname" form="form1">

input height 和 width 属性

height 和 width 属性规定用于 image 类型的 <input>标签的图像高度和宽度。

注意: height 和 width 属性只适用于 image 类型的<input>标签。
定义了一个图像提交按钮, 使用了 height 和 width 属性:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

input list 属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

input multiple 属性

multiple 属性是一个 boolean 属性.

multiple 属性规定<input>元素中可选择多个值。

注意: multiple 属性适用于以下类型的 <input>标签： file

input pattern 属性

pattern 属性描述了一个正则表达式用于验证 <input>元素的值。

注意:pattern 属性适用于以下类型的 <input>标签: text, search, url, tel, email, 和 password.

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

A心动了

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
HTML基础知识

head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。下面这些标签可用在 head 部分：, , , , , 以及。
复制链接

扫一扫