HTML基础概述

最新推荐文章于 2024-07-28 16:45:11 发布

清风不识面

最新推荐文章于 2024-07-28 16:45:11 发布

阅读量264

点赞数

分类专栏： HTML 文章标签：大数据 html 前端

本文链接：https://blog.csdn.net/qq_30236721/article/details/125436550

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言：

对于HTML基础知识总结记录。

1.简介

html 是 Hyper Text Markup Language 的缩写。即超文本标记语言。

分为三个部分来理解：

超文本：超出文本范畴。例如：图片、视频等。
标记：指的是标签。使用标签进行标记我们所需要的事物以及相关的属性。
语言：指人与机器，机器与机器交流沟通的方式。

2.基本语法

1.html基本结构

<!-- 注释 -->

<!-- html文档声明, 表示这是什么文件，以及html的版本，此时的版本是 html5 -->
<!DOCTYPE html>
<!-- html标签：是根标签,一个文件中根级别的html标签只能有一个
lang属性表示 此页面使用的语言是什么 en: english, zh(zh-cn):chinese
-->
<html lang="en">
<!--
head标签: 在标签中 声明一些 html文件的配置信息。head定义的内容一般不在页面中显示
    例如: 文件的解析编码，页面标题
-->
<head>
    <!-- meta表示元数据, 加了charset属性时，表示 告诉 浏览器
    使用哪种字符集解析文件内容
    -->
    <meta charset="UTF-8">
    <!-- title标签 用于定义 页面窗口标签的标题 -->
    <title>测试</title>
    <!-- link标签 一般用于引入 外部的 css 文件，href值是文件地址 -->
    <link rel="stylesheet" type="text/css" href="">
    <!-- script标签 有src时 一般用于引入 外部的 js 文件，src值是文件地址 -->
    <script type="text/javascript" src="" ></script>
    <!-- style 定义文件内的 css -->
    <style type="text/css" >
        /*自定义css*/
    </style>
    <!-- script 没有src时，用于定义文件内使用的 js 代码 -->
    <script type="text/javascript" >
        // js代码
    </script>
</head>
<!-- body标签: 是 html文件的正文标签。
用于在页面显示的内容都需要写在此标签中。
浏览器有强大的 容错 和 纠错 能力。
html 语法 要求不严格，大小写不敏感，可以缺失闭合标签。
建议书写要规范。
-->
<body>
<div>xxxxxx</div>
<marquee>欢迎学习Java Web</marquee>
</body>
</html>

2.标签分类

常用分类： 根据标签在文档中位置的特性分为：块级标签、行级标签、行级块标签。

1.块级标签(block)

在浏览器显示结果来看，该标签默认是独占一行。

常见的块级标签: div, p, h1~h6, table, form, ol, ul 等。

特点：

可以设置宽高、内外边距。
独占一行。(可以认为该标签前后都有换行。不允许其他标签与其在同一行)
如果不设置宽高，则该元素的宽度会和父元素相同。高度会根据内容自动变化。

2.行级标签(inline)

在浏览器显示结果来看，该标签默认可以和其他行级标签在同一行显示。

常见的行级标签: span, a, i, label 等。

3.行级块标签(inline-block)

在浏览器显示结果来看，该标签默认可以和其他行级标签或行级块标签在同一行显示。

常见的行级块标签： input, img 等。

特点：

可以设置宽高、内外边距。
可以与其他行级、行级块标签共处一行

3.标签组成

<!-- 标签名 只能是一个 “<” 后面紧跟的第一个单词 -->
<标签名 属性名1="值1" 属性名2="值2" >文本内容</标签名>

<!-- 非闭合标签，没有文本内容 -->
<标签名 属性名1="值1" 属性名2="值2" />

3.常用标签

1.常用的空标签 --- br 换行。hr水平线、link 引入外部外部css 、meta 字符集

<div>测试测试测试测试测试测<br>
    试测试测试测试测试测试</div>
