html相关基础知识

最新推荐文章于 2023-03-14 09:00:00 发布

azured_xu

最新推荐文章于 2023-03-14 09:00:00 发布

阅读量217

点赞数

分类专栏： python学习之路文章标签： python

本文链接：https://blog.csdn.net/Xu_Mingyong/article/details/119577121

版权

python学习之路专栏收录该内容

90 篇文章 6 订阅

订阅专栏

<!-- 
  1.网页的技术结构：HTML,CSS,JS(Javascript)
  HTML    -     提供网页内容(通过不同的标签提供不同的内容)
  CSS     -     负责网页内容的样式布局
  JS(行为标准)  -  负责控制网页内容变化
  
  
  2.HTML  -  超文本标记语法
  一个网页就是一个HTML,HTML代码一般写在可以被浏览器直接解析的HTML文件中
  1)HTML基本结构：一个HTML标签里面包含一个head标签和一个body标签
  HTML标签   -   代表整个网页
  head标签   -   网页顶部负责显示网页图标和标题的部分(还负责不可见的设置性的内容)
  body标签   -   负责网页内容的显示
  
  2)标签语法：HTML是通过不同的标签来提供不同的内容,标签从结构上分为两种
  a.双标签:<标签名 属性名1="属性值1" 属性名2="属性值2"...>标签内容</标签名>
  b.单标签:<标签名 属性名1="属性值1" 属性名2="属性值2"...>,<标签名 属性名1="属性值1" 属性名2="属性值2".../>
  
  说明：
  a.标签名和<以及>之间不能有空隙
  b.属性值不管是什么类型的数据都必须使用双引号包起来
  c.双标签的标签内容可以是任何内容：包括纯文字,也可以是一个或者多个标签或者是文字和标签的混合
  d.标签名不是程序员自己创建的，而是HTML提供的
  
 -->

<!-- HTML版本说明 HTML表示的就是HTML5-->
<!DOCTYPE html>


<!-- 网页基本结构 -->
<html>
	<head>
		<!-- 设置网页编码方式 -->
		<meta charset="utf-8" />
		<!-- 设置网页标题 -->
		<title>hello world</title>
		<!-- 设置网页图标 -->
		<!-- rel设置icon指明当前用作图标,type中的ico是图片的格式,href下面是图片路径 -->
		<link rel="icon" type="image/ico" href="img/jd_logo.ico"/>
		
		<!-- <link rel="stylesheet" type="text/css" href=""/> -->
		<link rel="stylesheet" type="text/css"  href="css/test.css"/>
		<!-- <style type="text/css" </style> -->
		<!-- <script type="text/javascript"></script> -->
	</head>
	
	<!-- body中放网页的内容 -->
	<body>
		<!-- 标题标签  h1~h6 -->
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
		
		<!-- 段落标签 p -->
		<p>这是一个段落</p>
		
		<!-- 普通的文本标签(行内文本标签) font,span,label -->
		<span>发布时间：08-10</span>
		<span>06:25</span>
		<span>娱乐领域创作者</span>
		
		<!-- 文字效果相关标签和符号 
		加粗：b,strong
		倾斜：i,em
		换行：br
		空格：&nbsp;&emsp;(不是标签是符号)
		
		-->
		
		<p>有一<b>点</b>动心<strong>暗<i>恋</i>的我们</strong>来<br>都来了</p>
		
		<!-- 图片标签  img 
		1)src：设置图片地址 - 属性可以是本地图片也可以是网络图片
		2)title属性:设置图片标题,鼠标停留在图片上时会显示
		-->
		
		<!-- 显示本地图片 -->
		<img src="img/bb.jpg" title="风景">
		<img title="宝儿姐" src="https://img2.baidu.com/it/u=1810171082,1266198879&fm=26&fmt=auto&gp=0.jpg" >
		
		
		<!-- 超链接：a -->
		<!-- 文字超链接 -->
		 
		<br><a href="https:www.baidu.com">百度</a><br>
		
		<!-- 图片超链接 -->
		<a href="https:www.jd.com">
			<img src="img/jd_logo.ico">
		</a>
		
		<!-- 区域超链接 -->
		<a href="https:www.jd.com">
			<div id="">
				<img src="img/baidu.ico" alt="">
				<p><strong><em>一段文字</em></strong></p>
			</div>
		</a>
		
		<!-- 无序列表   ul-li   -->
        <ul>
			<li>python</li>
			<li>java</li>
			<li>h5</li>
		</ul>
		
		<!-- 有序列表  ol-li   -->
		<ol>
			<li>
				python
			</li>
			<li>
				java
			</li>
			
		</ol>
		
		
		<!-- 普通输入框 
		1) value属性  -  输入框中的内容
		
		-->
		<input type="" name="" id="" value="" placeholder="请输入姓名"/>
		<input type="password" name="" id="" value-=""/>
		<!--自带清除按钮 -->
		<input type="search" value="" placeholder="搜索电影"/>

		<br><br>
		<!-- 2。单选按钮-->
		<input type="radio" name="sex" id="s1" value="" /><label for="s1">男</label>
		<input type="radio" name="sex" id="s2" value="" /><label for="s2">女</label>


		<br><br>
		<!-- 3。复选按钮-->
		<input type="checkbox" name="ins" id="i1" value="" /><label for="il">篮球</label>
		<input type="checkbox" name="ins" id="i2" value="" /><label for="i2">乒乓球</label>
		<input type="checkbox" name="ins" id="i3" value="" /><label for="i3">羽毛球</label>

		<br><br>
		<!-- 4.普通按钮-->
		<input type="button" name="" id="" value="确定"/>
		<button type="button">取消</button>

		
		<br><br>
		<!-- 5.其他功能-->
		<input type="color" name="" id="" value=""/>
		<input type="file" name="" id="" value=""/>
		<input type="date">
		<input type="datetime-local" name="" id="" value="" />
		
		<br><br>
		<!-- 06 div标签 
		1.作为普通双标签提供内容
		2.作为一个盒子对网页中的内容进行分块(分组)
		-->
		<div>
			这是第一部分
		</div>


		<br><br>
		<!--
		css(层叠样式表)是用来给标签添加样式和布局的
		1.css语法
		选择器{属性1:属性值1;属性2:属性值2;...}
		 
		 
		 说明：
		 1)选择器  -  选择需要添加样式的标签。(如果是内联样式选择器{}需要省略)
		 2)属性    -  属性名是由css决定的,不同的属性决定不同的样式
				常用属性:color - 文字颜色 background-color - 背景颜色
				font-size - 字体大小  width - 宽度  height - 高度
				border - 边框
		
		2.css代码位置
		1)内联样式表  -  将css代码写在标签的style属性中
		2)内部样式表  -  将css代码写在style标签中
		3)外部样式表
		
		 -->
		 <br><br>
		 <!-- 内联样式 -->
		 <p style="color: aqua;font-size: 20px;">我是段落1</p>
		 <!-- 内部样式 -->
		 <br><br>
		 <style type="text/css">
			 span{
				 color: brown;
				 border: 1px solid deeppink;
			 }
		 </style>
		 <span>我是span1</span>
		 
		 <br><br>
		 <!-- 外部样式表 -->
		 <!-- 外部写css文件,在头部引用该样式 -->
		 <a href="https:www.baidu.com">百度</a>
		 
		 
		 
