初识HMTL标签
浏览器可以识别的语言非常少，有HTML/XML、CSS、JS
HTML(HyperText Marked Language)超文本标记语言
HTML 文档结构
<html>
<head></head> :head内部的内容不是给用户看的，是给浏览器去识别做相应操作的
<body></body> :body内部的内容是浏览器展示给用户看的各种眼花缭乱的页面
</html>
HTML注释(注释是代码之母)
单行注释:<!--当前为单行注释-->
多行注释:<!--
多行注释1
多行注释2
-->
由于html页面结构相对而言,多而复杂,不便于后期的维护和修改,通常在编写页面的时候,可以通过增加注释的方式人为的划分代码区域(养成习惯):
<!--顶部导航条样式开始-->
<!--顶部导航条样式结束-->
<!--左侧菜单栏样式开始-->
<!--左侧菜单栏样式结束-->
...
标签的分类方式一,根据是否有结束标签来划分
1.双标签 --有结束标签
html,head,body
2.自闭和标签 --没有结束标签,自身通过/>结束
meta,img,br,hr
标签的分类方式二,标签占用的区域划分
1.块级标签 --独占一行
h1~h6,p,br,hr,div
注意:
Ⅰ块级标签内部可以嵌套任意的块级标签和行内标签,除了p标签
Ⅱ特例,p标签的内部只能嵌套行内标签,不能嵌套块级标签.强行嵌套没有问题,但符合html语法规范
2.行内标签 --自身文本有多大,就占用多大的空间
u,s,i,b,span
注意:
Ⅰ行内标签内部不能嵌套块级标签和行内标签
head标签内常用标签
<title>定义网页标题</title>
<style>编写css代码(内部样式表)</style>
<link>
1.用于引入外部css文件(样式表文件)
2.网站图标
</link>
<script>
1.该标签内可以直接编写js代码
2.可以通过src属性引用外部js代码文件
</script>
<meta />
1.可提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词
2.可不包含任何内容
3.提供的信息时用户不可见的
要注意的是:
<!--1.指定文档的编码类型(需要知道)--->
<meta http-equiv="content-Type" charset="UTF8" />
<!--2.2秒后跳转到对应的网址，注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"/>
<!--3.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的-->
<meta name='keywords' content='meta总结,html meta,meta属性,meta跳转' />
<meta name='description' content='Web开发基础知识总结'/>
body标签内常用标签
- 基本标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--字体加删除线标签-->
<s>字体加删除线标签</s>
<!--字体加粗标签-->
<b>字体加粗标签</b>
<!--字体加下划线标签-->
<u>字体加下划线标签</u>
<!--字体为斜体标签-->
<i>字体为斜体标签</i>
<!--段落标签,文本独占一行-->
<p>段落标签,文本独占一行</p>
<!--换行标签-->
<br /> 换行标签
<!--水平分割线标签-->
<hr /> 水平分割线标签
- 特殊符号标签(在p标签中演示)
<!--空格字符: 注意是&开头 ;结尾-->
<p>君不见 黄河之水天上来 奔流到海不复回</p>
<p>君不见 高堂明镜悲白发 朝如青丝暮成雪</p>
<!--大于字符: > 注意是&开头 ;结尾-->
<p>a大于b的表达式: a > b</p>
<!--小于字符: < 注意是&开头 ;结尾-->
<p>a大于b的表达式: a < b</p>
<!--and(&)字符: & 注意是&开头 ;结尾-->
<p>a&b a & b</p>
<!--人民币字符: ¥ 注意是&开头 ;结尾-->
<p>人民币 ¥ 10000000元</p>
<!--版权标识: © 注意是&开头 ;结尾-->
<p>版权标识 ©</p>
<!--注册商标：® 注意是&开头 ;结尾-->
<p>注册商标 ®</p>
- 常用标签
<!--div 块级标签;本身没有任何特殊意义,多用于前期页面布局-->
<div></div>
<!--span 行内标签;本身没有任何特殊意义,多用于前期页面布局-->
<span></span>
<!--img 用于显示图片-->
<img src="" alt="">
<!--
src中的内容:
1.可以设置一个网站图片地址
2.可以设置一个本地的图片地址
3.可以设置成url,自动向该url发送get请求获取数据
alt:当图片加载不出来的时候,默认展示的提示信息
title:当鼠标悬浮在图片上的时候,展示的提示信息
width,height:图片的宽和高,一般修改其中一个属性,另一个属性就会自动等比例缩放;两个都修改的话,图片就会失真
-->
<!--a 连接标签-->
<a href=""></a>
<!--
href:
1.用于设置超链接,点击该标签会跳转到该url所对应的资源
2.锚点功能,设置为#+标签id值,点击就会跳转到该id值所对应的a标签所在的位置,例如:
<a href="#div1"></a>
<div id="div1"></div>
target:控制是否在当前页跳转,默认是在当前页跳转,参数值有
_self:当前页面跳转
_blank:新建页面跳转
-->
- 列表标签
<!--无序列表(使用频率较高),默认以·排序，类似word文档中无序项目符号-->
<ul>
<li>0001</li> <!--显示结果：· 0001-->
<li>0002</li> <!--显示结果：· 0002-->
<li>0003</li> <!--显示结果：· 0003-->
</ul>
<!--有序列表，默认以数字排序，类似word文档中有序项目符号-->
<ol>
<li>0001</li> <!--显示结果：1. 0001-->
<li>0002</li> <!--显示结果：2. 0002-->
<li>0003</li> <!--显示结果：3. 0003-->
<li>0004</li> <!--显示结果：4. 0004-->
</ol>
<!--标题列表，类似于word文档中多级项目符号-->
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
- 表格列表
<!--表格标签--
table：定义表格框架
thead：表格每一列的标题，可省略
tbody：表格的主体部分，可省略
tr：定义表格的行，表示一行，可放在table、thead和tbody中
th：定义表格的标题列，表示一列，必须放在tr中，不然没有意义了
td：定义表格的列，表示一列，必须放在tr中，不然没有意义了
th和td之间的区别就是th内文本自动加粗
定义一个标准版的table
属性
border：表格边框宽度，单位可用px(像素)
cellpadding：单元格内边距，边框距离内部元素的距离
cellspacing：单元格间距(也可理解为外边距)，单元格之间的距离
colspan：左右合并单元格，值表示合并几个
rowspan：上下合并单元格，值表示合并几个
-->
<table border="1" cellpadding="2" cellspacing="0">
<thead> <!--标题行，用于自己加粗，可省略，直接写tr-->
<tr>
<td>标题行列1</td>
<td>标题行列2</td>
<td>标题行列3</td>
</tr>
</thead>
<tbody> <!--内容行，跟thead标签搭配使用，可省略，直接写tr-->
<tr>
<td>内容行1列1</td>
<td>内容行1列2</td>
<td>内容行1列3</td>
</tr>
<tr>
<td>内容行2列1</td>
<td>内容行2列2</td>
<td>内容行2列3</td>
</tr>
</tbody>
</table>
扩展知识
以下适用于pycharm中的快捷方式
1.书写html标签时,可只写标签名,然后点击,tab键,可自动补全.因为pycharm中存在emmet插件
2.出现需要重复写多个相同标签(以li标签举例)时，可使用*n ，n表示数量，然后点击tab键
<!--快捷方式：
>表示后续标签放在当前标签内部，
{$$$}表示li标签中的内容，
*4，表示重复4次
-->
ul>li{$$$$}*4 + tab键
<!--等价于以下内容-->
<ul>
<li>0001</li>
<li>0002</li>
<li>0003</li>
<li>0004</li>
</ul>
