【笔记】HTML笔记

小胡49

已于 2022-08-10 11:39:09 修改

阅读量549

点赞数

文章标签： html 前端

于 2022-02-25 18:07:30 首次发布

本文链接：https://blog.csdn.net/weixin_55970480/article/details/123137760

版权

本文概述了HTML的基本结构，包括标签、静态与动态网页的区别，以及主流浏览器。深入解析了HTML文档结构、设置网站图标、编写基本标签，强调了W3C标准和语义化的重要性。还介绍了企业官网命名规范和浏览器内核。最后，总结了HTML5的新特性，如语义化标签和表单元素的使用。

摘要由CSDN通过智能技术生成

1.HTML：超文本标记语言。它是一种标识性的语言，非编程语言，不能使用逻辑运算。通过标签将网络上的文档格式进行统一，是分散网络资源连接称为一个逻辑整体。

超文本，是一种组织信息的方法，通过超级链接将多种媒介关联起来

标记：标签。用<>包裹的具有一定含义的内容，比如<strong>..........</strong>

2.静态网页和动态网页

静态网页：HTML代码和内容书写完毕后，页面的内容和显示效果就基本上不会发生变化了——除非你修改页面代码。

动态网页：页面代码虽然没有变，但是页面的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。

3.五大主流浏览器

Internet Explorer(IE)，FireFox(火狐)，Chrome(谷歌)，Opera（欧朋），Safari(苹果)。

4.HTML文档结构

<!doctype >文档类型声明

<html>根标记

<head>头标记

<body>主体标记

<meta name="keywords" content=""> <!--设置一个网站的搜索关键字-->
<meta name="description" content=""> <!--网站的描述内容-->

5.设置网站小图标

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

注：HBuildX快捷方式为 link:favicon +TAB

总结代码

<!DOCTYPE html> <!-- 感叹号是表申明的意思。这一行代码的意思是：下面的文档标签将以html5规范去解析 -->
<html>
	<!-- 1.头部，主要用来完成一个网页的相关设置的。 -->
	<head>
		<meta charset="utf-8"><!--汉字编码  --><!-- meta:元,主要用来完成对应设置的 -->
		<meta name="keywords" content=""/><!-- 设置一个网站的搜索关键字 -->
		<meta name="description" content=""/><!-- 网站的描述内容 -->
		<title>小胡</title><!-- 标题 -->
		<!-- JS代码需要编写到script标签中 -->
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
		<script type="text/javascript">
			/*
			 * 控制浏览器弹出一个警告框
			 *alert("这是我的第一行JS代码");
			 */
			
			/*
			 *让计算机在页面中输出一个内容 
			 *document.write("hellow world");
			 */
			
			/*
			 *向控制台输出一个内容 
			 *console.log("hellow world1");
			 */
		</script>
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><!-- 设置网站小图标 -->
		<style>
			/* 书写样式的地方 */
		</style>
		<link rel="stylesheet" href="style.css"><!-- 用来引入外部的样式文件 -->
	</head>
	<!-- 主体部分 -->
	<body>
		<p>这是一个段落</p>
	</body>
</html>

6.按 !+TAB 或html 或者 html:5 + tab会自动生成文档结构

<!DOCTYPE html>
<html lang="en"> <!-- 使用功能语言为英语  中文则为zh-->
<head>
	<meta charset="UTF-8">

    <!-- 移动端开发设置 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 如果使用IE浏览器打开该文件默认使用edge -->
	<meta http-equiv="X-UA-Compatible" content="ie=edge">

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

7.基本标签

1.div：用来布局分层的，没有具体含义。层        <div></div>

2.hx:标题，从1级到6级，1级标题最大，6级最小。会自动加粗，有默认字号

例：h1、h2、h3、h4、h5、h6        <h1></h1>

3.p：表示段落。相当于一个回车（双标签，需要进行包裹使用）<p></p>

4.br：生成一个换行符  <br />

5.hr：显示一条水平线，主要起一个装饰作用（单标签）<hr />

单标签尽量使用 / 进行闭合方便后期兼容

6.a：a标签用来设置文本超链接，实现链接跳转 <a href=""></a>
<a href="" target="_blank"></a>     

<a href="" target="_self"></a>       

<a href="" target="_parent"></a>    

<a href="" target="_top"></a>       
7.img用来加载外部图片、图像。

src用来设定加载的图片或图像的路径

alt：当图像加载不成功时，将显示其内容，否则将不会显示

title：鼠标悬停时会显示设定的内容

如果只设置width或height中的一个，另一个设置的会自动等比例缩放（此时图片不会变形）

