HTML8小时速成笔记（五）——Html语义标签

最新推荐文章于 2024-05-21 18:20:21 发布
最新推荐文章于 2024-05-21 18:20:21 发布
阅读量182 收藏 1
点赞数
分类专栏： 网站开发 文章标签： html 笔记 自学 速成
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dream__Catcher/article/details/84252122
版权

课前：参考html思维导图
一、h与p标签
二、img标签
1、

<img src="juhua.jpg" alt="菊花图" title="鼠标放上去就显示">
<img src="../logo.png" alt="菊花图" title="鼠标放上去就显示">
<img src="http://xxxxxxxxxx.img" alt="">

延伸：那些是单闭合，双闭合标签
2、图片是替换元素
它是内联替换元素，是能设置宽高的

三、有序列表和无序列表

<style>
	ul li{
		list-style-type: square;

	}
	ol li{
		list-style-type: upper-roman;
	}
</style>
<body>
	<ul>
		<li>无序</li>
		<li>无序</li>
		<li>无序</li>
		<li>无序</li>
	</ul>

	<ol>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ol>
</body>

四、整齐的表格

<style>
	td{
		border: 1px solid blue;
	}
	table{
		/*border-collapse: separate;
		border-spacing: 20px;*/
		border-collapse: collapse;
	}
</style>
<body>
	<table>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>2</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>3</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>4</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>

	</table>
</body>

课程表

<style>
	td{
		border: 2px solid black;
	}
	table{
		/*border-collapse: separate;
		border-spacing: 20px;*/
		border-collapse: collapse;
	}
</style>
<body>
	<table>
		<tr>
			<td>时间日期</td>
			<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>
		<tr>
			<td colspan="6"></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>
	</table>
</body>

五、超链接

<a href="index.html">index</a>
<a href="http://www.baidu.com" target="blank">百度</a>
<a href="http://www.baidu.com" title="鼠标放上来">百度</a>

六、锚点

<body>
	<a href="maodian.html#p1">p1</a>
	<a href="maodian.html#p2">p2</a>
	<a href="maodian.html#p3">p3</a>
	<a name="p1"></a>
	<p>p1	</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<a name="p2"></a>
	<p>p2</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<a name="p3"></a>
	<p>p3</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />

</body>

六、伪类
css允许我们针对a标签的4中状态设置各自的css特性，叫做css伪类
1、active一般不必写
2、一定要注意顺序是LVHA
3、a:link可以简写为a

<style>
	a{
		color: green;
	}
	a:visited{
		color: pink
	}
	a:hover{
		color:yellow;
	}
	a:active{
		color: black;
	}
</style>
<body>
	<a href="#">空连接</a>
	<a href="#">空连接</a>
	<a href="#">空连接</a>
	<a href="#">空连接</a>
</body>

七、字符实体
在html开发中，有一些字符，不适于直接写出，如>&lt
一般格式：&+实体名+;
查手册

