web前端学习笔记-day02 html基础标签

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

web前端学习笔记总页面

网页基础布局

html

html基础结构

html基础标签

htm标签属性

html文本格式化标签

html实体转义符+html块级标签和行级标签

W3C规范+html语义化标签+文件命名规范

1.创建html页面

1.1输入html:5然后按Tab自动生成代码

（一般新建页面会自己有html基础结构代码 不需要这样创建)

html:5
<!-- 按！+Tab 或者html:5+Tab会自动生成文档结构 -->
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<!-- 移动端开发设置 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- 默认打开是edge浏览器 -->
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>

2.<div>和<hx>标签

在boby中写入

<!-- 按！+Tab 或者html:5+Tab会自动生成文档结构 -->
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<!-- 移动端开发设置 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- 默认打开是edge浏览器 -->
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<!-- 1.div :布局 没有具体含义 层 -->
		<div>
			adc
			<div>de</div>
		</div>
		<!-- 2.hx:标题，x从1-6 ，h1级最大最粗，h6最小，有默认字号 -->
		<h1>biu</h1>
		<h3>biu</h3>
		<h5>biu</h5>
		<h6>biu</h6>

运行结果

3.<p>和<br/>标签

<p>只是段落标签

<!--3. p:表示段落，相当于一个回车 -->
		<p>华为技术有限公司，成立于1987年，总部位于广东省深圳市龙岗区。 [1]  华为是全球领先的信息与通信技术（ICT）解决方案供应商，
		专注于ICT领域，坚持稳健经营、持续创新、开放合作，在电信运营商、企业、终端和云计算等领域构筑了端到端的解决方案优势，为运营商客户、
		企业客户和消费者提供有竞争力的ICT解决方案、产品和服务，并致力于实现未来信息社会、构建更美好的全联接世界。
		2013年，华为首超全球第一大电信设备商爱立信，排名《财富》世界500强第315位。
		华为的产品和解决方案已经应用于全球170多个国家，服务全球运营商50强中的45家及全球1/3的人口。</p>
		
		<p>华为技术有限公司，成立于1987年，总部位于广东省深圳市龙岗区。 [1]  华为是全球领先的信息与通信技术（ICT）解决方案供应商，</p>
		专注于ICT领域，坚持稳健经营、持续创新、开放合作，在电信运营商、企业、终端和云计算等领域构筑了端到端的解决方案优势，为运营商客户、</p>
		企业客户和消费者提供有竞争力的ICT解决方案、产品和服务，并致力于实现未来信息社会、构建更美好的全联接世界。
		2013年，华为首超全球第一大电信设备商爱立信，排名《财富》世界500强第315位。
		华为的产品和解决方案已经应用于全球170多个国家，服务全球运营商50强中的45家及全球1/3的人口。</p>
		
		
		<!-- 4.br 换行 单标签<br/>-->
		<p>华为技术有限公司，成立于1987年，总部位于广东省深圳市龙岗区。 [1]  华为是全球领先的信息与通信技术（ICT）解决方案供应商，<br/>
		专注于ICT领域，坚持稳健经营、持续创新、开放合作，在电信运营商、企业、终端和云计算等领域构筑了端到端的解决方案优势，为运营商客户、<br/>
		企业客户和消费者提供有竞争力的ICT解决方案、产品和服务，并致力于实现未来信息社会、构建更美好的全联接世界。<br/>
		2013年，华为首超全球第一大电信设备商爱立信，排名《财富》世界500强第315位。<br/>
		华为的产品和解决方案已经应用于全球170多个国家，服务全球运营商50强中的45家及全球1/3的人口。</p>

<p>标签的运行结果

<br/>标签的运行结果

 4.</hr>

<!-- 5.hr:水平线  单标签<hr>-->
		<hr/>
		<!-- width:长度 align：位置 color：颜色 size：粗细 -->
		<hr width="80%"  align="center" color="red" size="4" />

运行结果

 5.<a>标签

<!-- 6.a:超连接 -->
		<a href="01base.html">基础页面</a>
		<a href="https://www.baidu.com">百度</a> <!-- 网页自身跳转到百度 -->
	
		<!--target: _blank 另外打开页面进行跳转，原来的页面还在 ，_self 自身跳转  
		target可以在head中设置  <base target="_blank" />
		title：鼠标移到连接文本会有提示 -->		
		<a href="https://www.baidu.com" target="_blank" title="百度"> 百度</a><!-- 开启另外一个页面跳转到百度 -->

运行结果

点基础页面会跳入上一节写的基础结构页面 可以连接本地的资源

在没有设置target时会自身跳转到百度

设置 

<a href="https://www.baidu.com" target="_blank" title="百度"> 百度</a><!-- 开启另外一个页面跳转到百度 -->

 会另外开启一个页面进行跳转

6.<img>标签