<!-- br 换行标签 -->
<br/>
<!-- hr 水平线, 分割线 -->
<hr>
<!-- link 引入 外部 css 文件，一般写在 head 标签中 -->
<link rel="stylesheet" href="" >
<!-- 此处 表明 页面解析使用的 字符集，一般写在 head 标签中 -->
<meta charset="UTF-8" >

2.正文标题标签 --

h1~h6 标签中的文本字体大小依次变小。
默认字体加粗，且是块级别标签，不能与其他标签存在一行

<!-- 用于表示 一段文字的标题 -->
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<h7>h7</h7><h7>h7</h7>
<!-- 浏览器无法识别的 标签 将被当做是 普通文本标签，例如 span -->

3.文本标签

不建议使用，直接使用css更佳

1.font

2.b(blod) --加粗

3.i --用于让文字变倾斜。是行级标签。

4.del---用于给文字添加删除线。是行级标签。

5.ins -- 用于给文字添加下划线。是行级标签。

6.address -- 主要用于定义文档或文章中作者或拥有者的联系信息。标签内的字体默认倾斜。是块级标签

7.pre --- 主要用来显示 文本原来的格式 的标签。即不改变标签中文本的排版。是块级标签，且默认有上下外边距。

4.块和段落标签

1.div -- 块标签，主要作用是把文档分割成独立的、不同的部分。

2.span -- 组合行内元素，可以设置不同的样式

<span>
    test
    <i>倾斜字体</i>
    <b>加粗</b>
</span>

3.p

主要用于定义文档的段落。可以包含行标签，不能包括块标签

<p>
    test
    <input type="text"name="test">
    <label>工资：<input type="range" name="sal" min="1000" max="100000" step="1000" ></label>
</p>

5.html实体字符

在html中，有一些字符具有特定的作用，不能直接在浏览器中显示，例如 : <、& 。

所以使用实体字符进行转换。实体字符对大小写敏感

显示结果	描述	实体名称	实体编号
	空格	` `
`<`	小于号	`<`	<
`>`	大于号	`>`	>
`&`	和号	`&`	&
`"`	引号	`"`	"
`'`	撇号	`'`	'
`￠`	分（cent）	`¢`	¢
`£`	镑（pound）	`£`	£
`¥`	元（yen）	`¥`	¥
`€`	欧元（euro）	`€`	€
`§`	小节	`§`	§
`©`	版权（copyright）	`©`	©
`®`	注册商标	`®`	®
`™`	商标	`™`	™
`×`	乘号	`×`	×
`÷`	除号	`÷`	÷

详情: HTML 实体符号参考手册

6.列表标签

主要用于页面中的菜单导航，以及内容的分类。

1.ol

有序列表 ordered list，块级标签。

语言:
<!--
li标签 表示 列表项
type 属性 表示 序号样式，值常有：
    1: 序号为数字(默认值)
    a: 序号为小写字母
    A: 序号为大写字母
    i: 序号为 小写罗马数字
    I: 序号为 大写罗马数字
start 属性 表示 序号从几开始，值是 阿拉伯数字
reversed 属性 表示 表示 反转,倒序。该属性的值是 boolean类型的，有此属性即为true,否则为false
-->
<ol type="1" reversed >
    <li>汉语</li>
    <li>英语</li>
    <li>日语</li>
    <li>法语</li>
</ol>

2.ul

无序列表 unordered list，块级标签，用法与ol相同。


<!--
li标签 表示 列表项
type 属性 表示 序号样式，值常有：
    disc 表示 实心圆点，默认值
    square 表示 实心方块
    circle 表示 空心圆点
-->
<ul type="circle" >
    <li>汉语</li>
    <li>英语</li>
    <li>日语</li>
    <li>法语</li>
</ul>

3.dl

自定义列表

<dl>
    <dt>Java</dt>
    <dd>是一种高级编程语言</dd>
    <dd>是一种入门相对简单的语言</dd>

    <dt>HTML</dt>
    <dd>超文本标记语言。浏览器可以解析。</dd>
</dl>

7.超链接标签

标签名 a ，主要用于从一个页面跳转到另一个页面。

