HTML基本介绍与操作
一,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文档;
<html></html>
称为根标签,所有的网页标签都在<html></html>
中。<head></head>
标签用于定义文档的头部,它是所有头部元素的容器。常见的头部元素有<title>
、<script>
、<style>
、<link>
和<meta>
等标签,头部标签在下一节中会有详细介绍。- 在
<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>我的账户 ></li>
<li>我的订单 ></li>
<li>我的优惠券 ></li>
<li>我的收藏 ></li>
<li>退出 ></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中输入空格、回车都是没有作用的。要想输入空格,需要用特殊符号 -- 。
-->
<!-- 空格
> >
< <
& &
¥ ¥
版权 ©
注册 ® -->
</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基本介绍与操作的更多相关文章
- git介绍-常用操作(一)
Table of Contents 1 系列文章 2 git说明 3 git常用命令 3.1 基本操作 3.2 远程操作 4 查看git的配置 4.1 查看已配置项 4.2 其他配置 ...
- Python之路Day12--mysql介绍及操作
上节回顾: 1. RabbitMQ a. 平均分发 b. perfetch = 1 c. durable 队列持久化 deliver_mode = 2 消息持久化 d. 1对多广播 exchang ...
- spring对数据库的操作、spring中事务管理的介绍与操作
jdbcTemplate的入门 创建maven工程 此处省略 导入依赖 <!-- https://mvnrepository.com/artifact/org.springframework/s ...
- SQL 介绍和操作
1.什么是SQL SQL的全称是“结构话查询语句”(Structured Query Language ),是1974年有Boyce和chamberlin 提出来的.经过多年的发展,SQL语言已经成为 ...
- ELK学习实验004:Elasticsearch的简单介绍和操作
一 集群节点 Elstaicsearch的集群是由多个节点组成都,通过cluster.name设置集权名称,比能切用与区分其他的集群,每个节点通过node.name指定节点 在Elasticsearc ...
- 5.List链表类型介绍和操作
数据类型List链表 (1)介绍 list类型其实就是一个双向链表.通过push,pop操作从链表的头部或者尾部添加删除元素.这使得list既可以用作栈,也可以用作队列. 该list链表类型应用场景: ...
- SQL Server 索引(index) 和 视图(view) 的简单介绍和操作
--索引(index)和视图(view)-- --索引(index)----概述: 数据库中的索引类似于书籍的目录,他以指针形式包含了表中一列或几列组合的新顺序,实现表中数据库的逻辑排序.索引创建在数 ...
- 数据字典生成工具之旅(3):PowerDesign文件组成结构介绍及操作
从这篇开始将正式讲解整个重要部分的实现细节,本篇讲解Pdm文件的解析.其实PDM文件就是XML文件,可以用Editplus或者VS打开查看.了解到这一点之后大家就能猜到,可以用解析XML的方式读取PD ...
- C#核编之字符串类型介绍与操作
一.关于字符串操作的方法 System.String类提供了很多工具方法,包括返回字符数据长度,查找当前字符串中的子字符串和转换大小写等方法. 在String类中常用的比较字符串的方法主要有Compa ...
- C# 字符串类型介绍与操作
一.关于字符串操作的方法 System.String类提供了很多工具方法,包括返回字符数据长度,查找当前字符串中的子字符串和转换大小写等方法. 在String类中常用的比较字符串的方法主要有Compa ...
随机推荐
- let 和 var 的区别
var 关键字 在块级作用域中使用var声明变量,外面同级的块级作用域也可以访问.if.switch.for 等语句的作用域都没有块级作用域,所以说,在这些语句中声明的变量都能被外界访问,这是非常不安 ...
- Avalonia 实现平滑拖动指定控件
Avalonia 实现平滑拖动指定控件 1.创建一个UserControl控件,并且添加以下代码 using System; using Avalonia; using Avalonia.Contro ...
- Vulnhub:Five86-2靶机
kali:192.168.111.111 靶机:192.168.111.211 信息收集 端口扫描 nmap -A -v -sV -T5 -p- --script=http-enum 192.168. ...
- 阿里云oss初使用
一.购买 二.配置RAM权限 https://ram.console.aliyun.com/users 1.创建用户 2.创建完成后注意获取AccessKey ID.AccessKey Secret( ...
- Voletile-多线程小例子
public class Test{ public static volatile int t = 0; //如果没有下面的全局锁标识,则结果不一定为10*1000 public static Str ...
- 了解ASP(三) -- Cookie, Session, Application
ASP一共内建了7个对象,有Session.Application.Cookie.Response.Request.Server,这些对象都可以直接使用. 1. 什么是 Cookie? 1. cook ...
- Codeforces 1281E
Link 题意:一棵$2n$个点的树让你分配$n$对居民在点上求每对居民之间路径和的最小值和最大值 思路:考虑一条边$(u, v)$ 1.若要使答案尽可能大,那么这条边应该取到尽可能多次.显然,如果$ ...
- python 操作配置文件(configparser模块)
用于生成和修改常见配置文档,当前模块的名称在 python 3.x 版本中变更为 configparser 配置文件信息: [DEFAULT] ServerAliveInterval = 45 Com ...
- 将【jar包、bat、其他文件】注册到windows服务的三种方法
将[jar包.bat.其他文件]注册到windows服务的三种方法 1.instsrv.exe和srvany.exe 1.下载配置instsrv和srvany 下载地址:https://dl.pcon ...
- ENGG1310 Electricity and electronics P1.3 Electromagnetic
课程内容笔记,自用,不涉及任何 assignment,exam 答案 Notes for self-use, do not include any assignments or exams 这一节主要 ...