HTML快速入门

沈七QWQ

已于 2022-08-26 11:31:29 修改

阅读量726

点赞数 17

分类专栏： HTML知识梳理文章标签： html 前端 css

于 2022-08-23 11:12:00 首次发布

本文链接：https://blog.csdn.net/m0_66139206/article/details/126480259

版权

HTML知识梳理专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文已收录于专栏 ⭐️ 《HTML》⭐️

HTML快速入门

HTML 框架

<html>
	<head>
	
	 <title> <title>
	
	</head>
<body>

<body>

</html>

<!DOCTYPE html> 作用是告诉浏览器使用哪种HTML版本来显示网页,表示最新的HTML。

<html lang="zh-CN">lang表示：当先文档的显示语言 zh-CN–表示中文 en–表示英文
    
<head>
    <meta charset="UTF-8">
    <!-- 文档的元数据：即附属信息配置-->这里是规定网页内容编码为UTF-8，防止出现乱码
  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--适配手机  -->
    <title>>这里是网页标题</title>
</head>
<body>
    <h1>这里是文档体</h1>
</body>
</html>

<html>标签
HTML <html> 元素表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。

<head>标签
HTML head 元素规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。

<body>标签
HTML body 元素表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。

<title>标签
HTML <title> 元素定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。

<meta>
HTML 元素表示那些不能由其它 HTML 元相关元素表示的任何元数据信息。即附属信息配置。

常见属性：

charset：这个属性声明了文档的字符编码。
如果使用了这个属性，其值必须是与 ASCII 大小写无关（ASCII case-insensitive）的”utf-8”。
name： name 和 content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。
icon：<link rel="icon" href="images/icon.png">

快捷键：Ctrl + /

常用标签

(1)、HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；

(2)、块元素特点：

（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
（2）块元素内部可以容纳其他块元素或行元素；
常见块元素有：<h1>, <p>, <pre>, <ul>, <ol>, <table>。

(3)、行内元素特点：

（1）可以与其他行内元素位于同一行；
（2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
常见行内元素有：<i>, <b>, <del>, <ins>, <td>, <a>

块级元素

`<div>`标签

块级标签，会自动换行，本身没有语义，是一个盒子。

<div>元素是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。

`<h>`标签

HTML<h1>–<h6>标题 (Heading) 元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PB8jguND-1661222926884)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220815213556329.png)]$

`<p>`标签

HTML

元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，

是块级元素。

`<br>`标签

HTML <br> 元素在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。

`<hr>`标签

HTML <hr> 元素表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。

在 HTML 的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上。所以如果想画一条横线，请使用适当的 css 样式来修饰。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q1vVcCfw-1661222926885)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220815213708816.png)]$

行内元素

`<span>`标签

行内标签，不会换行，本身没有语义，是一个盒子。。

<span> 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span> 与 <div> 元素很相似，但 <div> 是一个块元素而 <span> 则是行内元素。

文本格式化标签

加粗

<strong>标签、<b>标签均可使字体加粗

<strong>的语义更强烈。

倾斜

<em>、<i>均可使字体倾斜

<em>的语义更强烈。

删除线

<del>、<s>均可使字体倾斜

<del>~~的语义更强烈。~~

下划线

<ins>、<u>均可使字体倾斜

<ins>的语义更强烈。

图像标签

`<img>`标签

HTML <img> 元素将一份图像嵌入文档。
默认为行内元素，即display: inline。

`src属性`

该属性是必须的，它包含了你想嵌入的图片的文件路径。

`alt属性`

替换文本，当图片显示不出来的时候，用文字替换。

就像这样

`title属性`

提示文本，当鼠标放到图像上时，提示的文字。

`height属性`

图像的高度，在 HTML5 中的单位是 CSS 像素，在 HTML 4 中既可以是像素，也可以是百分比。

可以只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。

`width属性`

图像的宽度，在 HTML5 中单位是 CSS 像素，在 HTML 4 中可以是像素也可以是百分比。

`border属性`

给图像设置边框，一般用CSS设定

相对路径

以引用文件的所在位置为参考基础，而建立出的目录路径。

这里简单来说就是图片相对于HTML页面的位置。

图片在同一级目录

直接写出图片名称写出即可。
<img src = "/people.jpg">

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ego7krEb-1661222926887)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220821190400110.png)]$

图片在下一级目录

写出图片所在的文件名称。
如 <img src = "/images/people.jpg">

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-thwpTNkF-1661222926887)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220821190547716.png)]$

图片在上一级目录

先用 … /来退回所引用文件的上一级，然后再写出图片所在的文件名称即可。
<img src = "../images/people.jpg">

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xdnIiqwj-1661222926888)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220821190316710.png)]$

绝对路径

绝对路径是指：目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

例如：D:\Note\HTML\workspace 一般不常用，了解即可。

注意绝对路径是 \ 相对路径是 /。

超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性：

target：用来指定链接页面的打开方式。

_self为在本窗口打开
_blank为在新窗口打开

外部链接：

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

内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可.

```
<a href = "index.html"> 首页</a>>
```

空链接：如果当时没有确定链接目标时，可以用 ‘#’ 来代替。

```
< a href = '#'>首页</a>
```

如果 href 里面地址是一个文件或者压缩包，会下载这个文件

```
<a href="img.zip"></a>
```

网页元素的链接

< a href = "http://www.baidu.com"><img src = "img.jpg"> <a>

锚点链接

可以快速定位到页面中的某个位置

在链接文本中 href 属性中设置为 # + 标志
找到目标位置标签，里面添加一个 id 属性 = 标志

