html基础

最新推荐文章于 2024-11-03 19:27:37 发布
最新推荐文章于 2024-11-03 19:27:37 发布
阅读量416 收藏 2
点赞数 1
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Leon_ang/article/details/78581981
版权

１   标签语义化

１.1    概念：

    什么样的标签干什么样的事。

１.2  意义：

   1：网页结构合理

   2：利于SEO

   3：方便其他设备解析

   4：便于团队开发和维护

１.3   什么样的网页语义化比较好

      让网页裸奔（css样式去掉），结构依然清楚。

１.4  做法

    1：尽可能少的使用无语义的标签div和span；

               网页布局。

   2：在语义不明显时，既可以使用div或者p时，尽量用有语义的标签

   3: 不要使用纯样式标签，如：b、font、u等，改用css设置

   4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）

2   常用标签

 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
 	<meta name="keywords" content="百度搜索时的关键词">
 	<meta name="description" content="对网站的描述">
 	<!-- <meta http-equiv="refresh" content="5;url=http://www.baidu.com">  网页重定向 5秒后跳转到百度-->

 	<link rel="stylesheet" type="text/css" href=""><!-- 引入外部样式表 -->
 	<link rel="icon" href="images/1.jpg"><!-- 网页title前的小图标 -->

 	<title>html基础</title>
 </head>
 <body>
 	<a href="https://www.cnblogs.com/sapho/p/5623262.html">Emmet缩写语法表：https://www.cnblogs.com/sapho/p/5623262.html</a>
 	<br>

 	<p id="db">锚标签：回到顶部</p>

 	<!-- 文本注释标签 -->
 	文本换行标签<br>文本换行标签<br>
 	横线标签<hr>

 	<P>
 		这是一个段落标签
 	</P>

 	<h1>这是一个标题标签</h1>
 	<h2>这也是一个标题标签</h2>
 	<font size="10" color="red">
 		文字标签（常用css）
 	</font>

 	<hr>
 	<br>
 	文本格式标签：普通文字
 	<strong>
 		加粗文字标签
 	</strong>
 	<b>
 		另一个加粗文字标签
 	</b>
 	<em>文字斜体标签</em>
 	<i>另一个文字斜体标签</i>
 	<del>删除线标签</del>
 	<s>另一个删除线标签</s>
 	<u>文字下划线标签</u>
 	<ins>另一个文字下划线标签</ins>
 	<br>

 	<hr>
 	<img src="images/github.png" title="图片标签，喵~" alt="当图片无法正常加载时对图片的描述" width="100" height="100">

 	<hr>
 	<br>
 	<a href="http://www.baidu.com" title="这是百度" target="_self">超链接标签：在当前页面打开</a>
 	<a href="http://www.baidu.com" title="这是百度" target="_blank">超链接标签：在新页面打开</a>
 	<!-- 也可以在head里面写 <base target="_blank"> -->

 	<a href="#db" title="利用标签的id">锚标签：返回顶部</a>

 	<a href="xiazai/images.zip">a标签的下载功能</a>
 	<br>
 	<a href="https://github.com" target="_blank" title="图片超链接">
 		<img src="images/github.png" width="100" height="100">
 	</a>
 	<br>
 	<a href="#">不跳转到任何页面</a>
 	<br>

 	<hr>
 	特殊字符：
 	段落标签由<p></p>表示
 	<br>
 	<img src="images/特殊字符.png" width="850" height="350">
 	<br>

 	<hr>
 	列表：<br>
 	无序列表：喜欢吃什么
 	<ul type="square">
 		如下
 		<li type="circle">薯片</li>
 		<li>薯条</li>
 		<li>可乐</li>
 		<li>汉堡</li>
 	</ul>

 	<br>
 	有序列表
 	<!-- type 默认数字，可以是a A i I -->
 	<ol type="a" start="3">
 		<li>衣</li>
 		<li>食</li>
 		<li>住</li>
 		<li>行</li>
 	</ol>
 	<br>

 	自定义列表
 	<dl>
 		<dt>小标题</dt>
 		<dd>列表项：与li相同</dd>
 		<dd>诶呀</dd>
 		<dd>嘿哟</dd>
 		<dd>rua</dd>
 	</dl>

 	<hr>
 	<br>
 	音乐播放器<br>
 	<audio src="music/陈一发儿 - 童话镇.mp3" preload="preload" controls="true"></audio>
 	<br>

 	<hr>
 	<marquee behavior="alternate" direction="down" width="300" height="100" bgcolor="red">
 		跑动
 	</marquee>

 	<hr>
 	表格<br>
 	<table border="1" width="200" height="100" cellspacing="3" cellpadding="10" bgcolor="pink" align="left">
 		<caption><h3>表格表头标签</h3></caption>
 		<tr >
 			<th>姓名</th>
 			<th>年龄</th>
 		</tr>
 		<tr>
 			<td align="center">Tom</td>
 			<td align="center">20</td>
 		</tr>
 		<tr align="center">
 			<td>Jerry</td>
 			<td>21</td>
 		</tr>
 	</table>

 	<table width="200" height="100" border="1" cellspacing="1" cellpadding="6">
 		<caption><h3>表格结构（不常用）</h3></caption>
 		<thead>
 			<tr>
 				<td>aa</td>
 				<td>ss</td>
 				<td>dd</td>
 			</tr>	
 		</thead>
 		<tbody>
 			<tr>
 				<td>aa</td>
 				<td>ss</td>
 				<td>dd</td>
 			</tr>
 			<tr>
 				<td>ss</td>
 				<td>aa</td>
 				<td>dd</td>
 			</tr>
 		</tbody>
 		<tfoot>
 			<tr>
 				<td>dd</td>
 				<td>ss</td>
 				<td>aa</td>
 			</tr>
 		</tfoot>
 	</table>
 	<br>
 	<table  width="200" height="120" border="1">
 		<caption><h3>表格单元格的合并</h3></caption>
 		<tr>
 			<td colspan="4"></td>
			<!-- <td></td>
			<td></td>
			<td></td> -->
		</tr>
		<tr>
			<td colspan="2"></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td rowspan="2"></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<!-- <td></td> -->
		</tr>
	</table>

	<hr>
	<fieldset>
		<legend>表单分组控件（fieldset和legend一起使用）</legend>

		表单<br>
		<form action="1.java" method="get">
			用户名：<input type="text" name="username" maxlength="8" value="leon"><br> <!--disabled="disabled"  readonly="readonly"-->
			密码：<input type="password" name="password"><br>

			单选按钮：<input type="radio" name="sex" value="1" checked="checked">男	<input type="radio" name="sex" value="0">女
			<br>

			下拉列表：
			出生地：省：
			<select name="" id=""><!-- multiple="multiple" 实现多选效果-->
				<option value="">北京</option>
				<option value="">辽宁</option>
				<option value="">山东</option>
				<option value="" selected="selected">成都</option>
			</select>
			市(区）：
			<select name="" id="">
				<optgroup label="北京市">
					<option value="">西城区</option>
					<option value="">海淀区</option>
					<option value="">东城区</option>
					<option value="">昌平区</option>
				</optgroup>
				<optgroup label="辽宁">
					<option value="">西城区</option>
					<option value="">海淀区</option>
					<option value="">东城区</option>
					<option value="">昌平区</option>
				</optgroup>
			</select>

			<br>
			兴趣爱好：
			<input type="checkbox" name="" checked="checked">吃饭
			<input type="checkbox" name="">睡觉
			<input type="checkbox" name="">打豆豆	

			<br>
			自我介绍（textarea标签要写在一行，不然会有好多迷之空格）：<br>
			<textarea></textarea>

			<br>
			头像：
			<input type="file" name="">

			<br>
			表单提交按钮
			<input type="submit" value="这是一个提交按钮">
			重置按钮
			<input type="reset" name="">

			<br><br>
			<input type="button" οnclick="" name="" value="这是一个普通按钮"><!-- 和js配合使用 -->
			<br>
			图片按钮(也用于表单提交）：<input type="image" name="" src="images/2.jpg" width="100" height="50">
		</form>

	</fieldset>
	
	<hr>
	<fieldset>
		<legend>补充几个控件</legend>
		<form action="2.java">
			判断输入的是否是网址：(为空不报错）<br>
			<input type="url" name=""><br>

			邮箱判断：(为空不报错）<br>
			<input type="email" name=""><br>

			日历：<br>
			<input type="date"><br>
			
			时间:<br>
			<input type="time"><br>

			只能输入数字的控件:<br>
			<input type="number" step="5"><br>

			可以拖动的控件：<br>
			<input type="range" max="100" step="5"><br>
			<input type="submit">
		</form>
	</fieldset>

</body>
</html>


Leon_Ang
关注
专栏目录
表单中的单选框、多选框中的name属性用途
wdhhxbb的博客
03-09 5429
在前端中，在编辑单选框以及多选框时候，一般属性有name和value，也可以将当前的多选框和单选框输入一个表示的值。比如： 1、单选框 bike walk 对于单选框，value和你的文本内容是相同的，那可不可以不写value呢，当服务端要读取你当前点击的单选框的时候，通过name属性获取的值其实是获取的value值，而你输入的文本内容，服务端是无法获取到的。同时，name属性的作用是将你
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 23万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
HTML基础入门（详细）
weixin_51143430的博客
08-28 3850
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_45383769的博客
04-07 1万+
HTML基础 - HTML表格 1.无表头的表格 <table> <tr> <td> <table>标签代表的是表 <tr>标签代表的是行 <td>标签代表的是列 在html页面中的表格来着，就和excl的表格不一样喽，咱自己有自己的规则： 这就是没有表头，也就是最简单的一个表格。（设置了边框为1 ：border= “1”） 2.有表头的表格 <th> <th>表示就是表头了哦，字体是加粗居中显示的
HTML基础知识（超详细！）
qq_60950941的博客
04-18 3272
本文全面介绍了html的标签以及新增的html5标签，可以帮助人们在最短的时间里打下基础
HTML基础
Hermione_m的博客
12-03 3425
html基础 一：基本格式 HTML的注释，注释中的内容会被浏览器所忽略，不会在网页中直接显示，但是可以在源码中查看注释，注释用来对代码进行解释说明的。开发中一定要养成良好的编写注释的习惯，注释要求简单明了 [文档：HTML.mindmap]https://note.youdao.com/ynoteshare/index.html?id=d30ed2bb7082b5267abd8fa1c4cb6afa&type=note&_time=1638518614003 关于标签的..
【HTML基础汇总】
CHJ_1993的博客
01-07 2125
HTML 前期整体脉络2017年1月7日 14:23:240.序HTML 前期整体脉络 序 前言 总览 HTML 基础 1 HTML简介 11 什么是标记语言 2 HTML 基础结构 3 标签 31 什么是标签 32 块元素标签 321 h1-h6 标题标签 323 p 标签 p内容p 323 ul 和 ol 33 内联元素标签 331 a 标签 34 内联
HTML基础教程
小白_努力
05-09 1万+
1.一般我都是在记事本中写HTML文件，也有很多人用DreamWeaver，这个随意~~ 2.HTML的一般结构如下： ----以开始，以结束，表示之间的文档是HTML ----HTML文档的头部，主要放文档的标题信息 未使用CSS的HTML文件 ----HTML的主体部分  未使用CSS的HTML文件 ----在网页中插入一条水平线 未使用CSS的HTML文件
【HTML】HTML基础知识扫盲
弟弟的博客
10-30 4663
body > < dl > < dt > 标题 </ dt > < dd > 第一点 </ dd > < dd > 第二点 </ dd > < dd > 第三点 </ dd > </ dl > </ body >< body > < dl > < dt > 标题 </ dt > < dd > 第一点 </ dd > < dd > 第二点 </ dd > < dd > 第三点 </ dd > </ dl > </ body >
HTML基础教程（非常详细）从零基础入门到精通，看完这一篇就够了。
wangluoanquan111的博客
09-05 1万+
HTML全称Hyper Text Markup Language, 翻译成中文就是超文本标记语言，是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言, 而是一种标记语言超文本可以理解为超越了文本的意思, 也就是超级文本, 超文本不只是普通的文本内容, 还可以加入图片,视频,声音等内容, 甚至可以从一个文件跳转到另一个文件(超级链接文本)标记语言可以理解为一套标记标签,也就是由许多标记标签组成的语言。
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 2512
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
HTML基础模板
qq_61690596的博客
07-18 2153
HTML基本模板，每个基础元素的内容和作用
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">
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 4883
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
HTML 基础标签——元数据标签 ＜meta＞
Allen-
11-01 476
标签通常位于文档的部分。它用于定义文档的元数据，包括字符编码、文档描述、关键字、作者信息等。这些信息可以帮助浏览器正确解析和显示文档，同时还可以提供搜索引擎索引所需的信息。
HTML前端页面设计静态网站-仿百度
2402_86955314的博客
11-02 476
浅浅分享一下前端作业，大佬轻喷~
HTML 块级元素和内联（行内）元素详解
最新发布
Allen-
11-03 141
块级元素是页面中的结构元素，它们独占一行，通常用于搭建页面的主要框架，如段落、容器、标题等。它们无论其内容多少，都会占据父元素的整个宽度。这种特性使得块级元素特别适合用于页面的整体布局和内容的分区组织。内联元素是页面中用于**修饰或嵌入小块内容的元素，它们不会独占一行，可以与其他内联元素或文本同行显示，因此也叫行内元素
HTML 标签属性——id、class、style 等全局属性详解
Allen-
11-02 330
HTML全局属性是一组可以应用于几乎所有HTML元素的特殊属性。这些属性提供了额外的功能和信息，使得网页开发者能够更好地控制元素的行为、样式和可访问性。
HTML基础知识速览：文档结构与常用标签
"该文档是关于HTML基础知识点的总结，主要涵盖了HTML文档的基本结构、标题标签、文字属性、特殊符号、行控制、图片插入以及文字布局等方面的内容。适合初学者学习和参考。" HTML（HyperText Markup Language）是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值