HTML学习笔记（一）

背锅切图仔

已于 2022-02-26 11:09:30 修改

阅读量614

点赞数 1

分类专栏：前端 HTML 文章标签： html 学习前端

于 2022-02-26 01:38:51 首次发布

本文链接：https://blog.csdn.net/weixin_51250927/article/details/123142837

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

HTML5基础语法与标签

HTML骨架

DTD

文档类型声明
<!DOCTYPE html>

HTML文件第一行必须是DTD（Document Type Definition）

标签对

<html></html>
<head></head> 是网页的配置，不是网页头部
<body></body> 书写网页的内容，包括网页的头部、主要内容、页脚等各个部分

head中的标签

title

用来设置网页的标题，文字会显示在浏览器的标签栏上

标题和段落标签

标题标签

标签 h1 - h6 语义为一级标题到六级标题

<h1></h1>标签一般只能放置一个，否则会被搜索引擎视为作弊

段落标签

<p></p>标签

任何段落都要放到<p></p>标签中，因为HTML中及时代码换行了，页面显示效果也不会换行。

<p></p>标签中不能嵌套h系列标签和其他p标签

div标签

div是英语division“分割”的缩写，顾名思义

<div></div>标签对用来将相关的内容组合到一起，以和其他内容分割，使文档结构更清晰。

<div></div>是最常见的HTML标签，因为它可以结合CSS使用，实现网页的布局，这种布局形式叫做“DIV + CSS”。

HTML5特性

空白折叠现象

文字和文字之间的多个空格、换行会被折叠成一个空格。

标签“内壁”和文字之间的空格会被忽略。

转义字符

转义字符	意义
&lt ;	小于号
&gt ;	大于号
&nbsp ;	空格（不会被折叠）
&copy ;	版权符号©

HTML注释

三种列表

标签	语义
<ul></ul> （unordered list）	无序列表
<ol></ol> （ordered list）	有序列表
<dl></dl> （definition list）	定义列表

无序列表

无序列表使用<ul></ul>标签，每个列表项都是<li></li>标签（list item 列表项），为父子组合标签

父子组合标签

无序列表是一个父子组合标签，不能单独出现
<li>标签不能单独使用，它必须放到<ul>或者<ol>中使用
HTML规定，<ul>的子标签只能是<li>，绝对不能出现其他任何标签
<li>标签是容器，内部可以放任何其他标签

<ul>标签的type属性

type属性值	意义
disc	默认值，实心圆
circle	空心圆
square	实心方块

有序列表

有序列表使用<ol></ol>标签，每个列表项都是<li></li>标签

父子组合标签

同无序列表

<ol>标签的type属性

type属性值	意义
a	表示小写英文字母编号
A	表示大写英文字母编号
i	表示小写罗马数字编号
I	表示大写罗马数字编号
1	表示数字标号（默认）

<ol>标签的start属性

start属性值必须是一个整数，指定了列表编号的起始值

<ol>标签的reversed属性

用于倒序排列
reversed属性不需要值，只需要写单词即可。（<ol reversed>）

定义列表

<!-- 定义列表的实例代码 -->
<dl>
	<dt>北京</dt>
	<dd>我国首都、政治中心、文化中心</dd>
	<dt>上海</dt>
	<dd>国际经济、金融、科技创新中心</dd>
	<dt>深圳</dt>
	<dd>经济特区，国际化都市</dd>
</dl>
<!-- 实现效果：-->
<!--
北京
	我国首都、政治中心、文化中心
上海
	国际经济、金融、科技创新中心
深圳
	经济特区，国际化都市
-->