如果俩个同时设置了。设置不当此时图片可能会变形
<img src="" alt="" title=""/>
8.span：作用与div一样，都是用来布局的，不同的时div会单独占一行，而span不会，span用于行内布局

9.有序列表/无序列表

ul/ol：列表，前者是无序列表，后者是有序列表，它们的列表内容都是li标签
	

<ul>
		<li>li1</li>
		<li>li2</li>
		<li>li3</li>
</ul>
自定义列表
<dl>
    <dt>帮助中心</dt>
    <dd>需求1</dd>
    <dd>需求2</dd>
    <dd>需求3</dd>
</dl>
dl表示自定义列表的整体，用于包裹dt/dd标签

dt表示自定义列表的主题

dd表示自定义列表的针对主题的每一项内容

注意：dl标签中只允许包含dt/dd标签

dt/dd标签可以包含任意内容

dd前会默认显示缩进效果

10.注释

Ctrl+/ 为整行注释

Ctrl+Shitf+/ 则为在行尾进行注释

8.标签属性：

1.通常由属性名="属性值"组成。

2.起附加信息的作用。

3.不是所有标签都有属性，比如br标签

9.文本格式化标签

1.b和strong：都有加粗作用，且都是行级标签（不会自动换行），但strong除了加粗还有强调作用

注：强调主要用于SEO时，便于提取对应关键字

2. i 和 em : 使文字倾斜，em具有强调作用。如果只是简单的倾斜效果，用 i 标签就可以，比如添加图标等

3.pre：预格式化文本，保留换行和空格及宽度，文字的字号会小一号（块级标签，在浏览器中会独占一行）。

4.small和big：分别让文字缩小一号或放大一号（行级标签，不会独占一行，且不识别宽高）。big在HTML5中淘汰了，但并没有删除，在开发中尽量不要使用淘汰了的标签

浏览器支持的最小字号为12px字，如果需要显示比12px还小的文字效果，需要做处理

5.sub和sup设置文本为下标和上标，用来调整文本正常显示的基线，且文本会自动小一号
<p>正常显示：X1+X2=Y</p>
<p>下标：X<sub>1</sub>+X<sub>2</sub>=Y</p>
<p>上标：X<sup>2</sup>+Y<sup>2</sup>=Z</p>

10.单双标签

单标签：指的是由一个标签组成

比如：

换行符：<br/>
水平线：<hr/>
图片标签：<img/>
文本标签：<input/>
link标签：<link/>
元信息标签：<meta/>

使用单标签时尽量闭合，避免后期报错

双标签：由“开始标签”和“结束标签”两部分构成，必须成对使用

11.HTML实体转义

&lt; <!-- 小于号 < 含义为less then -->
&gt; <!-- 大于号 > 含义为greater then -->
&amp; <!-- 与号 & -->
&nbsp; <!-- 空格 -->
&copy; <!-- 版权（©） -->
&times; <!-- 乘号 × -->
&divide; <!-- 除号 ÷ -->

12.块级元素和行级元素

块级元素：（相当执行了display:block; 操作）

1.独占一行，宽度和高度时可控的，如果没有设置其宽度，将默认铺满整行

2.其内可以包含块级和行级元素

行级元素：（相当执行了display:inline; 操作）

1.不会独占一行，与相邻的行级元素占同一行，直到占满，会自动掉到下一行

2.宽度和高度时不可控的

3.其内只有包含行级元素

<!-- 块级标签转为行级标签 -->
<p style="width: 300px; height: 50px;background: gray; display: inline;"></p>
<!-- 行级标签转为块级标签 -->
<span style="width: 300px; height: 50px;background: blue; display: block;"></span>

4.img属于行级块标签。相当于执行了display:inline-block；操作。

13.什么W3C标准

由结构、表现和行为标准三部分组成

结构 HTML 页面元素和内容

表现 CSS 网页元素的外观和位置等页面样式（如：颜色、大小等）

行为 JavaScript 网页模型的定义与页面交互

W3C常见规范有：

1）定义语言编码

  <meta http-equiv="content-type" content="text/html;charset=utf-8"/>

或
        <meta charset="utf-8"/>

2）JavaScript定义

        <script language="JavaScript" type="text/javascript">
   脚本代码...
        </script>

3）CSS定义

        <style type="text/css">
样式设置
        </style>

4）不要在注释内容中使用“--”

        

5）所有标签和属性的名字都必须要用小写

6）所有的属性值必须用双引号引起来

7）如果文档中要输出>,<和&等，请使用实体转义符实现

        <p>> < & ....</p>

8)要给所有的属性赋一个值,如果不赋值，默认它的值就是属性名本身

        <img src="..." alt="..." />

        <input type="text" readonly />

