一,HTML介绍

HTML,全称是超文本标记语言(HyperText Markup Language),它是一种用于创建网页的标记语言。标记语言是一种将文本(Text)以及文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的计算机文字编码。与文本相关的其他信息(包括例如文本的结构和表示信息等)与原来的文本结合在一起,但是使用标记(markup)进行标识。

二,开发环境

市面上有很多的HTML编辑器可以选择,常见的Hbuild、Sublime Text、Dreamweare都可以用来开发HTML。 当然PyCharm也支持HTML开发。

这里我使用sublime Text 来进行HTML的演示。

文件后缀一般使用.html或.htm .html与.htm均是静态网页后缀名

三,文档结构

<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>

首先,<!DOCTYPE HTML>是文档声明,必须写在HTML文档的第一行,位于<html>标签之前,表明该文档是HTML5文档。

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档;

  1. <html></html> 称为根标签,所有的网页标签都在<html></html>中。
  2. <head></head> 标签用于定义文档的头部,它是所有头部元素的容器。常见的头部元素有<title><script><style><link><meta>等标签,头部标签在下一节中会有详细介绍。
  3. <body></body>标签之间的内容是网页的主要内容,如<h1><p><a><img>等网页内容标签,在<body>标签中的内容(图中淡绿色部分内容)最终会在浏览器中显示出来。

HTML文档包含了HTML标签及文本内容,不同的标签在浏览器上会显示出不同的效果,所以我们需要记住最常见的标签的特性。

四,head标签

<!DOCTYPE html>
<html lang="en">
<html>
<head>
1.head 标签
<!--文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用(移动端) --> 2.title 标签
<!-- 文档的标题 -->
<title>火影忍者</title> 3.meta 标签
<!-- 常用的两个属性 -->
(1). http-equiv属性
<!-- 它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。 -->
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--重定向 2秒后跳转到对应的网址,注意分号-->
<meta http-equiv="refresh" content="5;URL=http://www.baidu.com">
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
(2).name属性
<!-- 主要用于页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用 ‘,’号隔开,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 -->
<!-- 为了我们的SEO优化 -->
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="路飞学城"> 4.link 标签
<!--引入外部样式表文件-->
<link rel="stylesheet"type="text/css" href="mystyle.css">
<!--定义icon图标(网站的图标)-->
<link rel="icon" href="fav.ico"> 5.style 标签
<!--定义内部样式表-->
<style type="text/css">
</style> 6.script标签
<!-- 定义内容脚本文件 -->
<script type="text/javascript"></script>
<script src="myscript.js">
</script>
</head>
<body> </body>
</html>

五,body标签

