HTML基础

最新推荐文章于 2024-04-04 13:31:27 发布
最新推荐文章于 2024-04-04 13:31:27 发布
阅读量448 收藏
点赞数 3
分类专栏： 前端布局 文章标签： html css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41947714/article/details/122147464
版权

超文本标记语言HTML（Hyper Text Markup Language）

  • 超文本： 不仅可以加入文字的文本文件，还可以加入链接、图片、声音、动画、影视等内容
  • 标记语言：是在纯文本文件里面包含了HTML指令代码。这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言。

如何创建HTML文件

  1. 文档的命名规则
    • 不允许使用特殊字符
    • 可以以中文命名，但是不推荐使用中文。
    • HTML文件名推荐使用小写。girl.html
    • 注意：如果创建完HTML文件后依然是文本文件格式，那么需要将系统里隐藏已知文件扩展名勾选掉

HTML标签相关

1. HTML标签

​ 标签是HTML的最基本单位，也是最重要的组成部分，通常使用两个角括号括起来的"<"和“>”.

  • 标签有两种形式：

    1. 成对标签(双标签)

      <p>内容</p>

    2. 不成对标签(单标签)

      <hr />
2. HTML标签大小写问题
  • 标签大小写无关，不区分大小写，与表示意思一样。HTML标签推荐使用小写
3. HTML标签属性
  1. HTML属性一般都出现在HTML标签中，是HTML标签的一部分。
  2. 标签可以有属性，包含了额外的信息，属性的值一定要在双引号中。而且标签还可以存在多个属性。
  3. 一般属性由属性名和属性值成对出现：
  4. 语法：<标签名 属性名1=“属性值” 属性名2=“属性值”></标签名>
4. HTML颜色值得设置
  1. 浏览器支持颜色名称集合，颜色值是一个关键字或者一个RGB格式的数字，在网页中都用的很多。
  2. 使用英文单词作为颜色值：
    • red 红色 | green 绿色 | blue 蓝色 | pink | purple
  3. 六位的十六进制颜色值： R G B
    • #00f # 00 00 ff
    • 前两位表示红色，中间两位表示绿色，最后两位表示蓝色
5.HTML注释

  1. 注释的好处

    • 方便查找、比对、方便其他程序员快速了解你的代码，方便以后自己对自己代码的理解和修改。

    • 注释的内容不会被浏览器解析出来

    • 格式：

      <!--书写注释的内容-->
6.HTML代码格式
  • 任何回车或者空格在源代码中都不起作用，所以在编写HTML代码时，都可以使用回车或者空格进行代码排版，这样可以使代码清晰偏于团队合作、必须保持严格的缩进规则，缩进以tab键为准
7. HTML实体字符
&nbsp; 空格
&lt; <
&gt; >
&copy; 版权符号

二. HTML主体结构

<!DOCTYPE html>
<html>    
	<head>
		<meta charset="utf-8" />
		<title>网页标题</title>
	</head>
    <body></body>
</html>
  1. 最顶部声明
    • 声明是文档的第一成份，位于文档的最顶部。
    • 该白浅告诉浏览器所使用的HTML规范。(H5的规范，所有浏览器都兼容的)
  2. 以开始，以结束，中间包含头部标签及主体标签

三. head标签中常用的标签

<head lang="en">
     <!--
	lang是language的意思,lang="en" 属性对页面声明主要语言，en表示英文，zh-cn表示中文。
	搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你得站点是中文站，这些都是HTML规范，越规范，越容易被收录
	-->
    <title></title> 设置网页标题
    <meta /> 是对页面的描述
    <meta charset="utf-8" /> 设置页面字符集  
   
    	<!--
			rel = 表示文档与被连接文档之间的关系
			type = 被连接文档的类型
			href = "被连接文档的地址"
		-->
    <link rel="stylesheet" type="text/css" href="css.css"/>  加载CSS文件
    <style></style>  加载CSS样式
  
</head>

四. HTML常用标签

1. 文本与文本格式标签
<p></p>段落标签 <!--特点：与上行文本和下行文本之间间隔一行-->
	<!--
		align 控制内容方向。取值：left 默认居左、center 居中、right 居右
		title 设置标题
	-->