<a href = "#two">第二季</a>
<h3 id = "two">第二季介绍</h3>

注释标签

快捷键 Ctrl + /

特殊字符

&nbsp 空格

&it 小于号 litter

&gt 大于号 big

表格标签

用于展示数据，非常清晰。

表格基本框架

<body>
    <table>
        <tr>  <th>姓名</th>     <th>性别</th>    <th>年龄</th>        </tr>//三行三个单元格
        <tr>  <td>林晓</td>     <td>男</td>     <td>18</td>          </tr>  
        <tr>  <td>林晓</td>     <td>男</td>     <td>18</td>          </tr>        
        <tr>  <td>林晓</td>     <td>男</td>     <td>18</td>          </tr>                 
    </table>
</body>

table 用来定义表格的标签
tr 用来定义表格中的行，必须嵌套在<table><table>标签中。
td 用来定义表格中的单元格，必须嵌套在<tr><tr>标签中。
th 用来定义表格中的表头，表头单元格里面的内容加粗居中显示。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iuw2sqgF-1661222926889)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220821222227386.png)]$

表格结构标签

为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分

用 <thead></thead> 标签表示表格的头部区域，<thead>内部必须拥有<tr>标签，一般是位于第一行
用<tbody></tbody> 标签表示表格的主体区域，主要是用于放数据本体
以上标签都是放在<table></table>标签中

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JoBifuZw-1661222926890)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220821224752984.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LJ0Rfhcu-1661222926891)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220821224926076.png)]$

跨行合并：上面的单元格为目标单元格。

跨列合并：左侧的单元格为目标单元格。

合并单元格三部曲：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dR14fWbp-1661222926892)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220821225409143.png)]$

列表标签

无序列表

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

ul 里面只能包含li，没有顺序。
li 里面可以包含任何标签。

有序列表

<ol>
	<li></li>
	<li></li>
	<li></li>
</ol>

里面只能包含li，有顺序。

自定义列表

<dl>
     <dt>关注我们</dt>
     <dd>新浪微博</dd>
     <dd>联系我们</dd>
</dl>

里面只能包含dt和dd，dt和dd里面可以放任何标签。

表单标签

目的：收集用户信息。

一个完整的表单通常由表单域，表单控件（表单元素）和提示信息3部分组成

在这里插入图片描述

表单域

表单域是一个包含表单元素的区域。
<form></from>标签用于定义表单域，会把它范围内的表单元素信息提交给服务器。

表单区域

在表单域可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

input

输入表单元素

text：可以在输入框输入任意文本

验证码：<input type = "text" name ="username" vlue = "请输入用户名" maxlength ="6">
value：默认显示在输入框的提示文字。
maxlenth：用户输入的字符串最大长度。

password :密码框,用户看不见输入内容

密码：<input type = "password">

radio：单选框

性别：男<input type = "radio"> 女<input type = "radio">
name 是表单元素名字这里性别单选按钮必须有相同的 name ，才可以实现多选一。
check：将check = “checked”后，当页面打开时就默认选中这个按钮。

checkbox:复选框

爱好：吃饭<input type = "checkbox">睡觉<input type = "checkbox">
check：将check = “checked”后，当页面打开时就默认选中这个按钮。

submit：按钮键

<input type ="submit" value = "免费注册" >
点了提交按钮，可以把表单域 form里面的表单元素里面的信息提交到后台服务器。

reset:重置按钮。

<input type =" " value = "重新填写" >
重置按钮可以还原表单元素初始的默认状态。

button:普通按钮，后期结合JS 搭配使用。

<input type = "button" value ="获取短信验证码">

file：文件域，上传文件使用

<intput type ="file">

lable：用于绑定一个表单元素，当点击标签内的文件是，浏览器就会自动将焦点（光标）转到表单上，用来增加用户体验。

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

select

<select>
       <option selected="selected">选项1</option>
       <option>选项2</option>
       <option>选项3</option>
       ...
</select>

<select>中至少包含一对<option>
在<option>中定义 selected="selected" 时，当前项即为默认选中项。

texterae

用于定义多行文本输入的控件

<textarea>
    文本内容
</textarea>nian

完结散花

ok以上就是对 HTML快速入门的全部讲解啦，很感谢你能看到这儿。如果有遗漏、错误或者有更加通俗易懂的讲解,欢迎小伙伴私信我，我后期再补充完善。

参考文献

https://www.w3school.com.cn/
https://blog.csdn.net/Augenstern_QXL/article/details/115419453

沈七QWQ

关注

17
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
19
评论
HTML快速入门

快速入门HTML！
复制链接

扫一扫

专栏目录

HTML快速入门

HTML快速入门

HTML 框架

常用标签

块级元素

<div>标签

<h>标签

<p>标签

<br>标签

<hr>标签

行内元素

<span>标签

文本格式化标签

加粗

倾斜

删除线

下划线

图像标签

<img>标签

src属性

alt属性

title属性

height属性

width属性

border属性

相对路径

图片在同一级目录

图片在下一级目录

图片在上一级目录

绝对路径

超链接标签

锚点链接

注释标签

特殊字符

表格标签

表格结构标签

列表标签

无序列表

有序列表

自定义列表

表单标签

表单域

表单区域

input

select

texterae

完结散花

参考文献

“相关推荐”对你有帮助么？

`<div>`标签

`<h>`标签

`<p>`标签

`<br>`标签

`<hr>`标签

`<span>`标签

`<img>`标签

`src属性`

`alt属性`

`title属性`

`height属性`

`width属性`

`border属性`