1.常用标签一

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>常用标签一</title>
</head>
<body>
<div class="p1">
<p style="height: 2000px"id="p1">顶部</p>
<!-- 增加2000的高度 -->
</div>
<!-- body相关标签 --> <div class="heading">
1.标题标签 h1-h6
由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。<br>因此,<h3>请不要利用标题标签来改变同一行中的字体大小。</h3>相反,我们应当使用css来定义来达到漂亮的显示效果。
<hr>
标题标签通常用来制作文章或网站的标题。
<!-- heading:标题h1~h6 没有h7标题 -->
<!-- 块级元素:1.独占一行 2可以设置宽高-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h7>六级标题</h7>
</div> <div class="p1">
2.段落标签p
<!-- 文本样式标签主要用来对HTML页面中的文本进行修饰,比如加粗、斜体、线条样式等...
1. `<b></b>`:加粗
2. `<i></i>`:斜体
3. `<u></u>`:下划线
4. `<s></s>`:删除线
5. `<sup></sup>`:上标
6. `<sub></sub>`:下标 -->
<p><b>路费学城</b>立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,<s>金融分析</s>,人工智能等互联网最前沿技术,开启职业生涯新可能</p>
</div> <div class="anchor">
3.超链接a标签
<!-- a标签属于行内标签:在一行显示设置宽高不起作用 -->
<!-- target
self:默认值:在当前网站打开资源
blank:在新网站打开资源 -->
<a href="https:www.baidu.com"target="blank"title="baidu">百度一下</a>
<a href="a.zip">下载压缩包</a>
<a href="mailto:15850526590@163.com">联系我们</a>
<!-- 转不过去 必须要装个软件什么的-->
<!-- 返回到页面顶部内容 -->
<a href="#">跳转到顶部</a>
<a href="#p1">跳转到顶部标签</a>
<!-- javascript:是表示在触发<a>默认动作时,执行一段JavaScript代码,
而 javascript:; 表示什么都不执行,这样点击<a>时就没有任何反应。 -->
<a href="javascript:alert(1)">内容</a>
<a href="javascript:;">内容</a>
</div> <div class="lists">
4.列表标签ul,ol
<!-- (1).无序列表 type可以定义无序列表的样式-->
<ul type="none">
<li>我的账户&nbsp;&nbsp;&nbsp;&gt;</li>
<li>我的订单&nbsp;&nbsp;&nbsp;&gt;</li>
<li>我的优惠券&nbsp;&nbsp;&nbsp;&gt;</li>
<li>我的收藏&nbsp;&nbsp;&nbsp;&gt;</li>
<li>退出&nbsp;&nbsp;&nbsp;&gt;</li>
</ul>
<!-- ul标签的属性: type:列表标识的类型
disc:实心圆(默认值)
circle:空心圆
square:实心矩形
none:不显示标识 --> <!-- (2).有序列表 type可以定义有序列表的样式 -->
<!-- <ol type="I"> -->
<ol style="list-style: none"> <!-- 可以看看另外一种隐藏方式 -->
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ol>
<!-- ol标签的属性:
type:列表标识的类型
1:数字
a:小写字母
A:大写字母
i:小写罗马字符
I:大写罗马字符 -->
</div> <div class="image">
<!-- 1.可以设置宽高2在一行内显示,它叫行内块标签 -->
5.图片标签img
<img src="01李.png"alt="洛克李"style="width: 200px;height: 200px">
<img src="02李.png"alt="洛克李"style="width: 200px;height: 200px">
</div> 6.span标签
<!-- 行内标签-白板 --> 7.盒子标签div
<!-- <div>可定义文档的分区 division的缩写 译:区 <div> 标签可以把文档分割为独立的、不同的部分,请看下面代码我们将他们进行分区 --> 8.其他标签br hr
<!-- 换行标签 <br>
<br> --><!-- 标签用来将内容换行,其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。
分割线 <hr>
<hr>标签用来在HTML页面中创建水平分隔线,通常用来分隔内容 -->
9.常用的特殊符号
<!-- 在上一个实例中,我们演示了HTML中输入空格、回车都是没有作用的。要想输入空格,需要用特殊符号 -- &nbsp;。
-->
<!-- 空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版权 &copy;
注册 &reg; -->
</body>
</html>

2.常用标签二table

表格由<table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td>标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>04-body常用标签二-table</title>
</head>
<body>
<!-- 表格 -->
<table border="1"cellspacing="0"> <!-- border边框 cellspacing间隙 -->
<!-- 表格头 -->
<thead>
<tr>
<!--表格列,【注意】这里使用的是th-->
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<!-- 表格主题 -->
<tbody>
<tr>
<!-- 表格主题的每一行 -->
<!--表格列,【注意】这里使用的是td-->
<td rowspan="3">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>化学</td>
<td>生物</td>
</tr>
<tr>
<!-- 表格主题的每一行 -->
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>化学</td>
<td>生物</td>
</tr>
<tr>
<!-- 表格主题的每一行 -->
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>化学</td>
<td>生物</td>
</tr>
<tr>
<!-- 表格主题的每一行 -->
<td rowspan="2">下午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>化学</td>
<td>生物</td>
</tr>
<tr>
<!-- 表格主题的每一行 -->
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>化学</td>
<td>生物</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">课程表</td>
</tr>
</tfoot>
</table>
</body>
</html>