<b></b>加粗标签
	<!--
		物理标签：b代表的意思bold  加粗的意思   html
	-->
<strong></strong> 强调某段文本效果是加粗
	<!--
		逻辑标记： 强调的意思    xhtml
	-->
<i></i> 定义斜体
<em></em>  强调某段文本 效果斜体
<br/> 换行标签
<hr/> 水平线标签 
<!--
	属性：align:水平对齐方式，默认是居中。
	width:水平线的长度，百分比及像素都可以。 
	size:水平线的高度。
	color:水平线的颜色
-->
<u></u> 下划线标签
<hn></hn>  <h1>~<h6> 标签定义标题，H1字体最大，H5字体最小。
    <!--h族标签只有h1到h6标签。没有H7标签-->

<pre></pre>原格式输出标签  注意:如果编辑器中显示的效果和浏览器中的效果不一样，需要用记事本打开代码重新调试
2. 语义化标签
<div></div>无意义的块级元素
<span></span> 无意义的行内元素
<header></header>定义网页头部
<footer></footer>定义网页底部
<nav></nav>定义网页导航
<aside></aside>定义网页侧边栏
<section></section>定义一个区块
<article></article>定义独立内容
<address></address>定义地址
3.列表标签
<ul></ul> 定义无序列表
	<!--
		type 规定在列表中使用的标记类型
			disc  默认实心圆
			circle  空心圆
			none  符号不显示
			square 小方块
	-->
<ol></ol> 定义有序列表
	<!--
		reversed 倒叙
		start  规定有序列表的起始值
		type 规定在列表中使用的标记类型
			1  表示项目用数字标号(1,2,3……)
			a  表示项目用小写字母标号
			A  表示项目用大写字母标号
			i  表示项目用小写罗马数字标号
			I  表示项目用大写的罗马数字标号
	-->
<li></li> 用于ul或者ol中定义列表项
<dl></dl> 定义一个定义列表
<dt></dt>标签定义一个定义列表中的一个项目以及dialog中角色
<dd></dd>标签定义一个定义列表中对项目的描述
4. 超链接标签
<a></a> 定义超链接。
	常用属性：
	target: 窗口的打开方式
		取值：_blank 在新窗口中打开被链接的文档。
			_self默认。在当前窗口中打开链接的文档。
			_top   在框架顶部打开被链接的文档(在整个窗口中打开被链接的文档)
	href: 用于从一个页面链接到另一个页面。记录需要跳转的地址

	对于路径而言：
	相对路径
		相对于自己来进行查找，在跳转时不需要添加协议。
		./  当前目录
		../  上一级目录
	绝对路径
		绝对路径要从根开始进行查找，需要添加对应的协议。

使用<a></a>标签来定义锚点。作用，快速找到页面中需要的位置。
锚点的实现：
	1.需要再快读找到的位置定义一个a标签，a标签中添加id属性，属性名自定义。
	2.在要跳转的a标签href属性的最后添加#后面跟锚点的名称来实现快速定位。
5. 多媒体标签
<img /> 标签定义图像
属性：
	src= 图像路径
	注意：如果图片的路径是绝对路径，那么必须加上协议。
	width 设置图像宽度
	height 设置图像高度
	注意：图像的宽度和高度如何同时设置，那么图片有可能会变形，如果宽度和高度仅只设置其中的一个，图片会等比缩放。
	alt:当图片显示不出来的时候出现的提示性文字。
	title：当鼠标放上去的时候出现的提示性文字
6. 表格标签
<table></table> 定义表格
	border:设置表格的边框
	align：设置表格相对于浏览器的水平位置  left   center  right
	width: 设置表格的宽度
	height:设置表格的高度
	background:设置表格的背景图片
	bgcolor:设置表格的背景颜色
	bordercolor:设置表格边框颜色
	cellspacing: 单元格之间的间距
	cellpadding:单元格内容与单元格边界的间距
