前端知识之HTML标签

1.HTML是一个标准，规定了大家怎么写网页。

2.HTML->>学标签

<标签名> --> 标记语言（HTML、XML）

3.标签分类

　双标签、单标签　

（1）<h1></h1>

（2）<img/>或<img>

（3）<a></a>

4，标记语句和编程语言的区别

5.HTML文件的结构

<!DOCTYPE html> <!-- 声明用的是html5的语言 -->

<html>

<head>  <!-- head告诉浏览器这个网页相关的信息，比如这个网页的标题是什么，引用的样式是哪些，引用的CSS文件是哪些，引用的JS文件是哪些, -->

</head> <!-- head中的内容不会在浏览器中显示出来 -->

<body> <!-- body标签中的内容才会显示在浏览器的主页面上 -->

    <h1>hello s9!</h1>

    <img src = "http://p4.so.qhmsg.com/t017f86f85a400e9e5b.jpg">

    <a href="http://www.sogo.com">sogo</a>

</body>>

</html>

6.设置pycharm中创建html文件时，默认创建的html就是中文的，使得html文件归类为中文类的。

（1）settings -》 Editor -> file and code templates 修改html file的en为zh-CN

<!DOCTYPE html>

<html lang="zh-CN"> <!-- zh-CN表示是以中文为主的html页面 -->

<head>

    <meta charset="UTF-8"> <!-- 表示utf-8编码 -->

    <title>Title</title>

</head>

<body>

</body>

</html>

7.注释

　　注释的使用

<body>

<!-- 商品列表 开始 -->

<!-- 商品列表 结束 -->

</body>

8.head标签

head告诉浏览器这个网页相关的信息，比如这个网页的标题是什么，引用的样式是哪些，引用的CSS文件是哪些，引用的JS文件是哪些.

head中的内容不会在浏览器中显示出来，用户看不到

　head标签内常用的标签：

（1）<meta/>

（2）<link/>

（3）<style></style>

（4）<script></script>

（5）<title></title>

（6）head标签代码解释示例

<!DOCTYPE html>

<!-- zh-CN表示是以中文为主的html页面 -->

<html lang="zh-CN">

<head>

    <!-- meta定义网页原信息,主要用来让浏览器知道一些事情。对用户是不可见的。

    如果网页要显示中文，则要设置这个，表示utf-8编码，不然中文会显示乱码 -->

    <meta charset="UTF-8"/>

    <meta name="keywords" content="meta总结"> <!-- keywords关键字 使我这个网站都过搜什么东西能够搜到我-->

    <meta name="description" content="老男孩python学院"> <!-- 描述这个网页是做什么的 -->

    <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> <!-- 设置这个网页打开后几秒中刷新一次或几秒中后调转到另外一个网站 -->

    <!-- 告诉IE浏览器以最高模式edge火力全开渲染文档 -->

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <!-- title标题，这个内容设置的是网页打开后，网页标签的名字。也作为搜索引擎搜索到的名字 -->

    <title>我的第一个html页面</title>

    <!-- style定义内部样式表，指的是CSS的样式 -->

    <style>

        a {

            color: red;  <!-- 下面的a标签设置为红色 -->

        }

    </style>>

    <!-- script定义JS代码或引入外部JS文件 -->

    <script>

        alert("heelo S9!");  <!-- 会使得在刷新网页的时候，弹出一个提示框，内容为hell S9! -->

    </script>

    <!-- link引入外部样式表文件 -->

    <link rel = "stylesheet" href="test.css"/> <!-- 引入外部的css文件的样式用于本网页 -->

</head>

<body>

<!-- 商品列表 开始 -->

<a href="">这是一个a标签</a>

<!-- 商品列表 结束 -->

</body>

</html>

9.body标签

body标签中的内容才是用户在浏览器中实际看到的内容

（1）body标签中的几个常用标签的例子

<!DOCTYPE html>

<!-- zh-CN表示是以中文为主的html页面 -->

<html lang="zh-CN">