Dream__Catcher
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css_html_javascript速成笔记
11-07
css、html、javascript免费课程，希望对前端初学者有利！
html5七天速成手册
12-21
html5七天速成手册
计算机网络期末速成笔记
m0_69112934的博客
05-27 744
目录一、计算机网络概述（一）计算机网络的概念（二）计算机网络体系结构二、物理层（一）物理层的基本概念（二）物理层的基本通信技术三、数据链路层（一）数据链路层的基础概念（二）数据链路层的通信协议四、网络层（一）网络层的应用（二）网际层的协议IP（三）IP地址（四）网络层的路由五、传输层（一）传输层的概念（二）传输层的两个重要协议六、应用层（一）应用层的作用（二）应用层中常见的协议七、网络安全（一）网络安全概论（二）加密和交互（三）公钥和私钥（四）防火墙。
XML网课笔记1——认识XML、使用DTD
等等waiting
05-05 144
XML 1.1 xml简介 （1）xml，eXtensible Markup Language，可扩展标记语言 （2）xml是一种非常灵活的语言，没有固定的标签，所有的标签都可以自定义 （3）通常，xml被用于信息的记录和传递。因此，xml经常被用于充当配置文件。（比Oracle数据库方便，用记事本就可以打开） 1.2 有效的xml文档 1、标题格式良好的xml （1）声明信息，用于描述xml的...
【学习记录-持续更新】HTML+CSS+JS
Uyoin的博客
02-08 482
目录学习前言一、HTML1.HTML基础知识学习2.HTML 编写规则 和语义化写法二、CSS三、JS 学习前言 学习路线参考B站UP技术胖——技术胖的学习路线 学习目的：学习前端基础知识，以此在老师课题组帮忙 学习时段：22年寒假 一、HTML 1.HTML基础知识学习 已学 【B站学习视频】HTML全套基础教程 【笔记】HTML全套基础教程 2.HTML 编写规则 和语义化写法 已学 【B站学习视频】HTML 速成 二、CSS 三、JS ...
左耳听风——笔记二：程序员练级攻略
热门推荐
页页的博客
10-26 4万+
左耳听风——笔记二：程序员练级攻略
这一年，这些书：2022年读书笔记
Heartsuit的博客
12-31 2万+
Note: 以下 `markdown` 格式文本由 `json2md` 自动转换生成，可参考[JSON转Markdown：我把阅读数据从MongoDB中导出转换为.md了](https://blog.csdn.net/u013810234/article/details/113360229)了解具体的转换过程。2022年读书笔记
《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.
qq_37555524的博客
09-17 107
笔记说明 《CSS3实战手册第3版(影印版)》可以消除Web设计工作的痛苦，并且带给你：HTML——重新入门。如果你是HTML新手，你会学到如何以CSS友好的方式进行基本页面构造。若你是HTML高手，...
ZeroMQ学习笔记(7)——使用zmq高级框架
lcynone的博客
07-23 2336
第七章 使用zmq高级框架 ·如何安全地从创意过渡到能工作的原型（MOPED模式） ·将的数据作为zmq消息序列化的不同方式 ·如何用代码生成二进制序列化的编解码器 ·如何使用GSL工具来建立自定义的代码生成器 ·如何撰写和许可一个协议规范 ·如何在zmq上进行可快速重新启动的文件传输 ·如何实现基于信用的流量控制 ·如何将协议的服务器和客户端构建为状态机 ·如何制作一个在zmq之上的安全协议 ·一个大型的文件发布系统（FileMQ） MOPED的目标是定义一个过程，通过它可以取得针对一个新的分布式应用程序
【编译原理】学习笔记
Lenhart001的博客
09-06 112
摆烂
【速成之路】网页编程必会的Ajax——Ajax工作流程（二
2401_84435866的博客
05-01 411
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
HTML5零基础速成入门.rar
08-05
自己学习HTML5时整理的笔记。适合萌新们学习学习。
R速成笔记_部分2_r_速成笔记_
09-29
本人通过自学R语言，并进行了简单整理，希望对小白有一定的帮助。文章共有5部分，合计49页。第二部分
计算方法速成笔记.docx
12-25
计算方法速成笔记
破解ReadOnly: 如何在HTML中灵活处理不可编辑字段
m0_57021623的博客
05-16 658
对于服务器端处理关键字段，如价格或折扣率，最佳实践是在服务器端重新计算这些值或从可信源（例如数据库）验证这些值，以确保数据的完整性和正确性。是HTML中用于表单输入字段的一个属性，它的目的是阻止用户修改输入字段的值，但允许用户提交表单时包含这些值。方法来修改页面元素的属性，提供了更多的灵活性和控制能力，特别是在处理那些通过HTML属性强制施加的限制时。，通常有其背后的理由，比如保护数据的完整性。对于一些关键字段，如价格、折扣率等，服务器端可以在每次处理前都重新计算或验证这些数据，而不是依赖前端提交的值。
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 328
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
博客
05-17 129
HTML,CSS,JavaScript,DOM的理解
python+pytest+pytest-html+allure集成测试案例
最新发布
codelearning的专栏
05-21 231
为pytest-html的参数，运行测试后，会在当前路径下生成report.html的报告，同时html集成了CSS样式内容。下面是python+pytest+pytest-html+allure四个组件同时集成使用的简单案例。src/main.py文件内容如下，实现一个接口，通过requests的get方法请求测试站点的资源。为allure-pytest的参数，指定allure结果文件的路径。由于测试站点在国外，测试时偶尔会出现网络问题，可以多运行几次测试。文件，指示当前文件夹为一个包。
python速成笔记
08-25
Python速成笔记可以包括以下内容： 1. 字符串操作：可以使用replace方法将一个字符串中的某个子串替换为另一个子串。例如，可以使用str.replace(s1, s2)将字符串str中的s1替换为s2，而不改变原始字符串。此外，可以...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值