<caption></caption> 定义表格的标题
<tr></tr>定义表格中的一行
	height:设置行高
	align:行内容的水平对齐方式 取值：left  center  right
	valign：行内容的垂直对齐方式  取值：top   middle  bottom
	bgcolor:行的背景颜色
<td></td>定义表格中的一个单元格
	width / height 设置宽高
	align 设置水平对齐方式 取值 left  center right
	valign 设置垂直对齐方式  取值 top middle bottom
	bgcolor 单元格的背景色
	colspan 设置单元格跨列
	rowspan 设置单元格跨行
<th></th> 定义表格内的表头单元格
<thead></thead> 设置表格的头部
<tbody></tbody>	设置表格的主体内容
<tfoot></tfoot>	设置表格的低部

五. HTML表单相关标签及属性

1.表单相关标签

<form></form> 用于为用户输入创建HTML表单
	<!--必须属性-->
	action -- 浏览者输入数据被传送到的地方，比如一个PHP页面
	method -- 数据传送的方式
		get -- 此方式传递数据量少，但是传递的信息显示在网址上。
		post -- 此方式传递信息多，而且不会把传递的信息显示在网址上。
<input />为用户定义需要使用的表单项
	<!--必须属性-->
	name -- 定义此表单项的名称。
	value -- 定义此表单项的默认值。
	type -- 代表一个输入域的显示方式(分为：输入型、选择型、点击型)
	type的取值：
	type = "text" 普通文本域
	type = "password" 密码域
	type = "radio" 单选  注意：如果要实现单选name属性名称必须一致才会产生排斥效果
	type = "checkbox"  复选框 多选框 注意：name名称后面必须加中括号  比如 name="hobby[]"代表一组
	type = "file" 文件选取表单
	type = "reset"  重置按钮 清空表单信息还原默认状态
	type = "hidden"  代表隐藏域，可以传送一些隐藏的信息到服务器中
	type = "image" 使用图片来显示提交按钮，使用src属性指定图片的位置。类似于img标签。
	type = "button" 普通按钮(给JS使用)
	type = "submit" 提交按钮，把信息传送到服务器，可以使用value属性来显示提交按钮上的文字信息
form把表单相关标签	
<button></button> 提交按钮(可以实现提交)
<button type="submit"></button> 提交按钮
<button type="button"></button>没有意义的按钮

<label></label> 为input元素定义标注(绑定元素)
实现绑定元素
	1：直接将内容和input标签包含在一块。
	2.在label标签中定义一个for属性，在input标签定义一个id属性，两个属性值相同即可实现关联。
<textarea></textarea> 多行文本输入域
	name 为多行文本输入域定义名称
	rows 定义多行文本输入域默认显示的行数
	cols 定义多行文本输入域默认显示的列数
	注意：textarea没有value属性，获取的只就是两个标签中间的内容。
<select></select> 定义下拉列表
	name 为该下拉列表定义名称
<option></option> 为下拉列表定义列表项
	value 为该列表项定义默认值
	注意：如果列表项中没有设置value属性，那么点击提交时，将获取option标签中间的内容。如果设置了value属性，将获取value属性设置的值。
<optgroup></optgroup> 为下拉列表定义分组
	label 定义分组的名称。
<fieldset></fieldset> 将表单内的相关元素进行分组
<legend></legend>为fieldset定义分组的标题
<datalist></datalist> 定义可选数列表
将可选数据列表与普通文本域进行关联
	1.在datalist标签中定义id属性
	2.在文本域中定义list属性，属性值指定id的属性值即可实现关联。
注意：列表项依然使用<option></option>来定义。

表单分离技术
	为了排版方便，在H5中表单标签允许脱离form表单之外，但是要实现提交需要做2件事。
	1.为form标签添加id属性，属性值自定义。
	2.为需要提交的元素添加form属性，属性值指定id的属性值即可实现提交。

新增的表单类型 type值等于：
	date 	日期选取表单
	time	时间选取表单
	week	周选取表单
	month	月份选取表单
	datetime-local  完整日期
	email 设定当前表单的验证方式是email邮件验证
	url 设定当前表单的验证方式是url方式
	number 设定当前表单的验证方式是数值验证	 可以使用min 和 max 
	range 设定当前表单的验证方式必须在指定的范围内  需要配合属性 min max
	search 设定当前表单为搜索表单
	color 设定表单为颜色选取
	tel 设定标签为电话号表单