<head>

    <!-- meta定义网页原信息,主要用来让浏览器知道一些事情。对用户是不可见的。

    如果网页要显示中文，则要设置这个，表示utf-8编码，不然中文会显示乱码 -->

    <meta charset="UTF-8"/>

    <!--<meta name="keywords" content="meta总结"> &lt;!&ndash; keywords关键字 使我这个网站都过搜什么东西能够搜到我&ndash;&gt;-->

    <!--<meta name="description" content="老男孩python学院"> &lt;!&ndash; 描述这个网页是做什么的 &ndash;&gt;-->

    <!--<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> &lt;!&ndash; 设置这个网页打开后几秒中刷新一次或几秒中后调转到另外一个网站 &ndash;&gt;-->

    <!-- 告诉IE浏览器以最高模式edge火力全开渲染文档 -->

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <!-- title标题，这个内容设置的是网页打开后，网页标签的名字。也作为搜索引擎搜索到的名字 -->

    <title>我的第一个html页面</title>

    <!-- style定义内部样式表，指的是CSS的样式 -->

    <!--<style>-->

        <!--a {-->

            <!--color: red;  &lt;!&ndash; 下面的a标签设置为红色 &ndash;&gt;-->

        <!--}-->

    <!--</style>>-->

    <!-- script定义JS代码或引入外部JS文件 -->

    <!--<script>-->

        <!--alert("heelo S9!");  &lt;!&ndash; 会使得在刷新网页的时候，弹出一个提示框，内容为hell S9! &ndash;&gt;-->

    <!--</script>-->

    <!-- link引入外部样式表文件 -->

    <!--<link rel = "stylesheet" href="test.css"/> &lt;!&ndash; 引入外部的css文件的样式用于本网页 &ndash;&gt;-->

</head>

<body>

<!-- h1表示标题，他有5个兄弟 h2 h3 h4 h5 h6。起到变黑变粗的效果， 越往后的标题字体越来越小，最多用到h3其实就够了。-->

<h1>hello S9!</h1>

<h2>hello S10!</h2>

<h3>hello S11!</h3>

<h4>hello S12!</h4>

<h5>hello S13!</h5>

<h6>hello S14!</h6>

hello S20!

<!-- img 标签。显示图片，src表示原文件从哪来，可以是从本地来的，也可以是从网络上来的。alt表示图片找不到的话，那个显示的位置显示的东西。title表示鼠标放上去后显示的提示信息 -->

<img src="http://p4.so.qhmsg.com/t017f86f85a400e9e5b.jpg" alt="没有图片" title="美女">

<!-- title表示鼠标放上去后显示的提示信息 -->

<img src="./1.jpg" alt="没有图片" title="美女">

<!-- a标签的href属性表示点击后会跳转到哪里去.这里表示点击这是一个a标签后会跳转到www.baidu.com -->

<!-- a标签的target属性，点击后可以让其用一个新的网页标签打开这个baidu.com -->

<a href="http://www.baidu.com" target="_blank">这是一个a标签</a>

<!-- 点击这个标签后会调到id为a2的那个标签，也就是哈哈那里 -->

<a href="#a2">a1跳a2</a>

<div style="height: 1000px;background-color: red"></div>

<a href="" id = 'a2'>哈哈</a>

</body>

</html>

a标签中的target属性补充

（2）标签中也可以有自己的属性，下面的src、alt、title就是img标签自带的属性。当然也可以给标签自定义属性，s9和s10就自定义的属性，属性之间用空格分隔

<img s9 = "xxx" s10 = "00" src="./1.jpg" alt="没有图片" title="美女">

（3）任何标签都有三个属性，第一个属性是id，id相当于标签的唯一标识，同一网页上原则上是不同重复的，id通常是一个数字或字母的组合。

　　第二个属性是class属性，给标签定义的css样式可以在class属性里面写。

　　第三个属性是style属性，就这个位置写一个样式。

<img id="id1" class="" style="color: aquamarine" src="./1.jpg" alt="没有图片" title="美女">

（4）body标签中常用的几个特殊字符

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

Python全栈9期

<b>Python全栈9期</b>  <!-- b加粗的作用 -->

<i>Python全栈9期</i> <!-- 斜体 -->

<u>Python全栈9期</u>   <!-- 加下划线 -->

<s>Python全栈9期</s>   <!-- 字中间被线划掉 -->

<h1>海燕</h1>

<!-- p起到起一个段落的作用，并且一行满了后会自动换行 -->

<p>在苍茫的大海上，狂风卷积着乌云</p>

<p>在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔.在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔</p>

<!-- hr水平线 -->

<hr>

<!-- br换行的作用 -->

在苍茫的大海上<br/>狂风卷积着乌云<br/>在乌云和大海之间

5&lt;    <!-- &lt;表示小于号 -->

&copy;  <!-- 表示一个版本的标识符号 -->

<br>

<h1>海 &nbsp; &nbsp;&nbsp;燕</h1>  <!-- &nbsp表示空格符号 -->

</body>

</html>

（5）body中的div标签和span标签

div标签和span标签用的最多。这两个没有自己的一个特点，就是因为这样他俩就像白纸一样，可以被人使用，赋予很多可能性

<div>我是div标签</div>

<div>我是div标签</div>      <!-- div标签自己占一行 -->

<span>我是span标签</span>   <!-- span标签不换行 -->

<span>我是span标签</span>

（6）标签分类：可以根据标签占的长度来划分。

