HTML基础知识

南沫木木

已于 2022-05-01 18:35:29 修改

阅读量643

点赞数 1

分类专栏： HTML基础知识文章标签： html html5

于 2022-05-01 17:38:40 首次发布

本文链接：https://blog.csdn.net/qq_49606218/article/details/124529744

版权

HTML基础知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、前言

1. HTML是什么

HTML是超文本标记语言，全称：Hyper Text Markup Language。

用来描述 web文档的一种标记语言。

通过标签对网页的内容(文本、图片、音频、视频等)进行描述从而创建网页。

2. 标记

HTML 标记标签通常被称为 HTML 标签。

HTML 标签是由尖括号包围的关键词，比如 <html>

HTML 标签通常是成对出现的，比如 b 和 /b，标签对中的第一个标签是开始标签，第二个标签是结束标签。

2、常用浏览器

浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。称为5大浏览器。

3、初识HTML

1. HTML骨架

HTML有自己的语言语法骨架格式

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

<!--
    html标签：所有html中标签的一个根节点
    head标签：用于存放title、meta、base、style、script、link，注意必须设置title标签
    title标签：让页面拥有一个属于自己的标题
    body标签：页面的主体部分，用于存放所有的html标签：a、p、h、div、span、img...
-->

2. HTML标签分类

标签的分类：

双标签单标签：<meta> <hr> <img>

标签的关系：

嵌套关系（父子关系）并列关系（兄弟关系）

单标签只能有属性，不能嵌套其他标签及内容

3. HTML标签关系

嵌套关系：父子关系
<head> 
  <title></title> 
</head>
并列关系：兄弟关系
<head></head>
<body></body>

4. 字符集

<meta charset="UTF-8">

UTF-8：是目前最常用的字符集编码方式，包含了全世界所有国家需要用到的字符

GB2312：简单中文，包括6763个汉字

GBK：包含全部中文字符，是GB2312的扩展，加入了对繁体字的支持，兼容GB2312

4、HTML常用标签

1. 标题

双标签有开始有结束

字体加粗

字体大小依次递减重要性依次递减

独占一行不会并列显示注：一般使用h1-h4

2. 段落标签

1、作用：用于分段

2、特点：双标签、独占一行、段落于段落之间有间隙，放不下会换行

注：lorem 加回车键快速生成一段英

3. 水平线标签

单词缩写： horizontal 横线，水平线

在网页中会经常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单的通过标记来完成。hr 就是创建横跨网页水平线的标记。基本语法格式如下：
<hr />

4. 换行标签

单词缩写：break 打断，换行

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端才会自动换行。如果希望某段文本强制换行显示，就需要使用换行标签。语法格式如下：
<br />

5. div span标签

div span是没有语义的，是网页布局中主要的2个盒子。

div是division的缩写，表示分割、分区的意思

span表示跨度、跨距、范围

语法格式如下：
<div>这是一个div</div>
<span>这是一个span</span>

6. 文本格式化标签

标签	显示效果
<b></b> <strong></strong>	文字以粗体方式显示（XHTML之后推荐使用strong）
<i></i> <em></em>	文字以斜体方式显示（XHTML之后推荐使用em）
<s></s> <del></del>	文字以加删除线方式显示（XHTML之后推荐使用del）
<u></u> <ins></ins>	文字以加下划线方式显示（XHTML之后不赞成使用u）

b i s u没有强调的意思，strong、em、del、ins语义更强烈，有强调的意思

7. 标签属性

基本语法格式如下：以键值对的方式定义
<标签名 属性1="属性值1" 属性2="属性值2"...> 内容 </标签名>
标签可以拥有多个属性，必须写在开始标签中，位于标签名之后。

属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

任何标签的属性都有默认值，省略该属性则取默认值。

注意：标签的共有属性：id，class，style，title等

8. 图像标签

单词缩写：image 图像

语法格式如下：
<img src="图像url"/>

属性	属性值	描述
src	url	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素（XHTML不支持百分比）	设置图像的宽度
height	像素（XHTML不支持百分比）	设置图像的高度
border	数字	设置图像边框的宽度

9. 链接标签

属性：

href 定义链接的地址

target 定义打开链接的方式

链接种类：

外部链接：href 属性值为一个外部网址

内部链接：文件在磁盘内的位置

空链接：

href 属性值为 "#"，点击会跳转到页面顶部

href 属性值为 "JavaScript : ; " ，点击不会跳转页面

锚点定位：将 href 的属性值设置为跳转元素的 id 属性，点击a标签就会自动跳转到对应的地方

a 标签里可以嵌套图片、音频、视频等内容，也可以放置下载链接（.zip .rar）

注：a 标签内不能嵌套 a 标签，会导致结构出现问题

