对HTML的格式和标签介绍

LC超人在良家

已于 2023-02-07 09:54:30 修改

阅读量907

点赞数 3

分类专栏：前端大杂烩文章标签： html 前端 css

于 2022-01-18 09:10:11 首次发布

本文链接：https://blog.csdn.net/LC_Liangchao/article/details/122470408

版权

前端大杂烩专栏收录该内容

22 篇文章 0 订阅

订阅专栏

对前端的基本理解：

1.结构（HTML）
用于描述页面结构
2.表现（CSS)
用于控制页面中元素的样式
在前端中起美化页面的作用
3.行为（JavaScript）
用于响应用户的操作
在前端中起网页布局修改的作用

HTML的基本格式

Hyper Text Markup Language(超文本标记语言)（包括文字，图片，音视频，动画等）

html的两种打开方式:
直接在浏览器上打开
通过pycharm打开
html的标签分类：

	单标签 格式 <meta/>
	双标签 格式 <title></title>

html的标签的用法:
<标签名属性名1=‘属性值1’ 属性名2=‘属性值2’>内容</标签名>

<!DOCTYPE html>
<html>
	<meat charset="utf-8" /> <!-- 解决显示乱码问题 -->
	<head>
		<meta charset="utf-8">
		<title>网页标题</title>
	</head>
	<body>
		<h1>网页正文</h1>
	</body>
</html>

HTML中的标签

<html>
	作用：<html>标签用于告诉浏览器这个文档中包含的信息是用HTML编写的
	用法：所有的网页内容都需要编写到html标签中，一个网页中html标签只能有一个
html标签中有两个子标签head和body
<!--设置编码格式-->
<meta http-equiv="content-Type" charset="UTF-8">
<!--指定两秒后自动刷新-->
<meta http-equiv="refresh" content="2” URL=https://www.oldboyedu.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="老男孩教育Python学院">

<head>
	作用：<html>标签用来表示网页的元数据，head中包含了浏览器和搜索引擎使用的其他不可见信息
	用法：head标签作为html标签的子元素出现，一个网页中只要有一个head
<title>
	作用：<title>标签表示网页的标题，显示在标题栏上，是搜索引擎最先看到的醒目内容
<body>
	作用：<body>标签用来设置网页的主体，所有可视页面都编写在body标签中
	用法：body标签作为html的子标签使用
<p>
	作用：<p>标签表示网页中的一个段落，一般浏览器会在段落的前后各加上一个换行，段落会在页面中自成一行
<br/>
	作用：<br/>标签表示一个换行标签，使用br标签可以使标签后的内容另起一行
<hr/>
	作用：<hr/>标签是水平线标签，使用hr标签可以在页面中打印一条水平线，水平线可以将页面分为上下两个部分
<img/>
	作用：<img/>标签是图片标签，可以用来向页面中引入一些外部的图片
	属性：src指向一个外部的图片路径
		  alt图片未加载成功的提示
		  title鼠标悬浮于图片上的提示
<a/>
	作用：<a/>标签是超链接标签，通过a标签，可以快速跳转到其他页面
	属性：href指向一个链接地址
		  target设置打开目标页面的位置，可选值：_blank新窗口，_self当前窗口
		  
<h1 title="我是一个标题">标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
div标签是在页面中划定一块范围，即定义一个块级标签
span通常是给文字使用，即用来定义一个行级标签

<!--无序列表-->
<ul type='disc'>
	<li>内容</li>
	<li>内容</li>
	<li>内容</li>	
</ul>

type的类型：
	1.disc 实心圆
	2.circle 空心圆
	3.square 正方形
	4.none 无形式

<!--有序列表-->
<ol type = '序号类型' start='起始计数'>
	<li>内容</li>
	<li>内容</li>
</ol>

type类型：
	1.'1'数字类型
	2.'I'大写罗马
	3.'i'小写罗马
	4.'a'小写字母
	5.'A'大写字母

<!--标题列表-->
<dl>
	<dt>标题1</dt>
	<dd>内容1</dd>
	<dt>标题2</dt>
	<dd>内容2</dd>
</dl>

常见的标签属性

id
id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值
class
class属性用来为标签分组，拥有相同属性的标签视为一组，就像python中的类，可以出现相同的class属性，可以为一个元素指定多个class
title
title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会显示提示文字

特殊字符

1.空格符号
&nbsp;
2.大于符号
&gt;
3.小于符号;
&lt;
4.&符号本身；
&amp;	
5.¥符号；
&yen;
6.版权；
&copy;
7.注册；
&reg;