　　块级标签，默认占浏览器宽度，块级标签能设置长和宽

　　　　算块级标签有：div、h1~h6、p、hr、

　　内联标签（行内标签），有多少长度占都长，根据内容决定长度，内联标签不能设置长和宽，只能根据内容决定长度

　　　　算内联标签的有：a、img、u、s、i、b、span

（7）列表标签

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<ul>

    <li>aaa</li>  <!-- 无序的列表标签 ·aaa -->

    <li>bbb</li>  <!-- 无序的列表标签 ·bbb -->

    <li>ccc</li>  <!-- 无序的列表标签 ·ccc -->

</ul>

<ol>

    <li>aaa</li>  <!-- 有序的列表标签 1.aaa -->

    <li>bbb</li>  <!-- 有序的列表标签 1.bbb -->

    <li>ccc</li>  <!-- 有序的列表标签 1.ccc -->

</ol>

<ul type="square"> <!-- 前面无序的符号变为实心方块 -->

    <li>aaa</li>  <!-- 无序的列表标签  -->

    <li>bbb</li>  <!-- 无序的列表标签  -->

    <li>ccc</li>  <!-- 无序的列表标签  -->

</ul>

<ol type = 'a' start = 2>   <!-- type = a,表示序号用a、b、c等表示。start表示序号从第几个开始 -->

    <li>aaa</li>  <!-- 有序的列表标签 a.aaa -->

    <li>bbb</li>  <!-- 有序的列表标签 b.bbb -->

    <li>ccc</li>  <!-- 有序的列表标签 c.ccc -->

</ol>

<!-- 标题列表，显示出来标题与内容和word文档中的标题与内容的效果类似 -->

<dl>

    <dt>标题1</dt>

    <dd>内容1</dd>

    <dt>标题2</dt>

    <dd>内容2</dd>

    <dt>标题3</dt>

    <dd>内容3</dd>

</dl>

</body>

</html>

（8）表格

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<table border="1" cellpadding="10"> <!-- table是表格的标签， border=1表示设置表格的边框为1像素.cellpadding内边距为10 -->

    <thead> <!-- thead表格头 -->

    <tr>    <!-- tr表示行 -->

        <th>姓名</th> <!-- th 表示表格头的列 -->

        <th>年龄</th>

        <th>爱好</th>

    </tr>

    </thead>

    <tbody> <!-- 表格的身体 -->

        <tr>    <!-- 这里表示表格身体的一行。就是表格的内容的第一行 -->

            <td>    <!-- 表示表格身体这行内容的一个列。表格内容的第一行第一列 -->

                姓名是小强

            </td>

            <td>    <!-- 表示表格身体这行内容的一个列。表格内容的第一行第二列 -->

                年龄是9000

            </td>

            <td>    <!-- 表示表格身体这行内容的一个列。表格内容的第一行第三列 -->

                爱好是戴帽子

            </td>

        </tr>

            <tr>    <!-- 这里表示表格身体的一行。表格内容第二行-->

            <td>    <!-- 表示表格身体这行内容的一个列。别个内容的第二行第一列 -->

                姓whylinux

            </td>

            <td>    <!-- 表示表格身体这行内容的一个列。别个内容的第二行第二列 -->

                25

            </td>

            <td>    <!-- 表示表格身体这行内容的一个列。别个内容的第二行第三列 -->

                1024

            </td>

        </tr> <!-- tr表示表格身体内容的行 -->

    </tbody>

</table>

</body>

</html>

（9）pycharm中几个编写html快速的手段。emmt插件提供的快捷写html的方式：>表示儿子是谁。{}中是内容。$对应的是数字，从1开始

　　h1+tab键，快速生成<h1></h1>

　　h1*4+tab键，快速生成四个<h1></h1>

　　h1>a+tab键，快速生成a标签内嵌在h1标签中。表示h1标签的儿子是a标签。

　　h1*4>a+tab键，快速生成4个h1标签，每个h1标签中都内嵌了一个a标签　　

　　h1*4>a{$}+tab键，快速生成4个h1标签，每个h1标签中内嵌了一个a标签，并且每个a标签的标签名是数字，从1开始到4

　　h1*4>a.c1{$}+tab键，快速生成4个h1标签，每个h1标签中内嵌了一个a标签，并且每个a标签的标签名是数字，从1开始到4，每个a标签中有一个class属性，class属性被赋值为c1，

　　h1*4>a.c1[id=a$]{a标签$}+tab键，快速生成4个h1标签，每个h1标签中内嵌了一个a标签，并且每个a标签的标签名是数字，从1开始到4，每个a标签中有一个class属性，class属性被赋值为c1，4个a标签的id属性值分别赋值为1到4