没有 href 属性的 a 标签将不具备页面跳转功能。

<a href="http://www.baidu.com">百度</a>

常用属性:

target：目标，以哪一种方式打开 href 属性对应的页面。target常见的值有：
- blank：在新窗口中打开，当要打开的窗口已存在时，会显示并刷新该窗口。
- _blank：在新窗口中打开，无论是否已打开，都会开一个新窗口。
- _self：在当前窗口中打开。是默认值。
- _parent：在父窗口中打开，如果没有父窗口，则在当前窗口打开。
- _top：在最顶层的窗口中打开。如果没有最顶层的窗口，则在当前窗口打开。
- 是framename，是页面中某个 iframe标签的name属性的值。即在此iframe中打开。
href：链接指向的页面的URL(可以是相对地址，可以是请求路径,即网络地址)。
- 没有值，会跳转当前页面，相当于刷新。
- 值是 #，跳转到当前页(相当于回到顶部)，并且在浏览器地址栏后追加 # 。
- javascript:void(0); 表示什么都不做。如果把void(0) 换成js中的函数，则点击时会执行该函数。
- 值是 #当前页面中某个标签的id属性值 或 其他页面的访问地址#该页面中标签的id属性值
  
  一般称之为锚记。点击该a标签时，页面会跳转到该锚点处。

1.iframe

在html页面中再嵌入一个html页面(窗口)

<!-- src 是地址(一般是相对当前页面的地址) -->
<iframe name="abc" width="400px" src="./c01.html" frameborder="0"></iframe>

8.图片标签 ---用来在页面中引入一个图片

<!-- 只设置 宽或高时，另一个会自适应 -->
<img width="400px" src="../sources/Desert.jpg" alt="图片加载失败">

<!-- 图片超链接 -->
<a href="http://www.baidu.com" target="_blank">
    <img width="100px" src="../sources/PCtm.png" alt="图片加载失败">
</a>

<a href="http://www.baidu.com" target="_blank">
    <img width="200px" src="http://www.baidu.com/img/flexible/logo/pc/result.png" alt="图片加载失败">
</a>

9.表格标签

页面中定义表格使用，table为根标签

caption 标题。thead 列标签、tbody 表格内容, tfoot 合并单元格 。

表格的基础组成标签：tr 行标签，th 列头单元格(列名), td 普通单元格。

width : 表格宽度
height : 表格高度
border: 边框的宽度
cellspacing: 单元格间距
cellpadding: 单元格内容与单元格边框之间的距离

<!-- 单元格合并 -->
<table width="300px" border="1px" cellspacing="10px" cellpadding="10px" >
    <thead>
        <tr>
            <th>商品</th>
            <th>类型</th>
            <th>价格</th>
            <th colspan="2" >操作</th>
            <!--<th>操作2</th>-->
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>矿泉水</td>
            <td rowspan="2" >饮料</td>
            <td>2</td>
            <td>查看详情</td>
            <td>修改</td>
        </tr>
        <tr>
            <td>可乐</td>
            <!--<td>饮料</td>-->
            <td>3</td>
            <td>查看详情</td>
            <td>修改</td>
        </tr>
        <tr>
            <td>面包</td>
            <td>面点</td>
            <td>2</td>
            <td>查看详情</td>
            <td>修改</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5" >商品清单</td>
        </tr>
    </tfoot>
</table>

10.表单相关标签(重点)

form 是表单标签，是块级标签。

用于用户输入信息，向服务器传递数据。

表单标签中需要有组件标签。例如 input。

<!--
action 表示 表单数据提交的地址
method 表示 数据提交的方式(get/post, 默认为get)
enctype 表示 数据的格式
默认值: application/x-www-form-urlencoded
文件上传时使用 multipart/form-data
onsubmit 表示在表单提交前会执行其中的 js 代码
-->
<form action="" method="get" >
  <!-- 组件 -->
</form>

2.input标签

是 form的组件，用于收集用户输入的信息。根据type属性值不同，会表现出不同的功能。

是行级块标签。

type属性常见的值有：text,password,button等。