9）所有的标签都必须要有一个相应结束的标记（标签必须要闭合）

        <p>......</p>

        <hr />

10)所有的标签必须合理嵌套，不能出现嵌套交叉的情况

        <div><p>....</p></div>

11)图片要添加有意义的alt属性

12）在form表单中添加lable，以添加用户友好度

14.标签嵌套规则

1.块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其他的内联元素

<div><h1></h1><p></p></div> —— 对
<a href=”#”><span></span></a> —— 对
<span><div></div></span> —— 错

2.块级元素不能放在<p>里面。

<p><ol><li></li></ol></p> —— 错
<p><div></div></p> —— 错

3.有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：

h1、h2、h3、h4、h5、h6、p、dt

4.块级元素与块级元素并列、内嵌元素与内嵌元素并列。

<div><h2></h2><p></p></div> —— 对
<div><a href=”#”></a><span></span></div> —— 对
<div><h2></h2><span></span></div> —— 错

15.HTML语义化标签

语义化，通俗地说就是：明白每个标签的用途（在什么情况下我可以使用这个标签才合理）。

1.<a>标签：实现超链接。

强调:title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）。

2.<p>标签：文章段落放到<p>标签中。

3.<hx>标签：文章标题，栏目标题用<hx>

标题标签一共有6个， h1、h2、h3、h4、h5、h6 分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题，并且依据重要性递减，

4.<q>标签：短文本引用。

注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。

5.<address>标签：为网页加入地址信息。

6.<caption>标签：为表格添加标题和摘要。

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

16.企业官网文件命名规范

项目中文件或目录名中不能出现汉字和空格之类的其他符号，文件和目录名一般以字母或下划线开头，其后可以出现字母、数字和下划线。

17.浏览器内核由渲染引擎和JS引擎两部分组成

内核：Trident(IE),Gecko(FireFox),Webkit(safari/chrome),Blink(chrome/opera)

国内大多数浏览器采用的双核驱动（Trident&Webkit或Trident&Blink）

移动端：iphone/ipad采用的是webkit内核，android4.4以下版本采用的webkit内核，而4.4以上版本采用的是blink内核

常用的专业开发工具有：sublime,HBuilder,VSCode,Atom,Webstorm

18.手写代码练习

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<meta http-equiv="content-type" content="text/html"/>
		<meta name="keywords" content="作业1" />
		<meta name="description" content="我的作业">
		<!-- description对项目的描述 -->
		<!-- keywords项目关键字 -->
		<!-- content是内容 -->
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
		<!-- href图标路径+文件名 -->
		<!-- rel="shortcut icon"小图标 -->
	
	
		<title>作业1</title>
		<link rel="stylesheet" href=""><!-- 引入外部样式文件 -->
		<style type="text/css">
			/* 样式设置 */
		</style>
	</head>

	<body>
		网页主体内容。。。。
	</body>	
	<script type="text/javascript" language="JavaScript">
		脚本代码....
	</script>
</html>

19.标签通用属性

1）标签由标签名、标签属性和文本属性三部分组成（注意：单标签没有文本内容）。

2）标签属性是对标签的一种描述方式。

3）标签属性分通用属性、自有属性和自定义属性。

4）通用属性：所有标签都具有的属性。

通用属性有：

id：用来给标签取一个唯一的名称。id名称在一个网页必须是唯一的

class：用来给标签取一个类名。

style:用来设置标签的行内样式。

title:当鼠标移动到该标签，所显示的提示内容

同时插入的快捷键：HbuildX 按住ctrl 单机想要插入的位置即可同时插入（效果如下）
<div  class="test"></div>
<p class="test"></p>

5）.自定义标签属性：通产用来传值或用于图片懒加载等方面

格式：data-*

6）.table主要用于呈现格式化数据。表格是由行和列组成。

border：设置表格边框,默认单位是像素

width：设置表格宽度，默认单位是像素

align：设置表格对齐方式（left(默认)/center/right）

cellpadding：设置单元格间距

cellspacing：设置像素间隙，单元格边框间距

格式

<table width="500" border="1" align="center" cellpadding="0" cellspacing="0" >
 <tr>
 <th>ID</th> <!-- th表头，主要对下面的内容起说明作业。th的内容会自动加粗和居中显示 -->
 <th>姓名</th>
 <th>性别</th>
 </tr>
 <tr>
 <td>1</td>
 <td>张三</td>
 <td>男</td>
 </tr>
</table>

Emmet语法：为table>tr*2>td{内容$}*3

7）.跨行/跨列属性主要用来绘制复杂表格。
rowspan:跨行
colspan:跨列