<h1><a href="" class="c1" id="a1">a标签</a></h1>

<h1><a href="" class="c1" id="a2">a标签</a></h1>

<h1><a href="" class="c1" id="a3">a标签</a></h1>

<h1><a href="" class="c1" id="a4">a标签</a></h1>

　　在pycharm中快速格式化格式html代码，将html代码内容格式分明的显示。选择Code ->Reformat Code

　　按住alt键+鼠标左键选择多行，可以能写多行

（10）标签的嵌套规则

　　@1：行内标签不能嵌套块级标签

　　@2：p标签不能嵌套块级标签。p标签不能嵌套div标签

　　@3：块级标签内可以嵌套行内标签

　　@4：块级标签可以嵌套块级标签

前端知识之HTML标签的更多相关文章

前端知识-控制div标签的显示与隐藏
//将附件信息列表进行隐藏 var tAppendixDiv = document.getElementById("AppendixDiv"); tAppendixDiv.styl ...
移动端 Web 开发前端知识整理
文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...
3 HTML&JS等前端知识系列之javascript的基础
preface 作为一名运维开发,必须懂得前端知识,比如javascript,dom等等,下面就聊聊javascript. include 数据格式条件判断,循环流程等. 函数面向对象 what ...
移动Web 开发中的一些前端知识收集汇总
在开发DeveMobile 与EaseMobile 主题的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下. 要说移动Web 开发与传统的PC 端开发,感觉也没什么 ...
JS前端知识模块大全
公司前端:小胖提供,表示感谢 1. 基础 HTML, CSS, JS 文档 W3CSCHOOL: http://www.w3schools.com/ MDN: https://developer.mo ...
Web前端知识体系精简
Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...
从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！
前言见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...
整理六百篇web前端知识混总
9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具创建响应式布局的10款优秀 ...
（转）web前端知识精简
Web前端技术由 html.css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学 ...

随机推荐

快速掌握Java8 Stream函数式编程技巧
函数式编程优势 "函数第一位",即函数可以出现在任何地方. 可以把函数作为参数传递给另一个函数,还可以将函数作为返回值. 让代码的逻辑更清晰更优雅. 减少了可变量(Immutabl ...
置Hugo的代码高亮
+++ date="2020-10-17" title="设置Hugo的代码高亮" tags=["hugo"] categories=[&q ...
spring boot:用itextpdf处理pdf表格文件（spring boot 2.3.2）
一,什么是itextpdf? 1,itextpdf的用途 itextpdf是用来生成PDF文档的一个java类库, 通过iText可以生成PDF文档, 还可以把XML/Html文件转化为PDF文件 2 ...
kubernetes:用kubeadm管理token(kubernetes 1.18.3)
一,token的用途: 1,token是node节点用来连接master节点的令牌字串, 它和ca证书的hash值是把一台node节点加入到kubernetes集群时要使用的凭证 2, 通过kubea ...
第五章 Linux操作系统关机、重启、注销及其查看ip命令
一.更新系统时间与网络时间同步 1. 安装ntpdate工具 # yum -y install ntp ntpdate 2. 设置系统时间与网络时间同步 # ntpdate cn.pool.ntp ...
深入理解Java的抽象类和接口
对于面向对象来说,抽象是其重要特征之一.对于之中的抽象类和接口,两者有很多相似的地方,又有两者之间区别的地方. 用几个简单的例子让你快速的理解两者之间的概念和区别鸣谢一.抽象类在了解抽象类之前, ...
JAVA递归实现线索化二叉树
JAVA递归实现线索化二叉树基础理论首先,二叉树递归遍历分为先序遍历.中序遍历和后序遍历. 先序遍历为:根节点+左子树+右子树中序遍历为:左子树+根节点+右子树后序遍历为:左子树+右子树+根节 ...
DRF (学习第一部)
目录 Web应用模式 API接口 RESTful API 规范序列化 Django Rest_Framework 环境安装预与配置序列化器 -Serializer Web应用模式在开发web应用 ...
MFiX做增量编译的时候不要删掉*.mod和*.inc文件
其实之前发现了这个问题,但是没有记录,过了好久又忘了.具体问题是,在做增量编译的之前,都会习惯性地删除多余文件再编译,随手就把*.mod和*.inc这类中间文件也删了,结果修改完代码执行 make - ...
深度对比Apache CarbonData、Hudi和Open Delta三大开源数据湖方案
摘要:今天我们就来解构数据湖的核心需求,同时深度对比Apache CarbonData.Hudi和Open Delta三大解决方案,帮助用户更好地针对自身场景来做数据湖方案选型. 背景我们已经看到, ...

前端知识之HTML标签

前端知识之HTML标签的更多相关文章

随机推荐

热门专题