<!-- 7.img：用来加载外部图片，图像。 src：加载图片的路径  alt:当图片加载不出来时显示，否则不会显示 title：鼠标移到图片上会提示-->
		<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21042G4331941H-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642646028&t=b41f3695366576ae04407fca7644dc8e" title="向日葵" alt="呜呜呜~加载不出来">
		<img src="https://pics1.baidu.com/feed/d6ca7bcb0a46f21f98c3260bc19cf1690d33ae30.jpeg?token=a495910d20353cc4ff551c757dbee70f" alt="呜呜呜~加载不出来" >

运行结果

 7.<span>标签

		<!-- 8.span:布局 分割一行 -->
		<div>
			<span>首页</span> <span>购物车</span> <span>推荐</span>
		</div>
		<div>
			<div>首页</div>
			<div>购物车</div>
			<div>推荐</div>
		</div>

运行结果   span可以将一行分割开 

 8.<ul>和<ol>标签

输入ul>li{li$}*3 然后按住tab

<!-- 9.ul/ol  ul:有序列表 ol：无序列表，列表内容都用li标签表示-->
		 ul>li{li$}*3 
	
		 ol>li{li$}*3

会自动生成

        <ul>
		 	<li>li1</li>
		 	<li>li2</li>
		 	<li>li3</li>
		 </ul>
		<ol>
			<li>li1</li>
			<li>li2</li>
			<li>li3</li>
		</ol>
	
		<!-- 9.ul/ol  ul:有序列表 ol：无序列表，列表内容都用li标签表示-->
		<!-- ul>li{li$}*3 -->
		<!-- <ul>
		 	<li>li1</li>
		 	<li>li2</li>
		 	<li>li3</li>
		 </ul> -->
		<!-- ol>li{li$}*3 -->
		<!-- <ol>
			<li>li1</li>
			<li>li2</li>
			<li>li3</li>
		</ol> 	 -->
		<ol>
			<li>li1</li>
			<li>li2</li>
			<li>li3</li>
		</ol>
		<ul>
		 	<li>li1</li>
		 	<li>li2</li>
		 	<li>li3</li>
		 </ul>

运行结果

完整的练习代码

<!-- 按！+Tab 或者html:5+Tab会自动生成文档结构 -->
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<!-- 移动端开发设置 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- 默认打开是edge浏览器 -->
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<!-- 1.div :布局 没有具体含义 层 -->
		<div>
			adc
			<div>de</div>
		</div>
		<!-- 2.hx:标题，x从1-6 ，h1级最大最粗，h6最小，有默认字号 -->
		<h1>biu</h1>
		<h3>biu</h3>
		<h5>biu</h5>
		<h6>biu</h6>
		<!--3. p:表示段落，相当于一个回车 -->
		<p>华为技术有限公司，成立于1987年，总部位于广东省深圳市龙岗区。 [1]  华为是全球领先的信息与通信技术（ICT）解决方案供应商，
		专注于ICT领域，坚持稳健经营、持续创新、开放合作，在电信运营商、企业、终端和云计算等领域构筑了端到端的解决方案优势，为运营商客户、
		企业客户和消费者提供有竞争力的ICT解决方案、产品和服务，并致力于实现未来信息社会、构建更美好的全联接世界。
		2013年，华为首超全球第一大电信设备商爱立信，排名《财富》世界500强第315位。
		华为的产品和解决方案已经应用于全球170多个国家，服务全球运营商50强中的45家及全球1/3的人口。</p>
		
		<p>华为技术有限公司，成立于1987年，总部位于广东省深圳市龙岗区。 [1]  华为是全球领先的信息与通信技术（ICT）解决方案供应商，</p>
		专注于ICT领域，坚持稳健经营、持续创新、开放合作，在电信运营商、企业、终端和云计算等领域构筑了端到端的解决方案优势，为运营商客户、</p>
		企业客户和消费者提供有竞争力的ICT解决方案、产品和服务，并致力于实现未来信息社会、构建更美好的全联接世界。
		2013年，华为首超全球第一大电信设备商爱立信，排名《财富》世界500强第315位。
		华为的产品和解决方案已经应用于全球170多个国家，服务全球运营商50强中的45家及全球1/3的人口。</p>
		
		
		<!-- 4.br 换行 单标签<br/>-->
		<p>华为技术有限公司，成立于1987年，总部位于广东省深圳市龙岗区。 [1]  华为是全球领先的信息与通信技术（ICT）解决方案供应商，<br/>
		专注于ICT领域，坚持稳健经营、持续创新、开放合作，在电信运营商、企业、终端和云计算等领域构筑了端到端的解决方案优势，为运营商客户、<br/>
		企业客户和消费者提供有竞争力的ICT解决方案、产品和服务，并致力于实现未来信息社会、构建更美好的全联接世界。<br/>
		2013年，华为首超全球第一大电信设备商爱立信，排名《财富》世界500强第315位。<br/>
		华为的产品和解决方案已经应用于全球170多个国家，服务全球运营商50强中的45家及全球1/3的人口。</p>
		<!-- 5.hr:水平线  单标签<hr>-->
		<hr/>
		<!-- width:长度 align：位置 color：颜色 size：粗细 -->
		<hr width="80%"  align="center" color="red" size="4" />
		<!-- 6.a:超连接 -->
		<a href="01base.html">基础页面</a>
		<a href="https://www.baidu.com">百度</a> <!-- 网页自身跳转到百度 -->
	
		<!--target: _blank 另外打开页面进行跳转，原来的页面还在 ，_self 自身跳转  
		target可以在head中设置  <base target="_blank" />
		title：鼠标移到连接文本会有提示 -->		
		<a href="https://www.baidu.com" target="_blank" title="百度"> 百度</a><!-- 开启另外一个页面跳转到百度 -->
		
		<!-- 7.img：用来加载外部图片，图像。 src：加载图片的路径  alt:当图片加载不出来时显示，否则不会显示 title：鼠标移到图片上会提示-->
		<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21042G4331941H-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642646028&t=b41f3695366576ae04407fca7644dc8e" title="向日葵" alt="呜呜呜~加载不出来">
		<img src="https://pics1.baidu.com/feed/d6ca7bcb0a46f21f98c3260bc19cf1690d33ae30.jpeg?token=a495910d20353cc4ff551c757dbee70f" alt="呜呜呜~加载不出来" >

		<!-- 8.span:布局 分割一行 -->
		<div>
			<span>首页</span> <span>购物车</span> <span>推荐</span>
		</div>
		<div>
			<div>首页</div>
			<div>购物车</div>
			<div>推荐</div>
		</div>
		<!-- 9.ul/ol  ul:有序列表 ol：无序列表，列表内容都用li标签表示-->
		<!-- ul>li{li$}*3 -->
		<!-- <ul>
		 	<li>li1</li>
		 	<li>li2</li>
		 	<li>li3</li>
		 </ul> -->
		<!-- ol>li{li$}*3 -->
		<!-- <ol>
			<li>li1</li>
			<li>li2</li>
			<li>li3</li>
		</ol> 	 -->
		<ol>
			<li>li1</li>
			<li>li2</li>
			<li>li3</li>
		</ol>
		<ul>
		 	<li>li1</li>
		 	<li>li2</li>
		 	<li>li3</li>
		 </ul>