注意：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并

不能跨：thead、tbody、tfoot

    <table border="1" width="500" align="center">
        <tr>
            <td>内容区01</td>
            <td colspan="2" align="center">内容区02</td>
        </tr>
        <tr>
            <td>内容区01</td>
            <td>内容区02</td>
            <td>内容区03</td>
        </tr>
        <tr>
            <td colspan="3" align="right">内容区01&nbsp;&nbsp;</td>
        </tr>
    </table>

    <table border="1" width="500" align="center">
        <tr>
            <td rowspan="2">内容区01</td>
            <td colspan="2" align="center">内容区02</td>
        </tr>
        <tr>
            <td>内容区02</td>
            <td>内容区03</td>
        </tr>
        <tr>
            <td colspan="3" align="right">内容区01&nbsp;&nbsp;</td>
        </tr>
    </table>

8）完整表格组成：caption(标题)、thead（表头）、tbody（表体）和 tfoot(表尾) 四部分组成

9）form表单标签是所有标签最核心标签之一。它是用来实现前后端交互的一个重要标签。

常用属性：

name:表单名称

action:表单数据提交的地方（通常是一个后台文件名【.jsp/.php/.asp/.aspx/.py】，或网址）。如果是#，表示提交到当前文件下。

method:前端提交数据到后端的方法，主要有：get和post，默认的是get。

提交账号和密码等重要信息时不推荐使用get方法。

10）表单元素分为：

1.input类：主要用来输入，选择或发出指令。

type:text/password/radio/checkbox/file/button/image/submit/reset

text:单行文本输入框 type="text"可以不写，默认值。

属性：placeholder（提示）/name（命名）/minlength和maxlength（最少/多输入的字符个数）/disabled（失效）/readonly（只读）

2.textarea类

3.select类

4.button类

20.绝对路径和相对路径

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

相对路径（常用）：从当前文件开始出发找目标文件的过程

21.视频标签和音频标签

视频标签

    <video src="" controls autoplay muted loop></video>
    <!-- 谷歌浏览器可以让视频自动播放，但是必须是静音状态 muted -->

音频标签

<audio src="" controls autoplay loop></audio>
<!-- src音频路径 
    controls显示播放控件 
    autoplay自动播放（部分播放器不支持）
    loop循环播放 -->

22.表单标签

1）input系列标签的基本介绍

该标签可以通过type属性值的不同，展示不同效果

text：文本框，用于输入单行文本

password：密码框：用于输入密码

radio：单选框，用于多选一 (checked:默认选中 name:分组。有相同name属性值的单选框为一组，一个组中同时只能有一个被选中)

checkbox：多选款，用于多选多

file：文件选择，用于之后上传文件（multiple多文件选择）

submit：提交按钮，用于提交

reset：重置按钮，用于重置（若要实现提交和重置功能需要将表单放入form标签下）

button：普通按钮，默认无功能，之后配合JS添加功能

placeholder（提示）

name（命名）

minlength和maxlength（最少/多输入的字符个数）

disabled（失效）

readonly（只读）

23.button按钮

    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
    <button type="button">普通按钮，没有任何功能</button>

24.下拉菜单

select标签：下拉菜单的整体

option标签：下拉菜单的每一项

selected：下拉菜单的默认选中

    <select>
        <option>北京</option>
        <option selected>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>

25.textarea文本域标签

常见属性：

cols：规定了文本域内可见宽度

rows：规定了文本域内可见行数

注意：右下角可以拖拽改变大小

实际开发时针对于样式效果推荐使用CSS设置

26.label标签

使用方法1：

1）使用label标签把内容（如：文本）包裹起来

2）在表单标签上添加id属性

3）在label标签的for属性中设置对应的id属性值

    性别：
    <input type="radio" name="sex" id="man"> <label for="man">男</label> 
    <input type="radio" name="sex" id="woman" checked><label for="woman">女</label>

使用方法2：（较为简单）

1）直接使用label标签把内容（如：文本）和表单标签一起包裹起来

2）需要把label标签的for属性删除即可

    性别：
    <label><input type="radio" name="sex">男</label> 
    <label><input type="radio" name="sex" checked>女</label>

27.语义化标签

一、没有语义的布局标签-div和span

div标签：一行只显示一个（独占一行）

span标签：一行可以显示多个

    普通文字
    <div>这是div标签</div>
    <div>这是div标签</div>

    <span>这是span标签</span>
    <span>这是span标签</span>

二、有语义的布局标签

场景：在thml5新版本中使用，该标签用于做手机端网页时使用

28.字符实体（同11点）

网页不认识多个空格，只认识一个

29.

小胡49

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