HTML
网页的技术结构：HTML、CSS、JS(JavaScript)
- HTML（结构标准） - 提供网页内容（通过不同的标签提供不同的内容）
- CSS（样式标准） - 负责网页内容的样式和布局
- JS（行为标准） - 负责控制网页内容变化
HTML（超文本标记语言）
-
一个网页就是一个HTML，html代码一般写在可以被浏览器直接解析的html文件中
-
基本结构：一个html标签里面包含一个head标签和一个body标签
- html标签 - 代表整个网页
- head标签 - 网页顶部负责显示网页图标与标题的部分，还负责不可见的设置性的内容
- body标签 - 负责网页内容的显示
-
标签语法：html是通过不同的标签来提供不同的网页内容，从结构上分为单标签与双标签
- 双标签：<标签名 属性名1=“属性值1” 属性名2=“属性值2”>标签内容</标签名>
- 单标签：<标签名 “属性值1” 属性名2=“属性值2”>、<标签名"属性值1" 属性名2=“属性值2”/>
- 说明：
- 标签名和括号符("<“与”>")不能有空隙
- 属性值不管是是什么类型的数据，都必须使用双引号
- 双标签内的标签内容可以是任何内容：包括纯文字、也可以是一个或者多个标签，或者是文字标签混合
- 标签名不是由程序员自己创建的，而是html提供的
<!-- html版本说明：html表示的就是html5 -->
<!DOCTYPE html>
<!-- 网页基本结构 -->
<html>
<head>
<!-- 设置网页编码方式 -->
<meta charset="utf-8" />
<!-- 设置网页标题 -->
<title>hello world</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!-- 设置编码方式 -->
<meta charset="utf-8">
<!-- 设置网页标题 -->
<title></title>
<!-- 设置网页图标 -->
<link rel="icon" type="image/ico" href="img/8169/e4.ico" />
<!-- <link rel="stylesheet" type="text/css" href="" /> -->
<!-- <style type="text/css"></style> -->
<!-- <script type="text/javascript"></script> -->
</head>
<body>
</body>
</html>
本文标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1. 标题标签：h1~h6 -->
<h1>===========1. 标题标签===========</h1>
<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
<!-- 段落标签：p -->
<h1>===========2. 段落标签===========</h1>
<p>段落1</p>
<p>段落2</p>
<!-- 3. 普通文本标签（行内文本标签）：font、span、label、... -->
<h1>===========3. 标题标签===========</h1>
<!-- 多行变成一行显示 -->
<span>发布时间：</span>
<span>08-10 06:25</span>
<span>娱乐领域</span>
<!-- 4. 文字效果相关标签与符号
标签
加粗：b、strong
倾斜：i、em
换行：br
符号
空格： （空格一个像素） 、  (空格)
-->
<h1>===========3. 文字效果相关标签与符号===========</h1>
<p>冷冷<b>清清</b><i>凄凄惨惨戚戚</i>，<br> 乍暖还寒时候， 最难将息；</p>
</body></html>
图片和超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- 1. 图片标签：img
src属性：设置图片地址（本地或者网络）
title属性：设置图片标题（鼠标停留在图片上才会显示）
-->
<h1>===========1. 图片标签===========</h1>
<img src="img/1622127933737.jpeg" title="呵呵呵">
<img src="https://img1.gamersky.com/upimg/users/2021/07/11/small_202107112330564654.jpg">
<h1>===========1. 超链接===========</h1>
<!-- 文字超链接 -->
<a href="https://www.baidu.com">百度</a>
<!-- 图片超链接 -->
<a href="https://www.baidu.com"><img src="img/8169/e2.ico"></a>
<body></body></html>
列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1. 无序列表：ul-li -->
<ul>
<li>python</li>
<li>java</li>
<li>h5</li>
<li>UI</li>
</ul>
<!-- 1. 有序列表：ol-li -->
<ol>
<li>python</li>
<li>java</li>
<li>h5</li>
<li>UI</li>
</ol></body></html>
input标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1. 普通输入框
value：输入框中的内容
placeolder：输入框提示文
-->
<input type="" name="" id="" value="" placeholder="请输入姓名"/>
<input type="text" name="" id="" value="" />
<!-- 自带清除按钮 -->
<input type="search" name="" id="" value="" placeholder="搜索电影、电视剧"/>
<br><br>
<!-- 2. 单选按钮
name相等时可以将多个单选按钮设置为一组，就可以实现单选功能
通过设置id，在label中用for绑定，可以实现文字可选（扩大单选按钮操作范围）
-->
<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="sports" id="sp1" value="" /><label for="sp1">羽毛球</label>
<input type="checkbox" name="sports" id="sp2" value="" /><label for="sp2">乒乓球</label>
<input type="checkbox" name="sports" id="sp3" value="" /><label for="sp3">篮球</label>
<br><br>
<!-- 4. 普通按钮 -->
<input type="button" name="" id="" value="确定" />
<button type="button"><img src="./img/8169/e2.ico" ></button>
<br><br>
<!-- 5. 其他按钮 -->
<input type="color" name="" id="" value="" />
<input type="datetime-local" name="" id="" value="" />
<input type="date" name="" id="" value="" />
<input type="file" name="" id="" value="" />
</body></html>
div标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- div标签
1. 作为普通双标签提供内容
2. 作为一个盒子对网页中的内容进行分块、分组
-->
<div id="title">
<li>嘿嘿</li>
<li>哈哈</li>
<li>呵呵</li>
</div></body></html>
CSS语法
- css（层叠样式表）是用来给标签添加样式和布局的
- css的语法
- 选择器{属性值1:属性值1;属性2:属性值2;…}
- 说明：
- 选择器 - 选择需要添加样式的标签；（如果是内联样式，选择器和大括号省略）
- 属性 - 属性名是由CSS决定的，不同的属性表示不同的样式
- 常用属性：color(文字颜色)、backcolor(背景颜色)、font-size(字体大小)、width(宽度)、height(高度)、border(边框)、…
- css代码位置
- 内联样式表：将css代码写在标签的style属性中
- 内部样式表：将css代码写在style标签中
- 外部样式表：将css代码写在css文件中，然后再html通过link标签导入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 外部样式表 -->
<link rel="stylesheet" type="text/css" href="css/07css.css"/>
</head>
<body>
<!-- 内联样式表 -->
<p style="color: aliceblue; font-size: 100px; background-color: #000000;">老夫聊发少年狂</p>
<br>
<!-- 内部样式表 -->
<span>左牵黄，右擎苍</span>
<style type="text/css">
span{
font-size: 100px;
color: #FFCC00;
border: 1px solid deeppink;
}
</style>
<br>
<a href="https://www.baidu.com/">锦帽貂裘，千骑卷平岗</a>
</body></html>
选择器
- 选择器的作用：选择网页中的标签
-
标签选择器（元素选择器） - 直接将标签名作为选择器，选中所有指定标签
- 例如：a{} - 选中所有的a标签
-
id选择器 - 在id属性值前加#作为一个选择器，选中id属性值为指定值的标签（同一页面中id是唯一的）
- 例如：#p2{} - 选中id属性值为p2的标签
-
class选择器(类选择器) - 在class属性值前加.(点)作为一个选择器，选中所有class属性值是指定值的标签
-
例如：
.p1{} - 选中class属性值为p1的标签
.p1.p2{} - 选中同时拥有p1与p2两个class值的标签
-
-
群组选择器 - 将多个选择器用逗号隔开作为一个选择器，选中逗号隔开的每个选择器选中的所有标签
- 例如：a,#p2,.p1 - 选中所有a标签，id为p2的标签，class为p1的所有标签
-
后代选择器 - 多个选择器用空格隔开
- 例如：div p{} - 选中所有div后代的p标签(选中所有div里面的p标签，div和p之间是后代关系)
-
子代选择器 - 多个选择器用>隔开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 1. 标签选择器（元素选择器） */
/* p{
color: red;} */
/* a{
color: blue;} */
/* 2. id选择器 */
/* #p2{
color: aquamarine;} */
/* 3. class选择器(类选择器) */
/* .p1{
color: #FFCC00;
background-color: blueviolet;}
.p1.p2{
color: red;} */
/* 4. 群组选择器 */
/* .p1,#p2{
color: greenyellow;} */
/* 5. 后代选择器 */
/* div p{
background-color: yellowgreen;} */
/* 6. 子代选择器 */
/* div>p{
background-color: darkorange;} */
</style></head>
<body>
<h1>我是标题1</h1>
<div>
<p class="p1">我是段落1</p>
<a href="">我是超链接1</a>
<p id="p2">我是段落2</p>
<span>
<p>我是段落5</p></span>
<div>
<span class="p1">我是span1</span>
<p>我是段落3</p>
<a href="">我是超链接2</a></div>
<a href="" class="p1 p2">我是超链接3</a></div><p>我是段落4</p></body></html>
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