input组件的常用属性：

name 向服务器传递数据时，name属性的值是该数据的名称。可以称之为参数名。

如果想把组件的value的值传递到服务器，则name属性值必须存在。
value 是上述参数名所对应的值。实际的值，用户输入的值。

text

文本框，用于接收用户输入的文本信息。

<!--
placeholder ： 内容区域占位，即输入提示，用户未输入内容前显示的信息。
value : 是真正的值，可以用于预先填入默认值
-->
<input type="text" name="wd" placeholder="请输入查询内容" >

password

密码框，用于接收用户输入的需要隐藏实际内容的一些信息。例如密码。

<input type="password" name="pwd" placeholder="请输入密码">

radio

单选框，定义一组让用户选择的项，且用户只能选择一项。

一个radio 只是一项，其中value的值是向服务器传递的数据，不是给用户看的。

通过设置单选框的 name属性的值，name属性值相同时，

表示这些单选框是同一组，同一组中的单选框只能选一个。

<!-- checked 属性的值是boolean类型， 有此属性表示 true，反之表示false
为true时，会默认变为选中状态。
-->
<!-- 类似 span标签，主要用于对form组件做一些说明。
当label标签的 for属性的值是有对应的标签的id时，
点击label标签就相当于点击 id值对应标签
-->
<label for="manSex">性别：</label>
<input id="manSex" type="radio" value="男" name="sex" checked >男
<label><input type="radio" value="女" name="sex" >女</label>

checkbox

复选框，定义一组让用户选择的项，用户可以多选。

通过相同的name属性值，把多个复选框划分为一组。

其中value的值是向服务器传递的数据，不是给用户看的。

<span>爱好:</span>
<!-- 有checked属性表示 被默认选中 -->
<label><input type="checkbox" name="hobby" value="write_bug" checked >写BUG</label>
<label><input type="checkbox" name="hobby" value="modify_bug" >改BUG</label>
<label><input type="checkbox" name="hobby" value="run" >跑路</label>

number

数值框，用于接收用户输入的数字。非数字的值在获取时，拿到的是空字符串。

<!--
min 允许的最小值
max 允许的最大值
step 通过按钮修改时，值每次变化的量(默认为1)
-->
<label>年龄：<input type="number" name="age" min="1" max="120" step="1" ></label>

邮件框，接收用户输入的邮箱地址。

<label>邮箱：<input type="email" name="user_email" ></label>

range

范围框，用于让用户在指定的数值范围中选择一个值。

<!--
min 可选择的最小值
max 可选择的最大值
step 通过按钮修改时，值每次变化的量(默认为1)
用户选择的值，用户本身是看不到的，包括最大、最小可选值 也看不到。
-->
<label>工资：<input type="range" name="sal" min="1000" max="100000" step="1000" ></label>

date/time

日期与时间框。

<label>生日：<input type="date" name="birthday" ></label>
<label>时间：<input type="time" name="time" ></label>

file

文件框，用于接收用户选择的文件。

上传文件时，必须设置 form的 enctype="multipart/form-data" , 否则无法传输文件。

<!--
默认单选，可以选任意文件
multiple 有属性时，可以选多个文件。
accept 限制选择的文件类型
-->
<label>头像：<input type="file" name="headImage" multiple accept="image/*" ></label>

color

获取用户选择的颜色值。

<label>喜欢的颜色：<input type="color" name="color"></label>

hidden

隐藏域。用于隐藏一些内容，该内容不想让用户看到，但服务器需要。

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

按钮

button 普通按钮，默认没有任何效果。主要用于调用js代码。
reset 重置按钮，清空 所在form 中所有用户可输入的组件的value，使其恢复成默认状态。
submit 提交按钮，把 所在form 中的可用数据提交给设置的服务器。

<form action="xxx" >
    <input type="submit" value="提交" >
    <input type="reset" value="reset" >
</form>

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

<!-- 按钮有自己标签, 与input的按钮仅仅是写法不同，功能和用途相同 -->
<button type="submit" >按钮显示的文字</button>
<button type="reset" >按钮显示的文字</button>
<button type="button" >按钮显示的文字</button>

