HTML知识汇总

素颜马尾好姑娘i 2022-05-20 07:36 599阅读 0赞

**目录**

HTML知识汇总

html标准结构

table标签：表格标签

form标签：表单标签

标签属性汇总

标签分类

嵌套规则

--------------------

# HTML知识汇总 #

HTML：超文本标记语言，主要构成网页组成的结构

其实主要通过标签来标记这个网页的结构

（比如说：用header来标记网页头，body来标记网页主体，用p标签来标记这一块是段落）

文件后缀：\*.html或\*.htm

注释： pycharm直接用ctrl+/

标签分为两种：单闭合标签，双闭合标签

单闭合像<br>,双闭合像<p></p>在两个标签中间写内容

### html标准结构 ###

<!DOCTYPE HTML>
    
    <html>
    
        <head>...</head>
    
        <body>...</body>
    
    </html>

各种标签功能介绍

head标签：描述文档的各种属性和信息

可以嵌套的标签

**title标签设置标题：该标签内容将显示在浏览器标题**

*示例：<title>标题信息</title>*

**meta设置编码**

*示例：<meta charset='utf-8'>*

属性：

**http-equiv属性**：向浏览器传达一些有用的信息，帮助浏览器正确的实现网页内容

**name属性**：页面的关键字和描述，写给搜索引擎看的SEO优化

**link：引入外部的样式表，定义网站图标**

示例：<link rel="icon" href="/favicon.ico" type="image/x-icon" />

**style:设置文档css样式**

示例：<link rel="stylesheet" href="mystyle.css">

**script:设置文档js脚本**

示例：<script src="myscript.js"></script>

主要属性

**lang='en'**提示浏览器该网页语言为英文

body标签：网页主要内容写在该标签下

**h1-h6:标题标签，块级元素，主要展示文章或网页的标题**

*示例：<h1>一级标题</h1>*

注意：设置字体的大小不用该标签，该标签只是用于文章标题。

该标签为块状元素，一个标签占一行

文本修饰标签：

**<b></b>：加粗**

**<i></i>：斜体**

**<u></u>：下划线**

**<s></s>：删除线**

**<sup></sup>：上标**

**<sub></sub>：下标**

**<em></em>:斜体**

**<strong></strong>:粗体**

**p:段落标签，块级元素**

*示例：<p>这是一个段落</p>*

**span:**

用来单独设置某一段文本格式，通常嵌套在p标签里

**a:超链接标签**

行内块元素，把当前位置的文本或图片链接到该网页其他位置或者其他页面

主要属性：

**target：值为\_blank时，在新的网页上打开该链接值为\_self时，在当前网页打开该资源地址**

**title：表示鼠标悬停时显示的内容**

**href：写链接的位置，可以是一个文件，电子邮件链接，页面某个元素的id，JavaScript脚本**

**ul，ol:列表标签**

ul是无序列表，ol是有序列表

主要属性

type：列表类型

ol类型有：

1：小写字母

A：大写字母

i：小写罗马字符

I：大写罗马字符

ul类型有：

disc：实心圆(默认值)

circle：空心圆

square：实心矩形

none：不显示标识

可以嵌套的标签：

**<li><\\li>:代表列表的一项**

css中清除列表类型：list-style:none(常用)

**div:盒子标签**

块级元素，可以把页面分割成不同的板块（常用标签）

**img：图片标签**

行内块元素，使用该标签可以插入图片

主要属性

src：通过设置该属性来设置图片的来源地址，可以是本地文件，也可以是网络文件

alt：图片加载失败时，显示的内容

width，height：设置图片的宽度和高度，默认为图片的宽高

示例：<img src="ad-one.jpg" alt="图片加载失败时显示的内容">

其他标签：

**br:换行标签，单闭合标签**

**hr:分割线，单闭合标签**

注意：html会将文档类连续空格显示为一个空格，用&nbsp;可以表示一个空格，

通常空格少的情况下用，空格多的情况，使用span标签，设置其宽度，来拉开文字间距离

### table标签：表格标签 ###

主要是用来画一个表格

通常嵌套的标签：

**thead：表格头**

**tbody：表格主体部分**

**tfoot：表格底部**

表格列，行：

**tr：表格里面一行（设置行）**

**td：表格主体或表格底部里一个单元格（设置列）**