</body>
</html>

<!-- 选择器的作用 - 选择网页中的标签 
1.标签选择器(元素选择器) - 直接将标签名作为选择器,选中所有指定标签
例如a{}  - 选中所有a标签;

2. ID选择器  -  在ID属性值前加#作为一个选择器,选中ID属性值为指定值的标签(同一页面中ID是唯一的)
例如：#p{}   -  选中ID属性值为p的标签

3. class选择器(类选择器)  -  在class属性值前加.作为一个选择器,选中所有class属性值是指定值的标签
例如：.p{}选中class属性值为p的标签
class可以同时有多个值
每个值都可以被选中该标签如果是.c1.c2那就要同时是class值有c1 和 c2同时存在的class属性值的标签

4.群组选择器 - 将多个选择器用逗号隔开作为一个选择器,选中用逗号隔开的每个选择器选中的所有标签
例如：p,#p1,.c1  -  选中所有p和id=p1,class=c1选中的标签


5.后代选择器 - 多个选择器用空格隔开
例如：div p{}  -  选中所有div后代的p标签(选中所有div里面的p标签);div和p标签是后代关系


6.子代选择器  - 多个选择器用>隔开
例如：div>p{}  -  选中所有div子代的p标签(选中所有div里面的p标签);div和p标签是子代关系


-->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				color: darkseagreen;
			}
			
			#p1{
				color: aquamarine;
			}
			
			.p2{
				color: orangered;
			}
			
		</style>
	</head>

	<body>
		<h1>我是标题1</h1>
		        <div>
		            <p>我是段落1</p>
		            <a href="" class="p2">我超链接1</a>
		            <p id="p1">我是段落2</p>
		            <div id="">
		                <span id="">
		                    我是span1
		                </span>
		                <p>我是段落3</p>
		                <a href="" class="p2">我是超链接2</a>
		            </div>
		            <a href="" class="p2">我是超链接3</a>
		        </div>
				<p>我是段落4</p>
				
	</body>
</html>