网页的基本标签

标题标签：

<h1>一级标签  </h1>一直到6级标签

段落标签

<p>123</p>

换行标签

<br/>

水平线标签

<hr/>

字体样式标签

<strong>粗体</strong>
<em>斜体</em>

注释和特殊符号

<!-- 注释-->
空格 &nbsp;
> &gt;
< &lt;
版权符号 &copy;

图像标签
jpg,gif,png,bmp

<img src="图片地址" alt="图像的代替文字" title="鼠标悬停提示文字" width="图像宽度" height="图像高度"/>

图片地址有两种，相对(推荐)和从盘符的绝对路径

…/ 表示上一级目录

src=“…/resources/imgs/1.jpg”

链接标签
1超链接标签

<a href="链接地址" target="目标窗口位置">文本或者图像</a>

target的常用值是_self (默认，在当前网页标签打开)或者 _blank(在新的浏览器标签中打开)

2锚链接标签 — 跳转到一个页面的某个位置

需要一个锚标记，然后通过#跳转到标记处

<a name="top">顶部</a>
<a href="#top">回到顶部</a>

3功能性链接

<a href="mailto:241545@qq.com">联系我</a>
<a href="xxxx">QQ推广</a>

列表标签

有序列表(123)
<ol>
    <li></li>
</ol>

无序列表(...)
<ul>
    <li></li>
</ul>

自定义列表
<dl>
	<dt>学科</dt>
	
	<dd>java</dd>
	<dd>python</dd>
	<dd>linux</dd>
</dl>

表格标签
表格的结构：

单元格，行(tr)，列(td)，跨行(rowspan=“合并的行数”)，跨列(colspan=“合并的列数”)

<table border="1px">
	<tr>
		<td colspan="4">1-1</td>
		<td rowspan="2">1-2</td>
		<td>1-3</td>
	</tr>
</table>

border:是表格里面每个格子的的边框

行内元素，块元素

块元素，无论内容多少，该元素独占一行

行内元素，内容撑开高度，左右都是行内元素的可以排在一行

音视频元素

视频是video – mp4

controls 可以播放，控制条

autoplay自动播放

<video src="../resources/video/片头.mp4" controls autoplay></video>

音频是audio — mp3

<audio  src="../resources/audio/片头.mp3" controls autoplay></audio >

页面结构分析

这些结构标签相当于一个人容器，只是让结构更加清晰，不起实际性的作用。

##iframe内联框架
在一个网页里面嵌套另一个网页

表单语法

action 可以是页面，也可以是请求地址

get方式提交，可以在url上面看到提交的信息，不能传输大文件

post方式提交，url看不到信息，可以传输大文件，通过F2d header里面的form Data看到提交的信息

表单里面的元素必须要有name属性

<form method="规定如何发送表单数据，get|post" action="表示向何处发送表单数据">
	<p>名字：<input type="text" name=""></p>
	<p>密码：<input type="password" name=""></p>
	<p><input type="submit" name="button" value="提交"></p>
	<p><input type="reset" name="button" value="重置"></p>
</form>

按钮和多选框

多选

checked表示默认选中

爱好：
<input type="checkbox" value ="sleep" name="hobby">睡觉
<input type="checkbox" value ="song" name="hobby" checked>唱歌
<input type="checkbox" value ="dance" name="hobby">跳舞

按钮

##下拉框

国家：

中国
美国
日本

##文本域
cols,rows最大的行和列数

文本内容

##文件域

##带验证的input

##数字input
step步长

##滑块

##搜索框

##表单的应用
属性：readonly只读，disabled禁用，hidden隐藏（但是依旧把数据提交了）

增强鼠标的可用性

点击文字-你点我试试，鼠标会到对应的标签位置上。
你点我试试

##表单的初级验证
常用属性：

placeholder – 给一个提示默认

required-- 表示元素不能为空

pattern— 正则表达式

LC超人在良家

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
对HTML的格式和标签介绍

对前端的基本理解：1.结构（HTML）用于描述页面结构2.表现（CSS)用于控制页面中元素的样式在前端中起美化页面的作用3.行为（JavaScript）用于响应用户的操作在前端中起网页布局修改的作用HTML的基本格式Hyper Text Markup Language(超文本标记语言)（包括文字，图片，音视频，动画等）html的两种打开方式:直接在浏览器上打开通过pycharm打开html的标签分类：单标签 --> 双标签 --> html的标签
复制链接

扫一扫