3.常用标签三form

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>表单控件</title>
</head>
<body>
<div class="form">
<!-- form 标签是块级元素 被提交-->
<form action="https://www.baidu.com"method="get">
<p>
<!-- label标签是行内元素 -->
<label for="user">用户名:</label>
<input type="text" name="username"id="user"
placeholder="请输入用户名"> </p> <p>
<label for="password">密码:</label>
<input type="password" name="password"id="password"
placeholder="请输入密码">
</p>
<!-- 1.单选框 checked是默认值,要产生互斥效果,name值要相同-->
<p>
用户性别:
<input type="radio" name="sex"value="男"checked="男">男
<input type="radio" name="sex"value="女">女
</p>
<!-- 2.复选框 -->
<p>
用户的爱好:
<input type="checkbox" name="checkfav"value="吃">吃
<input type="checkbox" name="checkfav"value="喝">喝
<input type="checkbox" name="checkfav"value="玩">玩
<input type="checkbox" name="checkfav"value="乐">乐 </p>
<p>
<!-- 3.文件上传 -->
<input type="file" name="textFile">
</p>
<p>
<!-- 4.文本域 -->
<textarea cols="20" rows="5" name="txt" placeholder="请做自我介绍"></textarea>
</p>
<p>
<!-- 5.下拉列表 -->
<select name="sel" size="3">
<option value="深圳">深圳</option>
<option value="沙河">沙河</option>
<option value="北京">北京</option>
<option value="山东">山东</option>
<option value="福建">福建</option>
</select>
</p>
<p>
<!-- 6.显示普通按钮 disabled禁用按钮,可以不填值-->
<input type="button" name="btn"value="提交"disabled="">
<!-- 7.重置按钮 --> <input type="reset" name="">
<!-- 8.提交form表单使用type=submit按钮-->
<input type="submit" name="btn"value="submit">
</p> </form>
<!-- 按钮 -->
<button type="button">按钮</button>
</div>
</body>
</html>

六,标签分类与嵌套规则

(1)标签分类

HTML中标签元素三种不同类型:块状元素,行内元素,行内块状元素。

常用的块状元素:

<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>

块级元素特点:display:block;

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。独占一行

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

常用的行内元素:

<a> <span> <br> <i> <em> <strong> <label>

行内元素特点:display:inline;

1、和其他元素都在一行上;

2、元素的高度、宽度及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

常用的行内块状元素:

<img> <input>

行内块状元素的特点:display:inline-block;

1、和其他元素都在一行上;

2、元素的高度、宽度、行高以及顶和底边距都可设置

(2)嵌套规则

块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素,例如:

<div><div></div><h1></h1><p><p></div> ️

<a href=”#”><span></span></a> ️

<span><div></div></span>

块级元素不能放在p标签里面,比如

<p><ol><li></li></ol></p>

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

有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:

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

li元素可以嵌入ul,ol,div等标签

感谢观看,如有不对,一定要指出。小木在这里谢谢了

