html基础

最新推荐文章于 2024-04-29 11:06:38 发布
最新推荐文章于 2024-04-29 11:06:38 发布
阅读量367 收藏 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
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML基础知识
12-20
HTML前端网页设计的一些小知识，非常适合初学者学习，
HTML基础知识点
qq_40046544的博客
07-27 8150
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
HTML基础标签
weixin_45348240的博客
03-23 6028
一、HTML介绍 1、什么是HTML? HTML是一门语言，所有的网页都是用HTML这门语言编写出来的。HTML(HyperText Markup Language):超文本标记语言。 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。 标记语言：由标签构成的语言 HTML运行在浏览器上，HTML标签由浏览器来解析 HTML标签都是预定义好的。例如:使用< img>展示图片 2、W3C标准:网页主要由三部分组成 结构:HTML 表现:css 行为:
HTML基础
KING_QueeN1的博客
11-02 9701
——————留存自用——————
全网最全HTML基础
a1085653724的博客
04-20 4831
1.HTML结构 认识 HTML 标签 ，HTML 代码是由 "标签" 构成的。 形如: <body>hello</body> (1).标签名(body)放到<>中. (2).大部分标签成对出现,<body>为开始标签,</body>为结束标签. (3).少数标签只有开始标签, 称为 "单标签". (4).开始标签和结束标签之间, 写的是标签的内容.(hello everyone) (5).开始标签中可能会带有 "属性". id
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写一个旋转菜单
liulang68的博客
04-24 907
【代码】用html写一个旋转菜单。
Web前端开发之HTML_3
zx1026409886的博客
04-23 997
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
基于java,SpringBoot和HTML实验室预约管理系统设计
程序猿大波的博客
04-23 621
本研究旨在设计并实现一个基于Java, Spring Boot和HTML的实验室预约管理系统，以解决实验室资源分配不均、管理混乱和预约流程繁琐等问题。系统采用B/S架构设计，后端使用Spring Boot框架进行开发，前端使用HTML进行页面设计，实现了用户登录、实验室预约、查看预约状态以及管理员对实验室的管理等功能。首先，系统通过Spring Boot实现了快速开发和部署，简化了项目的配置和管理。
用html画一个四叶草
liulang68的博客
04-20 1603
以上是部分代码，需要请看主页加联系方式。
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1075
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
html笔记 ai问答
qq_50437196的博客
04-23 580
在HTML中，`text-align: center` 属性是用来设置内联内容（比如文本或链接）在其块级容器（比如`<div>`, `<p>`, 或 `<h1>` 等）内部水平居中的。- `$("p span")`会选择所有位于`p`元素内的`span`元素，无论`span`元素嵌套在`p`元素内部的深度如何。在这个例子中，尽管 `text-align: center` 是应用在 `<h1>` 上的，但 `<span>` 作为内联元素会继承这个对齐方式，从而使得其中的文本居中。
python爬虫 - 爬取html中的script数据（36kr.com新闻信息）
BullKing8185的博客
04-23 500
python爬虫 - 爬取html中的script数据（36kr.com新闻信息） 1. 分析页面内容数据格式 2. 使用re.findall方法，爬取新闻 3. 使用re.search 方法，爬取新闻
html如何实现按钮跳转，以及访问随机跳转
最新发布
weixin_42759398的博客
04-29 195
html如何实现按钮跳转，以及访问随机跳转。需求看似很冷门，实际上这个对应我上一篇文章。
前端入门：HTML（列表和边框案例）
yscy0801的博客
04-22 516
新手前端适合买什么笔记本？28岁转前端来得及吗？前端面试如何谈高薪？大厂前端招聘中的内幕在线解答问题
vue页面中怎么显示多个空格-从普通空格到非断行空格与v-html的使用
qq_42816270的博客
04-27 479
v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。在单文件组件，scoped 样式将不会作用于 v-html 里的内容，因为 HTML 内容不会被 Vue 的模板编译器解析。在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值。产生的原因是因为在浏览器进行解析的时候， 会将多个空格合并成分成一个空格。可能跟使用vue2有关吧，上述的演示的代码使用的是vue3。
html--鼠标跟随特效
stqer的博客
04-26 828
【代码】html--鼠标跟随特效。
html基础手册下载
12-31
你可以在网上找到很多关于HTML基础手册的下载资源。可以在搜索引擎上输入关键词“HTML基础手册下载”，然后浏览搜索结果找到适合自己的下载链接。同时，你也可以在一些知名的学术网站或者技术论坛上寻找HTML基础手册的下载资源，通常这些网站提供的资源更加权威和可靠。 另外，一些在线教育平台也会提供HTML基础手册的下载服务，如果你愿意在线学习，可以考虑在这些平台上搜索相关资源。此外，你还可以直接访问一些技术社区或者开发者论坛，这些地方通常都会有人分享HTML基础手册的下载链接。 当然，如果你更喜欢实体书籍，可以考虑购买一本关于HTML基础的书籍，这样不仅可以得到手册的内容，还可以拥有实体书的收藏价值。总的来说，无论是在线资源还是实体书籍，都有很多途径可以获取到HTML基础手册的下载或购买信息，希望你能找到适合自己的方式获取这份资料，加油！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值