这篇博客介绍了HTML的基础结构，包括文档声明、元数据、标题、段落、图像、列表、表格和表单的使用。同时讲解了CSS的引入方式、选择器语法以及如何美化网页格式。内容涵盖标签选择器、类选择器、层级选择器、ID选择器和伪类选择器。此外，还讨论了资源路径、相对路径和绝对路径的概念，以及列表和表格的创建。
网页基础学习：
- html的学习
html的基本的结构，及其每个成对出现的便签的作用
<!-- 文档声明：html5的文档 -->
<!DOCTYPE html>
<!-- 当前的开发语言是英文 -->
<html lang="en">
<head>
<!-- 指定网页的编码格式 -->
<meta charset="UTF-8">
<!-- 在移动端浏览网页时，网页不缩放 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 在ie浏览器浏览网页时，使用ie的最高版本 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
世界你好
</body>
</html>
- html标签的分类，用代码的形式进行区分
<body>
<!-- 成对出现的标签 -->
<h1>这是一级标题</h1>
<h6>这个是六级标题</h6>
<div>这是一个容器的标签</div>
<p>这个是一个普通的段落标签</p>
<p>这个是一个普通的段落标签</p>
<!-- 单个的标签，只有一个标签，没有标签的内容 -->
<br>
<img src="imgs/logo.png" alt="图片（无法正常显示的时候出现的内容）">
<hr>
<!-- 带有属性的标签 -->
<img src="imgs/logo1.png" alt="标志1">
<a href="www.baidu.com">百度的链接，点击之后跳转至百度页面</a>
</body>
- 资源路径：
相对路径：从当前操作 html 的文档所在目录算起的路径
绝对路径：从根目录算起的路径叫做绝对路径，Windows 的根目录是指定的盘符，mac OS 和Linux 是/.
注意：一般都会使用相对路径，绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 资源路径:相对路径和绝对路径 -->
<img src="imgs/logo.png" alt="访问的图片不存在">
<br>
<img src="D:\Python开发文件夹\vs 代码存放\网页开发\day 07\imgs\logo.png" alt="图片不存在">
</body>
- 列表标签：
其中列表标签分为有序标签（ul）和无序标签（ol），并且在列表中的数据是用的（li）标签
<body>
<!-- 无序标签 -->
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
<!-- 无序标签 -->
<ol>
<a href="#">列表标题一</a>
<a href="#">列表标题二</a>
<a href="#">列表标题三</a>
</ol>
</body>
</html>
- 表格标签：
具体的标签使用标签的属性的标签通过实现的过程进行复习
<body>
<!-- border-collapse: collapse是将表格的边界线进行合并处理 -->
<table style="border: solid black 1px; border-collapse: collapse;">
<tr>
<th style="border: 1px solid black;">姓名</th>
<th style="border: 1px solid black;">年龄</th>
</tr>
<tr>
<th style="border: 1px solid black;">张三</th>
<th style="border: 1px solid black;">18</th>
</tr>
</table>
</body>
- 表单标签：
表单：可以将网页中的数据提交至网络上服务器中。其中有很多的标签，记忆常用的标签语言。
<body>
<!-- <form>标签 表示表单标签，定义整体的表单区域 -->
<form>
<p>
<!--<label>标签 表示表单元素的文字标注标签，定义文字标注 -->
<!--type="text" 定义单行文本输入框
type="password" 定义密码输入框
type="radio" 定义单选框
type="checkbox" 定义复选框
type="file" 定义上传文件
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮
-->
<label>姓名：</label><input type="text">
<br>
<label>密码：</label><input type="password">
</p>
<p>
<label>性别：</label><input type="radio">男
<input type="radio">女
</p>
<p>
<label>爱好：</label><input type="checkbox">唱歌
<input type="checkbox">跳舞
<input type="checkbox">游泳
</p>
<p>
<label>照片：</label><input type="file">
</p>
<p>
<label>个人描述：</label><textarea></textarea>
</p>
<p>
<label>籍贯：</label>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>成武</option>
</select>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
</form>
</body>
- 表单的提交：
表单标签的作用就是可以把用户输入数据一起提交到web服务器。
表单属性设置
action: 是设置表单数据提交地址
method: 是表单提交方式，提交方式有GET和POST
表单元素属性设置
name: 表单元素的名称，用于作为提交表单数据时的参数名
value: 表单元素的值，用于作为提交表单数据时参数名所对应的值
<body>
<!-- <form>标签 表示表单标签，定义整体的表单区域 -->
<form action="https://www.baidu.com" method="GET">
<p>
<!--<label>标签 表示表单元素的文字标注标签，定义文字标注 -->
<!--type="text" 定义单行文本输入框
type="password" 定义密码输入框
type="radio" 定义单选框
type="checkbox" 定义复选框
type="file" 定义上传文件
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮
-->
<label>姓名：</label><input type="text" name="username" value="11" />
<br>
<label>密码：</label><input type="password" name="password" />
</p>
<p>
<label>性别：</label><input type="radio" name="gender" value="0"/>男
<input type="radio" name="gender" value="1">女
</p>
<p>
<label>爱好：</label><input type="checkbox" name="like" value="sing">唱歌
<input type="checkbox" name="like" value="dance">跳舞
<input type="checkbox" name="like" value="swim">游泳
</p>
<p>
<label>照片：</label><input type="file" name="person_pic">
</p>
<p>
<label>个人描述：</label><textarea name="about"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">成武</option>
</select>
</p>
<p>
<input type="submit" name="sunmit" value="提交">
<input type="reset" name="reset" value="重置">
</p>
</form>
</body>
- CSS美化网页的格式：
css基本的语法：选择器:是用来选择标签的，选出来以后给标签加样式
选择器{
样式规则
}
样式规则：
属性名1：属性值1;
属性名2：属性值2;
属性名3：属性值3;
...
css的引入的方式：
行内式：优点：方便、直观。 缺点：缺乏可重用性
内嵌式（内部样式）：优点：在同一个页面内部便于复用和维护。 缺点：在多个页面之间的可重用性不够高，在head标签内加入style标签，在style标签中编写css代码。
外链式：优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。 缺点：css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极容易造成混乱
具体实现的代码如下所示：
<title>这个是网页的头部显示的内容</title>
<style type="text/css">
h1{
color: rosybrown;
}
</style>
</head>
<body>
<!-- 行内式 -->
<div style="width: 100px;height: 100px; background-color: red;">hello</div>
<!-- 内嵌式（内部样式） -->
<h1>这个是一级标题</h1>
- css选择器：
标签选择器：根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置。
类选择器：根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器
层级选择器(后代选择器)：根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器，注意事项：这个层级关系不一定是父子关系，也有可能是祖孙关系，只要有后代关系都适用于这个层级选择器
id选择器：注意点: 这个层级关系不一定是父子关系，也有可能是祖孙关系，只要有后代关系都适用于这个层级选择器，注意点: 虽然给其它标签设置id=“box”也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象。
组选择器：注意点: 虽然给其它标签设置id=“box”也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象。
伪类选择器：用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 标签选择器 -->
<style type="text/css">
p{
color: rosybrown;
}
</style>
<!-- 这个是三个类选择器，可以进行叠加的控制的效果 -->
<style type="text/css">
.blue{color:blue}
.big{font-size:20px}
.box{width:100px;height:100px;background:gold}
</style>
<!-- 层级选择器，层级选择器的写法是././ -->
<style type="text/css">
div p{
color: red;
}
.con{width:300px;height:80px;background:green}
.con span{color:red}
.con .pink{color:pink}
.con .gold{color:gold}
</style>
<!-- id选择器，使用的时候是用#号 -->
<style type="text/css">
#box{color:red}
</style>
<!-- 组选择器 -->
<style type="text/css">
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
</style>
<!-- 伪类选择器 -->
<style type="text/css">
.box1{width:100px;height:100px;background:gold;}
.box1:hover{width:300px;}
</style>
</head>
<body>
<!-- 标签选择器 -->
<div>hello</div>
<p>hello</p>
<!-- 类选择器 -->
<div class="blue">这是一个简单的div</div></div>
<h1 class="blue big box">这是一个简单的标题</h1>
<p class="blue box">这是一个段落</p>
<!-- 层级选择器 -->
<div>
<p>hello</p>
</div>
<div class="con">
<span>哈哈</span>
<a href="#" class="pink">百度</a>
<a href="#" class="gold">谷歌</a>
</div>
<span>你好</span>
<a href="#" class="pink">新浪</a>
<!-- id选择器 -->
<p id="box">这是一个段落标签</p> <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
<p>这是第二个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
<p>这是第三个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
<!-- 组选择器 -->
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
<!-- 伪类选择器 -->
<div class="box1">这是第一个div</div>
</body>
</html>
- Css属性
扫一扫
953
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