HTML基本介绍与操作的更多相关文章

  1. git介绍-常用操作(一)

    Table of Contents 1  系列文章 2  git说明 3  git常用命令 3.1  基本操作 3.2  远程操作 4  查看git的配置 4.1  查看已配置项 4.2  其他配置 ...

  2. Python之路Day12--mysql介绍及操作

    上节回顾: 1. RabbitMQ a. 平均分发 b. perfetch = 1 c. durable 队列持久化  deliver_mode = 2 消息持久化 d. 1对多广播  exchang ...

  3. spring对数据库的操作、spring中事务管理的介绍与操作

    jdbcTemplate的入门 创建maven工程 此处省略 导入依赖 <!-- https://mvnrepository.com/artifact/org.springframework/s ...

  4. SQL 介绍和操作

    1.什么是SQL SQL的全称是“结构话查询语句”(Structured Query Language ),是1974年有Boyce和chamberlin 提出来的.经过多年的发展,SQL语言已经成为 ...

  5. ELK学习实验004:Elasticsearch的简单介绍和操作

    一 集群节点 Elstaicsearch的集群是由多个节点组成都,通过cluster.name设置集权名称,比能切用与区分其他的集群,每个节点通过node.name指定节点 在Elasticsearc ...

  6. 5.List链表类型介绍和操作

    数据类型List链表 (1)介绍 list类型其实就是一个双向链表.通过push,pop操作从链表的头部或者尾部添加删除元素.这使得list既可以用作栈,也可以用作队列. 该list链表类型应用场景: ...

  7. SQL Server 索引(index) 和 视图(view) 的简单介绍和操作

    --索引(index)和视图(view)-- --索引(index)----概述: 数据库中的索引类似于书籍的目录,他以指针形式包含了表中一列或几列组合的新顺序,实现表中数据库的逻辑排序.索引创建在数 ...

  8. 数据字典生成工具之旅(3):PowerDesign文件组成结构介绍及操作

    从这篇开始将正式讲解整个重要部分的实现细节,本篇讲解Pdm文件的解析.其实PDM文件就是XML文件,可以用Editplus或者VS打开查看.了解到这一点之后大家就能猜到,可以用解析XML的方式读取PD ...

  9. C#核编之字符串类型介绍与操作

    一.关于字符串操作的方法 System.String类提供了很多工具方法,包括返回字符数据长度,查找当前字符串中的子字符串和转换大小写等方法. 在String类中常用的比较字符串的方法主要有Compa ...

  10. C# 字符串类型介绍与操作

    一.关于字符串操作的方法 System.String类提供了很多工具方法,包括返回字符数据长度,查找当前字符串中的子字符串和转换大小写等方法. 在String类中常用的比较字符串的方法主要有Compa ...

随机推荐

  1. css3自动滚动

    <!DOCTYPE html> <html lang="en"><div class="wrap"> <ul clas ...

  2. video遇到问题汇总

    1.调取视频自动播放video.play()时报错 Uncaught (in promise) DOMException: play() failed because the user didn't ...

  3. Spring Boot如何自定义监控指标

    1.创建项目 pom.xml引入相关依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=" ...

  4. DesignPatternPrinciple-设计模式原则

    1. 单一职责原则(Single Responsibility Principle)类T负责两个不同的职责:职责P1,职责P2. using System; using System.Collecti ...

  5. 野火FreeRTOS计数信号量实验意外处理

    编译的时候,一直说xSemaphoreCreateCounting这个函数没有定义. 最后发现,是FreeRTOSConfig.h文件中,没有将使能计数信号量的宏打开. 解决办法:在FreeRTOSC ...

  6. R Works with Google Earth Engine - Installation 【rgee - 安装问题解决集锦】

    Date : 2022/04/24 Intallation Tutorial - Reference : Introduction to rgee (r-project.org) Prerequisi ...

  7. PCIe卡设计资料保存:536-基于ZU7EV的FMC 通用PCIe卡

    基于ZU7EV的FMC 通用PCIe卡   一.板卡简介 基于3U PXIe的ZU11EG/ZU7EG/ZU7EV的通用 ,实现FMC的数据接口和主控计算,广泛应用于工业控制,检测,视觉处理.支持工业 ...

  8. golang流程控制if,switch分支

    if 分支 if 单分支 if 条件表达式 { 逻辑代码 } package main import "fmt" func main() { //var a int = 9 //i ...

  9. Hadoop搭建超级详解

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ...

  10. Linux基础环境的各项配置(三)

    接上篇,安装centos操作系统后,需对系统的基础环境做一些配置,如下: 1.设置静态IP(防止每次开机可能生成不一样的IP,导致与此虚拟机通信时出现错误):DNS解析,可以ping通外网: 1.1 ...