初识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标签中演示)

<!--空格字符: &nbsp;  注意是&开头 ;结尾-->
<p>君不见&nbsp;黄河之水天上来&nbsp;&nbsp;奔流到海不复回</p>
<p>君不见&nbsp;高堂明镜悲白发&nbsp;&nbsp;朝如青丝暮成雪</p>
<!--大于字符: &gt; 注意是&开头 ;结尾-->
<p>a大于b的表达式: a &gt; b</p>
<!--小于字符: &lt; 注意是&开头 ;结尾-->
<p>a大于b的表达式: a &lt; b</p>
<!--and(&)字符: &amp; 注意是&开头 ;结尾-->
<p>a&b a &amp; b</p>
<!--人民币字符: &yen; 注意是&开头 ;结尾-->
<p>人民币 &yen; 10000000元</p>
<!--版权标识: &copy; 注意是&开头 ;结尾-->
<p>版权标识 &copy;</p>
<!--注册商标：&reg; 注意是&开头 ;结尾-->
<p>注册商标 &reg;</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>

原文地址：https://www.cnblogs.com/xiaodan1040/p/12102255.html