3.input标签的只读与禁用

一般 readonly (只读属性) 会加在可输入的input上，一般 disabled (禁用属性) 加在按钮上。

如果输入框加了 disabled ，则该框的value将无法传递到服务器。

<input type="text" name="wd" placeholder="请输入查询内容" value="html" readonly >
<input type="button" value="button" disabled >

4.文本域

文本域，多行文本框。

<!--
name 用于向服务器传递数据
cols 字符列数，每行有多少个字符
rows 显示的最多行数。
textarea 没有 value属性，其标签中的文本就是值，将要传递到服务器的数据。
其标签中的文本 如果预先定义好的话，在页面显示出来的结果 类似 pre 标签。会保留书写的格式
-->
<textarea name="msg" cols="30" rows="10">测试测试测     试测试测试测试测试测试</textarea>

5.select标签

下拉菜单框。默认是单选。

根标签是 select。子标签是 option，表示一个选项。

<!--
option的value值是给服务器的数据，标签中的内容是给用户看的。
option的value属性可以省略，省略时，会把 标签中的内容 发生给服务器。
给 option 添加 selected 属性，设置其为默认选中。
如果想要实现可以多选，给 select 添加 multiple 属性
-->
<label for="city">城市:</label>
<select id="city" name="city" >
    <option value="nj">南京</option>
    <option value="sh">上海</option>
    <option value="bj" selected >北京</option>
</select>

清风不识面

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础概述

对于HTML基础知识总结记录。html 是 Hyper Text Markup Language 的缩写。即超文本标记语言。分为三个部分来理解：2.标签分类常用分类：根据标签在文档中位置的特性分为：块级标签、行级标签、行级块标签。1.块级标签(block)在浏览器显示结果来看，该标签默认是独占一行。常见的块级标签: 等。特点：2.行级标签(inline)在浏览器显示结果来看，该标签默认可以和其他行级标签在同一行显示。常见的行级标签: 等。3.行级块标签(inline-block)在
复制链接

扫一扫

专栏目录

显示结果	描述	实体名称	实体编号
	空格	` `
`<`	小于号	`<`	<
`>`	大于号	`>`	>
`&`	和号	`&`	&
`"`	引号	`"`	"
`'`	撇号	`'`	'
`￠`	分（cent）	`¢`	¢
`£`	镑（pound）	`£`	£
`¥`	元（yen）	`¥`	¥
`€`	欧元（euro）	`€`	€
`§`	小节	`§`	§
`©`	版权（copyright）	`©`	©
`®`	注册商标	`®`	®
`™`	商标	`™`	™
`×`	乘号	`×`	×
`÷`	除号	`÷`	÷

显示结果	描述	实体名称	实体编号
	空格	` `
`<`	小于号	`<`	<
`>`	大于号	`>`	>
`&`	和号	`&`	&
`"`	引号	`"`	"
`'`	撇号	`'`	'
`￠`	分（cent）	`¢`	¢
`£`	镑（pound）	`£`	£
`¥`	元（yen）	`¥`	¥
`€`	欧元（euro）	`€`	€
`§`	小节	`§`	§
`©`	版权（copyright）	`©`	©
`®`	注册商标	`®`	®
`™`	商标	`™`	™
`×`	乘号	`×`	×
`÷`	除号	`÷`	÷

显示结果	描述	实体名称	实体编号
	空格	` `
`<`	小于号	`<`	<
`>`	大于号	`>`	>
`&`	和号	`&`	&
`"`	引号	`"`	"
`'`	撇号	`'`	'
`￠`	分（cent）	`¢`	¢
`£`	镑（pound）	`£`	£
`¥`	元（yen）	`¥`	¥
`€`	欧元（euro）	`€`	€
`§`	小节	`§`	§
`©`	版权（copyright）	`©`	©
`®`	注册商标	`®`	®
`™`	商标	`™`	™
`×`	乘号	`×`	×
`÷`	除号	`÷`	÷