前端基础回顾
一、HTML基础
01html文档结构
02基本标签
03标签属性
04文本格式化标签
05实体转义符
06块级元素和行级元素
07w3c标准和语义化标签
08命名规范
正文：
<!--！是申明的意思，此行代码意思是：下面的文档标签将以html5规范解析-->
<!DOCTYPE html>
<html>
<!--head 头部主要完成一个网页的相关设置-->
<head>
<!--meta 元 主要完成对应设置-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta charset="utf-8" />
<!--设置一个网站的搜索关键字-->
<meta name="keywords" content=""/>
<!--设置网站的描述内容-->
<meta name="description" content="" />
<!--设置网站小图标-->
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/png" />
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" /><!--此type值也能出现图标-->
<style type="text/css">
</style>
<!--引入外部样式文件-->
<link rel="stylesheet" href="style.css"/>
<title></title>
</head>
<body>
<p>01HTML文档结构</p>
</body>
<script language="JavaScript" type="text/javascript">
</script>
</html>
<!DOCTYPE html>
<html lang="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>Document</title>
</head>
<body>
<!--1.div:用来布局，没有具体含义。层-->
<!--2.hx:标题，从1级到6级-->
<!--3.p:段落，相当于一个回车-->
<!--4.br:换行 单标签-->
<!--5.hr:水平线 单标签
默认：width:100%、灰色（注意：hr给高度赋值用size，而不是height）
-->
<hr />
<hr width="80%" size="1px" align="center" color="red"/>
<!--6.a:链接跳转
属性: href可以跟网址、文件路径；
title:提示文字；
target：跳转目标
-->
<a href="" title="这是百度">百度</a>
<a href="01html文档结构.html" title="这是与此文件同目录的文件" target="_self">_self</a>
<a href="01html文档结构.html" title="这是与此文件同目录的文件" target="_blank">_blank</a>
<a href="01html文档结构.html" title="这是与此文件同目录的文件" target="_parent">_parent</a>
<a href="01html文档结构.html" title="这是与此文件同目录的文件" target="_top">_top</a>
<!--7.img:加载外部图片、图像。单标签 。
属性:src后可以是本地图片，可以是网络图片；
alt：图片加载失败时的提示文字-->
<img src="" title="提示文字" alt="图片"/>
<!--8.span:作用与div一样，都用来布局，不同的是，div会单独在一行，而span不会(用于行内布局，没有具体含义)。-->
<div>div1</div>
<div>div2</div>
<span>span1</span>
<span>span2</span>
<!--9.ul:无序列表 ol:有序列表-->
<ul>
<li>aa</li>
<li>bb</li>
<li>cc</li>
</ul>
<ol>
<li>aa</li>
<li>bb</li>
<li>cc</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.属性名=“属性值”
2.不是所有标签都有属性，比如：br
-->
</body>
</html>
<!--
html 行内元素是没有宽高的！也就是说没有width！高的话可以用line-height撑起来。
要想行内元素有宽高，可以将行内元素转化为块级元素或者行内块元素：
display:block;（转为块元素，独占一行）
display:inline-block;（转为行内块元素，在一行内显示但又有宽高）
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
文本格式化标签用来美化文本：
1.<b> <strong>
都是行级标签，都有加粗作用（外观一样）
但是strong除了加粗还有强调作用，强调主要是用于SEO搜索引擎时，便于提取对应的关键字。
2.<i> <em>
都是行级标签，都使文字倾斜（外观一样）
但是em具有强调作用
添加图标时，图标不会倾斜
3.<pre>
块级标签
预格式化文本，保留换行和空格及宽度，文字的字号会小一号。（少用，后面样式可以改变格式）
4.<small> <big>
行级标签（不会读占一行且不识别宽高，加宽高的样式没有效果！！！）
分别让文字缩小一号或放大一号
big在html5中淘汰掉了，但并没有删除，可以用，但在开发中尽量不要用淘汰了的标签
浏览器支持的最小字号为12px，如果要显示比12px还小的文字需要做处理
small也可以用来加载图标，会小一号。
5.<sub> <sup>
都是行级标签
设置文本为下标和上标，用来调整文本正常显示的基线
且文字会自动小一号，处理逻辑时不能出现上标和下标，只是一个布局方式
-->
<!--1.-->
<b>b</b>
<strong>strong</strong>
<!--2.-->
<i>i</i>
<em>em</em>
<!--3.-->
<pre>pre:块级标签
预格式化文本，保留换行和空格及宽度，文字的字号会小一号。（少用，后面样式可以改变格式）</pre>
<!--4.-->
<p>正常文本字号大小</p>
<small>small</small>
<big>big</big>
<!--5.-->
<p>X1+X2=Y</p>
<p>X<sub>1</sub>+X<sub>2</sub>=Y</p>
<p>X<sup>1</sup>+X<sup>2</sup>=Y</p>
</body>
</html>
<!--
问题：
转义符怎么输出在浏览器上？？？
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
常见：
<小于号（<）
>大于号（>）
&与号（&）
空格
©版权（©）
×乘号（×）
÷除号（÷）
-->
<!--多个空格只会被解析成一个显示出来-->
<p> aa bb</p>
<!--多个空格会被解析成多个显示出来-->
<p> aa bb</p>
<p> </p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
块级元素（相当于执行display:block操作）：
1.独占一行
2.宽度和高度可控
3.块级元素的宽度默认值为100%（继承父元素），高度默认值由元素内容决定（也就是说会子标签会撑开父级标签）
3.块级元素可以包含块级元素和行级元素
有：div p h1-h6 pre ul ol table address
行级元素（相当于执行display:inline操作）：
1.不会独占一行，与相邻的行级元素占同一行，直到行占满会自动掉到下一行
2.宽度和高度不可控，不能设置宽高（由内容决定）
3.行级元素只能包含行级元素
有：span a b strong i em small big sup sub
特殊：img属于行级块标签，相当于执行了display:inline-block
转换：
块级标签转换成行级标签：display:inline（宽高将失效）
行级标签转换成块级标签：display:block
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
w3c标准：
标签嵌套规则：
1.块级元素可以包含块级元素和内联元素，内联元素只能包含内联元素，不能包含块级元素。
2.块级元素不能放在<p>里面，但是<p>里可以放行级元素。
3.有几个特殊的块级元素只能包含内联元素，不能包含快级元素，分别是：
h1 h2 h3 h4 h5 h6 p dt
4.块级元素和块级元素并列，行级元素和行级元素并列。
语义化标签目的：容易被搜索引擎收录
<q>:短文本引用，浏览器解析时会自动加上英文的双引号
<address>：为网页加入地址信息，会有倾斜效果
<caption>：为表格添加标题和摘要
-->
<!--
emmet语法：（敲完后按Tab自动补全）
这个是快捷写法，[]里面内容代表属性，{}里面内容代表内容，>代表下一级,+代表同级，*代表几个，{$}这里面的$代表数字递增
table[border=1]>caption{学生信息表}+tr>th*3
-->
<table border="1">
<caption>学生信息表</caption>
<tr><!--代表一行-->
<th>学号</th><!--代表一列，表头-->
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>01001</td><!--代表一列，单元格-->
<td>张三</td>
<td>12</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
文件名和目录名一般以字母、下划线开头，不能有空格。
一般开发时：
首页：index.html
公司介绍：about.html
新闻列表：news.html
新闻详情页：new_details.html
产品列表：product.html
产品详情页：pro_details.html
联系我们：contact.html
-->
</body>
</html>
4489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