2.表单相关属性

1. checked 实现单选框和复选框的默认选种
2. selected 为下拉列表定义默认选中项 用于option标签中。
3. min 用于设定表单的最小值 (适用于数值类型的表单 number range)
4. max 用于设定表单的最大值  (适用于数值类型的表单 number range)
5. readonly 只读 输入域可以选择，但是无法修改
6. disabled 禁用 输入域无法获取焦点，无法选择，以灰色显示
7. autofocus 自动获取焦点属性
8. placeholder 表单信息提示，用于代替表单中显示某人之需要使用value的情况，placeholder取代了value属性的显示提示信息的功能，并且不会随着提交而提交数据。
9. required 用于强制用户必须为该表单赋值，否则提示信息。
10.multiple 设定当前表单允许同时选中多个。适用于input[type=file]
	注意：如果实现多选，那么必须在name属性名后加[] 代表是一组。
11.pattern 用于自定义验证规则（需要配合正则的语法）
	[a-z] 表示只允许出现一个字符并且该字符必须在a-z之间任意一个(区分大小写)
12.step 设定跳过的数值或者设定2个数值之间的间隔(数值表单中)
13.novalidate 取消表单验证  适用于form标签中 取消所有表单项的验证
14.formaction 用于在提交按钮中修改当前表单的提交页面
15.formmethod 用于在提交按钮中修改当前表单的提交方式
16.formenctype  用于在提交按钮中修改当前表单的提交数据编码类型(一般不用，文件上传时使用)
17.formnovalidate 用于在提交按钮中取消当前表单验证
18.tabindex tab键切换索引属性
爱唯主机
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML基础练习题
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
HTML基础知识
xuan971130的博客
03-02 2923
一、基础知识： 1.网站：许多网页的集合。 2.HTML：超文本标记语言（Hyper Text Markup Language），用来描述网页的一种语言。不是一种变编程语言，而是一种标记语言。 3.浏览器内核（渲染引擎）：负责读取网页内容，整理讯息、计算网页的显示方式并显示页面。 4.Web标准的组成 ...
HTML基础入门（详细）
weixin_51143430的博客
08-28 3762
HTMLHTML结构2.HTML常见标签2.1注释标签2.2换行符2.3加粗标签2.4文字格式化2.4.1加粗2.4.2倾斜 2.4.3下划线 HTML结构 2.HTML常见标签 2.1注释标签 <!--注释> ctrl快捷键可快速进行注释或取消注释 2.2换行符 2.3加粗标签 2.4文字格式化 2.4.1加粗 2.4.2倾斜 2.4.3下划线 ......
HTML初识——网页设计html基础
qq_45864756的博客
08-29 5460
html初识
HTML基础知识总结
ss810540895的博客
05-05 8669
是告诉浏览器这是html文档的开始。Html文档的最后一个标签是之间的文本是头部信息，在之间的文本是文档标题，会显示在浏览器的窗口的标题栏。设置网页编码的语句为，是在
HTML基础代码用法大全,html代码大全(基础使用代码)(颜色代码完整版)
weixin_31967551的博客
06-07 7381
该楼层疑似违规已被系统折叠隐藏此楼查看此楼您在使用以下基础使用代码时请把{}换成<>！！！)(这样这个命令才成立！！！)基础使用代码：1)贴图：{imgsrc="图片地址"}2)加入连接：{ahref="所要连接的相关地址"}写上你想写的字{/a}3)在新窗口打开连接：{ahref="相关地址"target="_blank"}写上要写的字{/a}4)移动字体(走马灯)：{ma...
HTML基础内容
qq_45794962的博客
10-05 1万+
HTML 段落 HTML 段落是通过标签 <p> 来定义的。 实例 <p>这是一个段落。</p> <p>这是另外一个段落。</p> HTML 链接 HTML 链接是通过标签 <a> 来定义的。 实例 <a href="https://www.runoob.com">这是一个链接</a> 提示:在 href 属性中指定链接的地址。 (您将在本教程稍后的章节中学习更多有关属性的知识)。 HT.
HTML基础（超级详细）
最新发布
weixin_58849785的博客
04-04 2403
HTML（HyperText Markup Language）是一种用于创建网页的标记语言。它通过标记符号来描述网页的结构和内容，是万维网（World Wide Web）的基础语言。HTML可以用来创建静态网页，也可以与JavaScript和CSS等技术结合，创建动态交互式的网页。HTML文档由各种元素（elements）组成，如标题、段落、列表、链接、图片等。自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。
HTML基础————table标签
热门推荐
憨憨的博客
05-07 1万+
html——table
HTML基础模板
qq_61690596的博客
07-18 2072
HTML基本模板，每个基础元素的内容和作用
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 4767
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
HTML基础网页布局代码写法
m0_51826406的博客
03-07 8772
W3C标准 W3C World Wide Web Consortium 万维网联盟 中立性技术标准机构 W3C标准包括 结构化标准语言（HTML XML） 表现标准语言（CSS） 行为标准（DOM ECMAScript） 在idea创建一个工程 开始学习HTML基础 <!--注释 DOCTYPE：告诉浏览器我们使用什么规范 --> <!DOCTYPE html> <html lang="en"> <!-- head代表网页头部 --> <hea
js数据什么时候是null什么时候是undefined
爱唯主机
09-17 2121
常见的返回undefined类型的 变量声明且没有赋值 获取对象中不存在的属性 函数需要实参，但是调用时没有传值，形参是undefined 函数调用没有返回值或者return后没有数据，接受函数返回值的变量 返回null 对象不存在就是null ...
js中pageshow和load事件的区别
爱唯主机
03-27 1214
我们一般在三种情况下刷新页面都会触发load事件 1、a标签的超链接 2、F5或者刷新按钮（强制刷新） 3、前进后退按钮 但是在火狐浏览器中，有个特点，有个”往返缓存“，这个缓存中不仅保存着页面数据，还保存了DOM和javascript的状态，实际上是将庚哥页面都保存在了内存里 所以此时后退按钮就不能刷新页面，导致load事件不被执行。 此时我们可以使用pageshow事件来触发，这个...
新手小白非常适合的手机端常见布局，flex布局属性详解
爱唯主机
03-14 424
常见的父项属性 flex-direction：设置主轴的方向 flex-direction:属性决定主轴的方向（即项目的排列方向）默认x轴为主轴 注意：主轴和侧轴是会变化的，我们的子元素是跟着主轴排列的 flex-direction:row(默认值)|row-reverse(从右到左)|column（从上到下）| column-reverse(从下到上) justify-content：设置主轴...
js BOM详解
爱唯主机
03-27 363
什么是BOM BOM是浏览器对象模型，它提供了独立于内容与浏览器窗口进行交互的对象，其核心对象是window DOM和BOM区别 DOM： 文档对象模型 DOM就是把[文档]当做一个[对象]来看待 DOM的顶级等下是document DOM主要学习的是操作页面元素 DOM是W3C标准规划 BOM： 浏览器对象模型 吧[浏览器]当做一个[对象]来看待 BOM的顶级对象是window BOM学...
第一次学前端你必须要知道的rem布局以及Less的基本用法
爱唯主机
03-15 325
rem说明 rem是一个相对单位，类似em，em是 父元素字体大小 。不同的是rem的基准是相对于html元素的字体大小 比如：根元素（html）设置font-size：12px；非根元素设置width:2rem；则换成px表示就是24px。 媒体查询 什么是媒体查询：媒体查询是CSS3新语法 作用： 使用@media查询，可以针对不同的媒体类型定义不同的样式 @media可以针对不同的屏幕尺寸...
HTML基础知识详解
...它是Web开发的基础，允许开发者通过各种标签...这些只是HTML基础知识的一部分，实际开发中还有表格、列表、链接、图像、表单、框架、多媒体等诸多元素和属性。熟练掌握这些基本概念是成为一名合格的前端开发者的基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值