**th：表格头里一个单元格，默认加粗并居中（设置列）**

表格合并：

用在tr,th,td中的属性

**rowspan：合并行（竖着合并），从这个位置向下合并n行**

**colspan：合并列（横着合并），从这个位置向右合并n列**

### form标签：表单标签 ###

主要是可以让用户输入内容，或者单击按钮，选择啥的。然后提交给服务器

主要属性：

action：定义表单提交时发生的动作，提交处理程序的地址给服务器

method：定义表单提交的方式（默认get）

get：明文提交（数据显示在地址栏），数据最大2KB

post；隐式提交（不会显示在地址栏），数据无大小限制

enctype：定义表单编码方式

application/x-www-form-urlencoded：（默认方式）允许将普通字符，特殊字符都提交给服务器，不允许提交文件

multipart/form-data：允许被将文件提交给服务器

text/pain 只允许提交普通字符。特殊字符，文件都无法提交

注意：如果有文件需要提交给服务器时，method必须为post,entype必须为multipart/form-data

主要嵌套

**label：行内块，双闭合，显示表单文件，关联表单元素后，点击文本就和点击元素一个效果**

for属性：表示关联元素的id值

**input：行内块，单闭合**

type属性：设置输入的类型

按钮：button，submit，reset

文本：text，password，radio，checkbox

文件：file

详细介绍：

**text：单行文本框**

**password：单行文本框，输入的内容将显示为\*\*\*\***

**button：普通按钮**

**submit：提交按钮，提交表单时使用**

**radio：为单选按钮**

**checkbox：为复选框**

**file：上传文件所使用**

**reset：重置按钮**

name属性

相当于key，提交时，地址栏会显示key=value，传递给服务器

对于单选框来说，相同name的单选框会产生互斥的效果

value属性

对于按钮，重置按钮，确认按钮来说：定义按钮上的文本

对于图像按钮：定义传递像某个脚本的此域的符号结果

对于复选框和单选框：定义被单击时的结果

对于隐藏域、密码域及文本域：定义元素的默认值

不能和type=‘file’同时使用，但对单选框和多选框是必备的

placeholder属性

设置文本框在没有输入时显示的文字（例如：文本框中显示‘请输入用户名’）

checked属性

设置单选框或复选框默认选中的元素

disable属性

表示禁用该空间

**textarea：多行文本框**

行内块，双闭合。允许用户登录多行数据到表单控件中

主要属性：

cols：设置列数（间接设置控件宽度）

rows：设置行数（间接设置控件高度）

**select：下拉列表**

双闭合，内嵌option标签

主要属性：

name：选项的键

multiple：设置值时，允许多想

size：取值大于1时为滚动列表

**option标签：选项**

双闭合，下拉列表的一项

主要属性：

value：选项的值，相当于key

selected：不设置值时默认第一项会被选中

### 标签属性汇总 ###

设置方法：通过键值对的形式，键值不区分大小写

*例如：id = 'li' 键为id，值为li*

注意：

1.设置值时，值必须用引号引起来

2.一个属性有多个值时，用空格隔开；一个标签可以设置多个属性，用空格隔开

*例如：class = 'p1 p2 p3'*

3.可以自定义属性

4.通常不用html设置页面样式（字体大小，颜色，控件长宽），这些样式在后面用css设置

### 标签分类 ###

块状元素，行内元素，行内块元素

详细解释：

块状元素：<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>

css样式设置：display:block

特点：独占一行，行宽高边距都可以设置，默认为父容器100%

行内元素：<a> <span> <br> <i> <em> <strong> <label>

css样式设置：display:inline

特点：挤在一行，不可设置长宽高边距

行内块元素：<img> <input>

css样式设置：display:inline-block

特点：挤在一行，可以设置长宽高

### 嵌套规则 ###

1.  一般块元素可以嵌套块元素、行内元素、行内块；行内元素只可嵌套行内元素
2.  h1-h6标签和p标签只能嵌套行内块，不能嵌套块级元素

HTML知识汇总

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关前端 HTML/CSS 基础知识汇总

相关 Android 知识汇总

相关 react知识汇总

相关 html编辑器汇总

相关前端知识汇总

相关 html&css基础知识汇总

相关 JVM知识汇总

相关 HTML知识汇总

相关 html5标签变化知识点汇总

相关 HTML知识点详细汇总