10. 注释标签

在HTML中还有一种特殊标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显

示在页面中的注释文字，就需要使用注释标签。其基本语法格式如下：

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时可以看到。

11. html标签嵌套规则

内联不能嵌套块级，块级可以嵌套内联元素。

有几个特殊的块级元素只能嵌套内联元素，不能嵌套块级元素：h1~h6、p、dt。

p标签不能嵌套块级元素甚至不能嵌套p元素，只能嵌套内联元素，不然对p嵌套的块级元素设置css不起作用。

<li> <dd>标签可以嵌套任何元素。

<a>标签最好不要嵌套块级元素，可以嵌套内联元素。但是不能嵌套<a>标签和<input>之类的标签。

ul和ol的子元素只能是li，不能是别的元素。

button里面不要嵌套a标签，不然在js里面会有两个事件，还有就是button里面放img要记得给图片添加alt属性。

5、特殊字符

空格 &nbsp;
<   &lt;
>   &rt;
《   &Lt;
》   &Rt;
版权  &copy;

6、列表标签

1. 无序列表ul

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ……
</ul>

在<ul>标签中只能使用<li>标签,不要使用<p>标签之类的。但在<li>标签内可以嵌套其他标签使用。

1、<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2、<li></li>相当于一个容器，可以容纳所有元素。

2. 有序列表ol

有序列表即为排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ……
</ol>

所有特性与ul基本一致，但实际开发中，较少使用ol

7、表格

1. 创建表格

在HTML页面中，创建表格的基本语法格式如下：

<table> 
    <tr>
        <td>单元格内的文字</td>
        ...
    </tr>
    ...
</table>

<!--
    1、table 用于定义一个表格
    2、tr 用于定义表格中的一行，必须嵌套在table标签中，在table标签内有几对tr，就有几行表格。
    3、td 用于定义表格中单元格，必须嵌套在<tr></tr>标签中，在tr标签内有几对td，就有几个单元格（列）。
    4、<tr></tr>中只能嵌套<td></td>
    5、<td></td>标签就像一个容器，可以容纳所有的元素
-->

2. 表格属性

表格中的属性

border 边框：默认0

width 宽度

height 高度

cellspacing 单元格与单元格之间的距离

cellpadding 单元格与内容之间的距离

align 设置表格的对齐方式

表格内的标签：

caption ：表名

thead ：表格头部

tbody ：内容

tfoot ：表格尾部（不常用）

th：表头

tr：行

td：列

注：border: 值不能小于1 如果小于1则等同于0

8、表单

组成部分：

表单域（form）

表单控件（input）

提示信息

表单中的属性：

action：数据提交的地址

methods：请求的方法

GET（默认值）：输入的内容拼接到地址后面，可在地址栏查看

POST（常用）：请求参数在请求体里面，在地址栏看不见

input控件：

特点：单标签

属性：

type属性：

text：文本框；输入的内容可见

password：密码框；输入的内容不可见

radio：单选框（通过相同的name属性来规定单选框）

checkbox：复选框

submit：提交按钮

reset：重置按钮

placeholder：提示信息，当用户输入内容后消失

name属性：提交时name属性作为键名

value属性：提交时value属性作为键值

拼接：

例：www.baidu.com?键名=键值&键名=键值&键名=键值

普通按钮<button>：

表单内的普通按钮会作为提交按钮使用

表单外的普通按钮没有任何效果

<form>
    账号：<input type="text" /> <br/>
    密码：<input type="password" /> <br/>
    性别：
    <input type="radio" name="sex" id="girl"> <label for="girl">女</label>
    <input type="radio" name="sex" id="boy"> <label for="boy">男</label> <br/>
    爱好：
    <input type="checkbox" name="ps" id="ps" value="唱歌"> <label for="ps">唱歌</label>
    <input type="checkbox" name="bm" id="bm" value="旅行"> <label for="bm">旅行</label>
    <input type="checkbox" name="rd" id="rd" value="阅读"> <label for="rd">阅读</label> <br/>
    头像：<input type="file"> <br/>
    简介：<textarea cols="50" rows="6"></textarea> <br/>
    <input type="button" value="提交">
    <input type="reset" value="重置">
</form>

南沫木木

关注

1
点赞
踩
2

收藏

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

目录1、前言1. HTML是什么2. 标记2、常用浏览器3、初识HTML1. HTML骨架2. HTML标签分类3. HTML标签关系4. 字符集4、HTML常用标签1. 标题2. 段落标签3. 水平线标签4. 换行标签5. div span标签6. 文本格式化标签7. 标签属性8. 图像标签9. 链接标签10. 注释标签11. html标签嵌套规则5、列表标签1. 无序列表ul2. 有序列表ol6、表格
复制链接

扫一扫