</body>
</html>

秃头女孩永不认输
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端开发学习笔记 - Day02
weixin_45571829的博客
06-19 386
Day02学习笔记 1. 列表 1.1 无序列表 <ul>：定义无序列表，并且只能包含<li>元素。 <li>：定义列表项，可以包含与<div>完全类似的内容，也可以包含较多类型的子元素。 有效记忆法：ul是unordered lists的缩写（无序列表） li是list item的缩写（列表项目） <ul> <li>无序列表项</li> <li>无序列表项</li> <li&
Web前端开发学习笔记 - Day01
weixin_45571829的博客
06-17 1040
Day01学习笔记 1. 认识网页 网页是如何形成的？ 网页学名为HTML文件，主要由文字、图像和超链接构成，还可以包含音频、视频以及动画等。 所见的网页由：前端代码 → 浏览器内核渲染 → 用户页面 2. 常用浏览器内核 浏览器是网页显示、运行的平台，常用的五大浏览器：IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera。 Windows 10的浏览器有两款，除了IE还有一个Microsoft Edge。 2.1 浏览器内核 英文名：Rendering Engine 浏览
web前端学习笔记-day08 css概念基础认识
starbiu的博客
01-05 361
web前端学习笔记总页面 网页基础布局 html html基础结构 html基础标签 htm标签属性 html文本格式化标签 html实体转义符+html块级标签和行级标签 W3C规范+html语义化标签+文件命名规范 1.认识css W3C推出了css，把结构和样式分离，html只负责结构，样式交给css来实现 1.基本语法 css语法有三个部分组成：选择器,属性，属性值 selector{property：value} 2.css的引用方式 1）行嵌样式 <p s
Web前端学习笔记--day1
qq_44515207的博客
02-03 203
Web前端学习笔记–初始 1.开发工具：visual studio code 2.安装插件：live server 二、html基础 1.新建一个html文件：快捷键!+Tab键生成模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
前端学习笔记-Day02
qq_41905795的博客
03-05 173
HTML常见的基础元素使用 1 一个完整的HTML结构 1.1 文档声明 让浏览器用HTML5的标准去解析识别HTML文档 放在前面，不能省略 <!DOCTYPE html> 1.2 html元素 是HTML文档的根元素、一个文档只能有一个 浏览器会检测lang属性，如语言不一致，会弹出是否启用翻译的功能 <html lang=“zh”> 1.3 head元素 里面的内容是一些“元数据”（描述数据的数据） title元素 设置网页的标题 meta元素 设置网页的字符
学习笔记--Web基础HTML--day01
zhu_haibo的博客
11-04 160
Web：HTML & CSS & JavaScript 1.web 1.什么是web web就是网页，是一种基于B/S的应用程序 B：Browser 浏览器 S：Server 服务器 -------------------- C/S： C：Client 客户端 S：Server 服务器 2.Web组成 浏览器：代替用户向服务器发送请求 服务器：接收用户请求并相应 通信协议：规范数据在网络中是如何打包及传递的 http：HyperText Transfer Protoc
Web前端开发学习笔记 - Day03
weixin_45571829的博客
06-19 222
Day03学习笔记 1. CSS引入方式 1.1 行内样式 <!DOCTYPE html> <html lang="en"> <head> <title>This is title</title> </head> <body> <p style="font-size: 16px; color: red;">大家好</p> </bod
Web前端开发-html5基础-Day02
qq_48109675的博客
07-20 163
适合小白的基础教程-html02，要一步一步的学习呀，不要急于求成。
web前端学习笔记-day06 W3C规范+html语义化标签+文件命名规范
starbiu的博客
12-21 443
web前端学习笔记总页面 网页基础布局 html html基础结构 html基础标签 htm标签属性 html文本格式化标签 html实体转义符+html块级标签和行级标签 1.什么是W3C 万维网联网（World Wide Web） 是一个国际性的中立组织，专门负责统一web相关的各项标准 W3C标准由：结构表现，行为三部分组成 2.标记嵌套规则 2.1块级元素可以包含内联元素或者某些块元素，但内联元素却不能包含元素，它只能包含其他的内联元素。 <div><
FE21-JS-DAY02-Vendula-Bettina
03-04
【描述】"FE21-JS-DAY02-Vendula-Bettina"的描述为空，但我们可以推测这是针对前端开发者（FE）的2021年课程系列的一部分，特别是针对JavaScript语言的第二天教学内容。可能涉及了前一天的基础知识回顾，并深入介绍...
Day04_HTML&CSS课堂笔记.md
08-04
零基础开始学习web，HTML和CSS
Vue基础day1学习资料.zip
03-31
"4-笔记"文件夹则可能包含了关于Vue基础知识的学习笔记，涵盖了Vue的生命周期、指令系统（如v-if/v-for/v-bind等）、计算属性和侦听器等核心概念。笔记中可能还会涉及组件化开发，如如何定义、注册和使用组件，以及...
Vue基础day4学习资料.zip
03-31
在"Vue基础day4学习资料.zip"中，我们可以找到一系列资源来深入理解和掌握Vue的基础知识，特别是Vue全家桶（包括Vuex状态管理、Vue Router路由管理等）的基础内容。 首先，"day04_Vue01-基础语法3.ppt"很可能包含了...
SpringBoot-jt-day01
05-28
在本课程"SpringBoot-jt-day01"中，我们将深入学习Spring Boot的基础知识和核心概念，这是一门针对初学者和进阶开发者的重要课程。Spring Boot是Java生态系统中的一个热门框架，它简化了创建独立的、生产级别的基于...
表单验证的艺术：WebKit 支持 HTML 表单的全面解析
2401_85339615的博客
07-07 585
WebKit 对 HTML 表单的支持和验证功能是构建交互式 Web 应用的基础。通过本文的详细解析，你现在应该对如何在 WebKit 驱动的浏览器中创建和验证表单有了深入的理解。掌握 WebKit 的表单验证技术，将使你能够创建既用户友好又安全的应用。随着 Web 技术的不断发展，WebKit 也在不断进化，未来将提供更多创新的表单功能和验证机制。继续关注 WebKit 的最新进展，将使你在构建现代网页应用时更加得心应手。
HTML 标签列表（功能排序）
07-07 223
HTML（超文本标记语言）是构建网页的标准语言，它定义了网页的结构和内容。HTML包含众多标签，每个标签都有其特定的功能和用途。本文将按照功能对HTML标签进行分类和排序，以帮助您更好地理解和使用这些标签。
【WEB前端】---HTML---结构---笔记
m0_63241410的博客
07-04 840
名词1名词解释
JavaWeb-【1】HTML
最新发布
m0_74044018的博客
07-07 458
前端全系列超详细笔记！！ 持续更新到全部完结
前端学习笔记(B站黑马程序员)
11-17
前端学习笔记(B站黑马程序员) 我是根据黑马程序员的教程来学习前端开发的，并进行了详细的笔记记录。在学习过程中，我接触到了许多前后端的知识，其中包括了 HTML 的介绍，常用浏览器，以及 Web 标准等内容。 首先...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值