前端入门【Html&CSS】

最新推荐文章于 2023-08-07 08:22:01 发布
最新推荐文章于 2023-08-07 08:22:01 发布
阅读量414 收藏 5
点赞数 1
分类专栏： 前端 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Li_CSDN_Li/article/details/110101914
版权

学习目标

  • 能够使用form标签创建表单容器

  • 能够使用form表单中常用的input标签创建输入项

  • 能够使用表单select标签定义下拉框输入项

  • 能够使用表单textarea标签定义文本域

  • 能够使用CSS的基本选择器选择元素

  • 能够使用CSS的扩展选择器选择元素

  • 能够使用常见的CSS属性

  • 能够说出盒子模型的属性

  • 能够制作黑马旅游网的注册页面

一、网站用户注册页面

​ 所有的html标签中，表单标签是最重要的。在实际开发中，表单标签最经典的应用就是注册页面，覆盖了表单标签的所有元素。效果如下：

在这里插入图片描述

二、案例相关标签

本案例使用的标签如下：

form：表单容器标签
input：输入框
select：下拉框
textarea：文本域
button：按钮

【参考代码】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			form表单：
				作用：提供给用户在页面上显示可供输入或者选择的组件，提交数据
			form子标签：
			    input：
			        文本框：type="text"   默认
			        密码框：type="password"
			        单选按钮：type="radio"   一定要给相同的name属性
			        多选按钮（复选框）：type="checkbox"  一定要给相同的name属性
			        文件上传组件：type="file"
			        隐藏域：type="hidden"   偷偷提交数据
			        按钮：
			            普通按钮：type="button"  必须通过value属性设置显示内容
                        重置按钮：type="reset"   作用是清空输入的内容
                        提交按钮：type="submit"   提交表单的数据
                        图片提交按钮：type="image"

			    select：下拉框   选择的时候打开
			        子标签：option
			    textarea：文本域
		-->
        <!--
            通用属性：
                name属性
                    作用：
                        1.name属性给radio，checkbox分组；
                        2.提交数据；
                value属性：
                      作用：
                        1.给radio,checkbox设置默认值；
                        2.给按钮设置显示的内容；
                readonly属性：
                        作用：设置标签只读
                disabled属性：
                        作用：禁用标签
        -->
        <!--
              特殊属性：
                    checked属性：
                        设置radio，checkbox的默认选中；
                    selected属性：
                       设置select下拉框的默认选中项；
        -->
<!--
        form标签的属性：
            action：设置数据提交的地址；
            method：
                get：默认
                    特点：
                        1.数据会拼接在url后面提交；
                        2.数据不安全；
                        3.提交的数据量有限制；
                post：
                    特点：
                        1.数据不会拼接在url后面，在请求体中；
                        2.相对安全；
                        3.数据量没有限制；
-->
        <form action="http://www.itcast.cn" method="post">
            用户名：<input type="text" name="userName" value="张三" readonly><br>
            用户名2：<input type="text" name="userName2" value="李四" disabled><br>
            <input type="hidden" name="id" value="123"><br>
            密码：<input id="userName" name="password"   type="password"> <br>
            性别：<input checked="checked" type="radio" value="男" name="gender"> 男
                  <input type="radio" value="女" name="gender"> 女 <br>
            爱好：<input type="checkbox" value="sleep" name="hobby"> 睡觉
                 <input checked type="checkbox" value="eatting" name="hobby"> 吃饭
                 <input type="checkbox" value="codding" name="hobby"> 敲代码 <br>
            头像：<input name="file" type="file"> <br>
            城市：<select name="city">
                    <option value="bj">北京</option>
                    <option  value="sh">上海</option>
                    <option value="gz">广州</option>
                    <option value="sz">深圳</option>
                    <option  selected value="hz">杭州</option>
                 </select> <br>
            自我描述：
            <textarea  name="desc" cols="30" rows="10"></textarea><br>
            <input type="button" value="普通按钮">
            <input type="reset"  value="重置按钮">
            <input type="submit">
            <input type="image" src="../img/reg.png">
        </form>
	</body>
</html>

三、表单相关的标签【重点】

1、表单标签：<form>

作用：

​ 把表单中的数据提交给远端服务器；

​ 【注意】： 表单标签，在html页面创建一个表单，表单标签在浏览器上没有任何显示。如果数据需要提交到服务器，负责搜集数据的标签必须存放在表单标签体内。

属性：
属性使用示例说明
actionaction=“http://www.itcast.cn”action设置表单提交的服务器地址
methodmethod=“get” 或 method=“post”method设置表单提交数据的方式
表单提交方式：get和post
  • get：默认值
    • 提交数据的方式：提交的数据追加在请求路径上。数据格式k = v，追加是使用 ? 连接，之后每一对数据使用&连接；如：https://www.baidu.com/register.html?username=zhangsan&password=123&email=xxx
    • 因请求路径长度有限制，所以提交的数据有限；
    • 不安全；
  • post：
    • 提交数据的方式：数据不追加在请求路径上；
    • 请求数据的大小无限制；
    • 相对安全；

2、输入域标签：<input>

作用：

​ 标签用于获得用户输入信息，type属性值不同，搜集数据的方式不同。

通用属性：

​ 通用属性指的是一般的标签都可以使用的属性。

1.type：
  • 作用：设置表单项收集数据的方式，如：1、<input type="text">决定了这个input标签是一个文本框，可以输入文本数据；2、<input type="radio"> 决定了这个input是通过以单选按钮的方式供用户选择数据；
  • 取值：
type属性使用示例效果说明
text姓名：<input type = "text" name="name">在这里插入图片描述文本框，单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符；
password<input type = "password" name="pwd">在这里插入图片描述密码框，密码字段。该字段中的字符以黑圆点显示
radio<input type = "radio" name="sex" value="男">在这里插入图片描述单选框，表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的 ；
checkbox<input type = "checkbox" name="hobby" value="音乐">在这里插入图片描述复选框，表示一组按钮，可供多选；
file<input type = "file" name="uploadFile">在这里插入图片描述文件上传组件,提供"浏览"按下可以选择需要上传文件.；
hidden<input type = "hidden" name="id" >隐藏字段. 数据会发送给服务器，但浏览器不进行显示；
image<input type="image" src="../img/reg.png" height="30px"/>在这里插入图片描述图形提交按钮，通过src给按钮设置图片；
submit<input type="submit" value="提交">在这里插入图片描述提交按钮。提交按钮会把表单数据发送到服务器。一般不写name属性，否则将“提交”两个字提交到服务器。
reset<input type="reset" value="重置">在这里插入图片描述重置按钮。将表单恢复到默认值；
button<input type="button" value="按钮">在这里插入图片描述普通按钮，常用于与JavaScript结合使用；
2.name：

​ name属性的作用是告诉浏览器我要提交的这个数据的名称，如果需要将表单数据提交到服务器则必须添加name属性。

属性使用示例说明
name<input type = "text" name="name">元素（数据）名称，如果需要表单数据提交到服务器，必须提供name属性值，服务器通过属性值获得提交的数据；
3.value：

​ value属性的作用：

  • 给input 标签，select 标签，textarea标签设置默认值；
  • 给submit，reset，button按钮设置显示在按钮上的文字信息；

【注意】：radio和select标签不能直接输入数据，所以必须通过给value属性设置默认值；

属性使用示例说明
value<input type = "text" name="name" value="张三">
<input type="submit" value="提交">		设置input标签的默认值。注意：submit和reset为按钮显示数据；
4.readonly：

作用：将可以输入文本的input标签或者textarea设置成只读状态；

特点：

​ 1.只读状态的标签中书写的内容不能被修改；

​ 2.只读状态的标签中如果有默认值，这个值会随着表单提交到服务器；

属性使用示例说明
readonly<input type="text" value="汉语" readonly="" />设置input是否只读 数据会被提交 ；
5.disabled：

作用：禁用表单；

特点：

​ 1.禁用状态的表单中不能输入数据；

​ 2.禁用状态的表单如果有默认值，这个值不会随着表单提交到服务器；

属性使用示例说明
disabled<input type="text" value="汉语" disabled="" />是否可用 数据不会被提交 ；
特殊属性

​ 特殊属性指的是，用在特殊的标签上的属性。

1.checked：

作用：设置radio和checkbox默认选中状态的属性。

属性使用示例说明
checked<input type = "radio" name="sex" value="男" checked="checked">
<input type="checkbox" name="hobby" value="看书" checked="" />		默认选中radio或者checkbox（标签中只要出现checked属性即可）

3、下拉列表：select>option

在这里插入图片描述

作用：

提供一组可选的数据供用户选择（单选或多选）；

属性：
属性使用示例说明
namename=“city”设置下拉框的name属性
multiplemultiple=“multiple”设置下拉框为多选下拉框
sizesize=“3”设置多选时，可见选项的个数
子标签：<option>
  • 作用：设置select下拉框的选择项；
  • 属性：
属性使用示例说明
valuevalue=“sh”设置option的value值，当这个option被选中时，这个value值会随着表单提交
selectedselected=“selected”将option设置成默认被选中的项
语法结构：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<select  name="city" >
			<option value="">请选择</option>
			<option value="sh">上海</option>
			<option value="bj">北京</option>
         	 <option value="gz">广州</option>
         	 <option value="sz">深圳</option>
		</select>
	</body>
</html>

【注意】: 一般option需要给value这个属性，如果不给，默认会把option标签之间的文本内容发送到服务器。

4、文本域：<textarea>

在这里插入图片描述

作用：

多行的文本输入控件；

属性：
属性使用示例说明
colscols=“10”设置文本域的列数(宽)
rowsrows=“5”设置文本域的行数(高)
namename=“desc”设置文本域的name属性
语法结构：
<textarea  name="desc" rows="10" cols="50"></textarea>

5、表单标签总结

  1. name属性的作用是什么？
    1. 给标签取名；
    2. 将子标签的数据提交到服务器；
  2. value属性的作用是什么？
    1. 给radio,checkbox,option和hidden这一类不能够通过页面输入数据的标签设置默认值；
    2. 给按钮设置显示的文字信息；
  3. 哪些标签必须设置value属性？
    1. radio，checkbox和hidden隐藏域；
  4. 怎么能够让radio和checkbox中的某一项默认选中？
    1. 通过checked属性设置；
  5. 怎么能够让select下拉框中的某一项默认选中？
    1. 通过给option设置selected属性；
  6. 哪些按钮有提交表单的作用？
    1. type="submit"和type="image"的input控件；
    2. 提交 ：也能提交表单数据；

在这里插入图片描述

四、其他标签【熟悉】

1、div

作用：
对页面区域进行划分；
特点：

​ 1.独占一块区域；

​ 2.只对页面区域进行划分，并不能实现复杂效果，必须结合CSS样式进行渲染；

【实际应用】使用div+css对页面进行布局和划分；

2、span

作用：

​ 在页面中的一行划分出一小段区域；

特点：

​ 共处一行；

【实际应用】使用span+css来精确修饰文本数据；

【代码示例】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			div : 没有实际性的意义，用来做区域的划分 
			 特点：独占一行
		-->
		我是div
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		
		<!--
			span : 没有实际意义，用来对元素进行美化 
			特点：共处一行
		-->
		我是span
		<span>我是span</span>
		<span>我是span</span>
		<span>我是span</span>
		<br />
		
	</body>
</html>

【效果】

在这里插入图片描述

五、CSS

一、CSS概述【了解】

1、CSS是什么

CSS 通常称为CSS样式或层叠样式表，又称之为网页的美容师，主要用于设置HTML页面排版和字体；

2、CSS名词解释

CSS (Cascading Style Sheets) ：指层叠样式表

  • 样式： 给HTML标签添加需要显示的效果。
  • 层叠： 使用不同的添加方式，给同一个HTML标签添加样式，最后所有的样式都叠加到一起，共同作用于该标签

二、CSS书写规则【掌握】

【书写规则】
CSS样式书写规则说明
普通样式color:red样式名:样式值
复合样式border:1px solid red样式名:样式值1 样式值2 样式值3

【需求】

书写div，要求设置：字体为黄色，字体大小100px， 边框为 1px 实线 边框颜色为红色

在这里插入图片描述

分析： 需要使用到的样式
1.color  	 设置字体的颜色
2.font-size  设置字体的大小
3.border     设置边框    border:border-width border-style border-color; 分别用来修饰边框的粗细，边框的样式，边框的颜色。

代码实现：
<标签名 style="样式名1 : 样式值1；样式名2 : 样式值2；…" ></标签名>

【注意】：

1. 属性名 和 属性值 之间通过 ： 来隔开;
2. 多个样式之间使用 ; 隔开;
   1. 一般复合样式 (border, font…) 值是多个，而多个值使用空格隔开。例如： border : 1px solid #000；
3. 样式非常多，具体的样式名和样式值需要在api中去查询。在今天课程的最后我们会介绍一些常见的css样式。

【代码示例】

	<!--需求：
      书写div，要求设置：字体为黄色，字体大小100px， 
      边框为 1px  实线 边框颜色为红色 
      -->
    <div style="color: yellow; font-size: 100px; border: 1px solid red;">
      我是div
    </div>

【小结】：css样式怎么写

  1. 普通样式：样式名：样式值;
  2. 复合样式：样式名：样式值1 样式值2 样式值3 ......；
  3. 不同的样式之间使用; 隔开；

三、CSS和HTML的结合方式【熟悉】

​ 上面我们学会了书写css样式的基本语法，而要知道我们的html页面只能书写html标签。那么css可不可以写到html文件中呢？如果可以，那么css可以写在html文件中的什么地方？如果不写在html文件中，我能在当前html文件使用这些css样式么？而我们接下来要做的就是对于这些问题的解决。也就是学习css样式和我们html文件的结合方式。

方式一：行内式
【语法格式】
style="属性名1：属性值1；属性名2：属性值2；......"

【需求】书写div，要求设置：字体为黄色，字体大小100px， 边框为 1px 实线 边框颜色为红色

【素材】

 <div>
      我是div
 </div>

【参考代码】

	<!--需求：
      书写div，要求设置：字体为黄色，字体大小100px， 
      边框为 1px  实线 边框颜色为红色 
      -->
    <div style="color: yellow; font-size: 100px; border: 1px solid red;">
      我是div
    </div>

​ 第一种方式：我们在上面的练习中已经用过了，就是通过标签中使用style属性，在style属性中写css样式。

【缺点】：

  • html代码和css代码耦合在一起,样式过多后，难以维护；
  • 如果多个标签都需要使用相同的样式，冗余代码过多；
方式二：内嵌式【重点】
1、书写格式：
<head>
<style type="text/css">
  标签名称｛
              样式名1：样式值1；
              样式名2：样式值2；
            ｝
</style>
</head>

【注意】：

type=”text/css”可以省略

2、【案例二】

【需求分析】：

​ 书写多个div，设置样式为: 字体为红色，字体大小为100px, 背景色为黄色，边框为 1px 实线 边框颜色为蓝色

【代码实现】：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				color: red;
				font-size: 100px;
				background: yellow;
				border: 1px solid blue;
			}
		</style>
	</head>
	<body>
		<!--
			需求：书写多个div，设置样式为: 字体为红色，字体大小为100px, 背景色为黄色，边框为 1px  实线 边框颜色为蓝色
		-->
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
	</body>
</html>

​ 可以发现，通过使用style标签的方式，当前页面如果要修改所有标签的样式的时候，那么只需要修改一处就行了。这样是比较方便的。

​ 但是问题是：我们实际开发中有很多html页面。当项目中所有的html文件都需要使用这个页面中的样式的时候（比如说网站的主色调），这是时候需要在每个html页面中拷贝一份相同的代码。而且，如果后期需要修改样式，需要每一个html文件都去修改。这样是非常麻烦的。

【缺点】：

​ 代码的复用性低，无法实现多个页面的复用。

方式三：引入外部的css文件【重点】
【语法格式】
<link rel="stylesheet" type="text/css" href="css文件路径" />
【案例实现】
  1. 书写html页面；

​ 新建html文件并编写以下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
      </head>
	<body>
		<!--
			需求：书写多个div，设置样式为: 字体为红色，字体大小为100px, 背景色为黄色，边框为 1px  实线 边框颜色为蓝色
		-->
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
	</body>
</html>
  1. 书写CSS样式；

​ 创建CSS样式文件1.css

div{
	color: red;
	font-size: 10px;
	background-color: yellow;
	border: 1px solid blue;
}

3.在html页面引入css样式文件；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/1.css" />
	</head>
	<body>
		<!--
			需求：书写多个div，设置样式为: 字体为红色，字体大小为100px, 背景色为黄色，边框为 1px  实线 边框颜色为蓝色
		-->
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
	</body>
</html>
【注意】：

​ 第三种是开发中经常使用的。这是因为html文件中都是html标签。这样提高代码的可读性。

【小结】：CSS与html结合的方式；

  1. 行内式：<div style="color:red; border: 1px solid red;"> 我是div </div> ，简单粗暴有效；
  2. 内嵌式：在head标签内，使用<style>标签。 【比较常用】
<style type="text/css">
  div{
    /*
    * 设置div中的文字的颜色
    */
    color:red;
     /*
    * 设置div的边框的属性
    */
    border:1px solid red;
  }
</style>
  1. 链接外部css文件：【比较常用】
<link rel="stylesheet" href="../css/1.css"><link/>

四、CSS选择器【重点】

​ 选择器的作用：选择要操作的标签；

1、语法格式
选择器{
	样式名：样式值；
}
2、三种基本的选择器
选择器作用语法细节
id选择器通过id属性值选择标签#id{ }前提：先给标签设置一个id属性和值；
唯一：建议id属性值在同一个网页中保持唯一；
class选择器通过class属性值选择器标签.classVal{ }前提：先给标签添加class属性值；
类名：类名不能以数字开头；
标签名选择器通过标签名选择同名的标签标签名{ }
【练习一】id选择器练习
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div2{
				color: yellow;
				font-size: 100px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<!--
			【需求】选中第二个div，给其添加以下样式
				1.字体为黄色；
				2.字号为100px；
				3.边框  1px solid red;
		-->
		<div>我是div1</div>
		<div id="div2">我是div2</div>
		<div >我是div3</div>
	</body>
</html>
【练习二】class选择器练习
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.myDiv{
				color: yellow;
				font-size: 100px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<!--
			【需求】选中第二个和第三个div，给其添加以下样式
				1.字体为黄色；
				2.字号为100px；
				3.边框  1px solid red;
		-->
		<div >我是div1</div>
		<div class="myDiv">我是div2</div>
		<div class="myDiv">我是div3</div>
	</body>
</html>
【练习三】标签名选择器练习
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			div{
				color: yellow;
				font-size: 100px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<!--
			【需求】选中所有的div，给其添加以下样式
				1.字体为黄色；
				2.字号为100px；
				3.边框  1px solid red;
		-->
		<div>我是div1</div>
		<div>我是div2</div>
		<div>我是div3</div>
	</body>
</html>
3、扩展选择器

​ 扩展选择器指的是基本选择器的组合。常用的组合有三种：层级，组合和属性过滤选择器；

扩展选择器格式作用语法符号
层级选择器父选择器 子孙选择器{ }选择父标签下的所有的子孙标签空格
组合选择器选择器1，选择器2{ }多个选择器选择结果的组合,逗号
属性过滤选择器标签名[属性名=“属性值”]选择具某个属性值的标签[]中括号
【练习一】层级选择器练习
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#a span{
				color: yellow;
				font-size: 50px;
			}
		</style>
	</head>

	<body>
		<!--
			【需求】选中id为a的div中所有span，并将其设置如下样式：
				1.字体颜色为黄色；
				2.字号大小为50px；
		-->
		<div id="a">
			<span>我是span1</span>
			<div>
				<span>我是span2</span>
			</div>
		</div>
		<span>我是span3</span>
		<span>我是span4</span>
		<div>
			<span>我是span5</span>
			<span>我是span6</span>
		</div>
	</body>
</html>
【练习二】组合选择器练习
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div,span{
				color: yellow;
				font-size: 100px;
				border: 1px solid red;
			}
		</style>
	</head>

	<body>
		<!--
			【需求】选中页面上的所有div和span，给其添加如下样式：
				1.字体为黄色；
				2.字号为100px；
				3.边框  1px solid red;
		-->
		<div>我是div1</div>
		<div>我是div2</div>
		<span>我是span1</span>
		<span>我是span2</span>
	</body>
</html>
【练习三】属性过滤选择器练习
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			input[type="text"]{
				border: 2px double blue;
			}
		</style>
	</head>
	<body>
		<!--
			【需求】选中所有type="text"的input标签，给其设置如下样式：
				边框宽度2px，实线，蓝色框
		-->
		文本框：<input type="text" /><br />
		密码框：<input type="password" /><br />
		文本框：<input id="txt" type="text" /><br />
		密码框：<input type="password" /><br />
	</body>
</html>

六、CSS常用样式【熟悉】

1、字体样式：

​ CSS字体样式指的文字的字号，粗细和字体的样式(斜体)。常用的字体样式如下：

样式名作用说明
font-family设置文字的字体；font-family=“宋体”设置的字体必须是系统中已经安装的
font-size设置文字的字号（大小）；font-size=“100px”单位：像素
font-style设置文字的样式（斜体）；font-style=“italic”
font-weight设置文字的粗细；font-weight=“bolder”

【练习】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				font-size: 100px;
                font-family: 楷体;
                font-style: italic;
                font-weight: bold;
			}
		</style>
	</head>
	<body>
		<!--
		        文字样式：
		            font-szie:字号
		            font-family:字体
		            font-style:字体样式
		            font-weight:文字粗细
		            
		            
			   【需求】设置span标签中文字的字体样式
			        要求：
			            7号字
			            楷体
			            斜体
			            加粗
		-->
		<span>早睡能解决80%的问题</span><br>
		<a href="">传智播客</a>
	</body>
</html>
2、文本样式：
CSS文本样式指的是文本的颜色，间距，缩进等样式。常用的文本样式如下：
样式名作用说明
color文本颜色color=“red"或color=”#FFF"
text-decoration文字修饰underline 下划线，overline 上划线，line-through 删除线
text-indent文本缩进单位：em，如：text-indent=“2em”：缩进两个字符
text-align文本水平对齐方式text-align:left 左对齐，center 居中对齐，right 右对齐

【练习】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <style>
        div{
            text-align: center;
            color: red;
        }
        a{
            text-decoration: none;
        }
        p{
            text-indent: 2em;
        }
    </style>
</head>
<body>
        <!--
            文本样式：
                text-align:水平对齐方式  左，中，右
                text-indent:首行缩进
                text-decoration:文本装饰  下划线，贯穿线...
                color:设置字体颜色

            【需求】：
                设置div中文本的样式
                要求：
                    文本居中
                    红色
                    
                取消a标签文本的下划线
                给p标签中的内容，首行缩进2个字符
        -->
    <div>
       只有在中国，小龙虾才活的有尊严
    </div>
        <a href="#">传智播客</a>
        <p>
            只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严
        </p>
        <p>
            只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严
        </p>
        <p>
            只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严
        </p>
        <p>
            只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严
        </p>
</body>
</html>
2、边框和背景
【边框相关】
样式名作用使用示例常用取值
border设置对象边框的样式border:border-width border-style(required) border-colorborder-width:定义边框的宽度；border-style:设置边框的4个边的样式，如：实线，虚线；border-color:设置边框的颜色；
height设置标签的高度height:100pxlength：px，cm；%：百分比高度；
width设置标签的宽度width:100pxlength：px，cm；%：百分比高度；
【背景相关】
背景样式属性作用&取值
background-color设置对象的背景颜色：colorname,rgb
background-image设置对象的背景图片：url(图片的路径)
background-repeat设置背景的平铺方式：no-repeat:不平铺，repeat-x:横向平铺，repeat-y:纵向平铺；（注：图片默认是平铺满整个盒子）
【案例】边框和背景样式练习

【需求】：

​ 1. 给页面某个div设置：宽度200像素，高度200像素，1像素实线黑色的框 ；

​ 2. 给div设置背景色lightgreen，背景图片，观察不同的图片平铺方式；

【代码示例】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
            div{
                width: 300px;
                height: 300px;
                border: 1px solid red;
                background-color: yellow;
                background-image: url("../img/reg.png");
                /*background-repeat: repeat-x;*/
                /*background-repeat: repeat-y;*/
                background-repeat: no-repeat;

            }
        </style>
	</head>
	<body>
		<!--
			【需求一】将div设置如下样式
				1.宽度300px；
				2.高度300px；
				3.边框：1px 实线 红色；
				
			【需求二】给div设置背景图片，并演示以下平铺方式
				1.默认平铺方式；
				2.水平方向平铺；
				3.垂直方向平铺；
				4.不平铺；
		-->
		<div>
			早睡能解决80%以上的问题
		</div>
	</body>
</html>
3、行和块之间的转换：display

HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块标签和行内（内联）标签。

display属性取值：
值描述
inline此元素将显示为行内元素（行内元素默认的display属性值）
block此元素将显为块元素（块元素默认的display属性值）
none此元素将被隐藏，不显示，也不占用页面空间
【案例】行和块转换案例

【需求】

  1. 将div转换成行内元素；
  2. 将span转换成行级元素；
  3. 将id为div3的div隐藏；

【代码示例】

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{
				background-color: red;
			}
			#div2{
				background-color: green;
			}
			#div3{
				background-color: yellow;
			}
          	div{
              	 width:100px;
              	 height:100px;
			}
			#span1{
				background-color: green;
			}
			#span2{
				background-color: red;
			}

			div{
                display: inline;
            }
            span{
                display: block;
            }
            #div3{
                display: none;
            }
		</style>
	</head>
	<body>
		<!--
			【需求】
				1. 将div转换成行内元素；
				2. 将span转换成行级元素；
				3. 将id为div3的div隐藏；
		-->
		
		<div id="div1">
          	我是div1
      	</div>
      	<div id="div2" >
          	我是div2
      	</div>
      	<div id="div3" >
          	我是div3
      	</div>
     	 <hr />
      	<span id="span1">我是span1</span>
        <span id="span2">我是span2</span>
	</body>
</html>

七、盒子模型【了解】

1、什么是盒子模型：

​ 任何一个网页元素包含由这些属性组成：内容(content)、内边距(padding)、边框(border)、边界(margin)， 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。

  • 内容（content）就是盒子里装的东西；
  • 内边距(padding)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；
  • 边框(border)就是盒子本身了；
  • 外边界(margin)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。

在这里插入图片描述

2、相关属性：

盒子模型相关的属性：border 边框，padding 内边距；margin 外边距；

属性作用
border边框属性
padding内边距
margin外边距
2.1 边框属性：border
属性边框样式取值
border-style边框线型solid：定义实线；
dashed：定义虚线；
double：定义双线
border-width边框宽度length：允许自定义边框宽度
border-color边框颜色颜色名，十六进制颜色值
border-radius边框圆角指定圆角的半径
border简写线型 宽度 颜色

border: 1px solid red;

2.2 内边距：padding

内边距四边距离定义：

内边距的写法含义
padding-top:10px;上内边距
padding-left:10px;左内边距
padding-bottom: 10px;下内边距
padding-right:10px;右内边距
2.3 外边距：margin
外边距的写法含义
margin-top:10px;上外边距
margin-left:10px;左外边距
margin-bottom: 10px;下外边距
margin-right:10px;右外边距
2.4 简写方式：
外边距的写法含义
margin:10px四边相同
margin:10px 20px;上下 左右
margin:10px 20px 30px;上 左右 下
margin:10px 20px 30px 40px;上 右 下 左
2.5 块级元素居中–水平方向居中
margin:auto;
3、【案例二】盒模型&注册表单

在这里插入图片描述

【需求分析】
需求：使用盒子模型修改注册页面
1、给body添加背景图片 regist_bg.jpg
2、设置一个div包裹form表单，设置div宽度500px、高度400px，背景为白色，边框实线 5px 颜色：#ccc
3、设置外边距上下100px，左右auto
4、通过设置内边距使表单在div中间
【代码实现】
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			需求：使用盒子模型修改注册页面
				1、给body添加背景图片 regist_bg.jpg
				2、设置一个div包裹form表单，设置div宽度500px、高度400px，背景为白色，边框实线 5px 颜色：#ccc
				3、设置外边距上下100px，左右auto
				4、通过设置内边距使表单在div中间
		-->
		<style>
            body{
                background-image: url("../img/regist_bg.jpg");
            }

            #formDiv {
                width: 500px;
                height: 400px;
                background-color: white;
                border: 5px solid #cccccc;
                margin: auto;
                margin-top: 50px;
                padding-left: 174px;
                padding-top: 100px;
            }

        </style>
	</head>
	<body>
		<div id="formDiv">
            <form action="#" method="get">
                <!--此处的内容可能被提交到服务器-->
                <table>
                    <tr>
                        <td align="right">用户名：</td>
                        <td align="left"><input type="text" name="username"></td>
                    </tr>
                    <tr>
                        <td align="right">密 码：</td>
                        <td align="left"><input type="password" name="password"></td>
                    </tr>
                    <tr>
                        <td align="right">确认密码：</td>
                        <td align="left"><input type="password" name="repassword"></td>
                    </tr>
                    <tr>
                        <td align="right">性 别：</td>
                        <td align="left">
                            <input type="radio" name="sex" value="男">男
                            <input type="radio" name="sex" value="女">女
                        </td>
                    </tr>
                    <tr>
                        <td align="right">头 像：</td>
                        <td align="left"><input type="file" name="upload"></td>
                    </tr>
                    <tr>
                        <td align="right">爱 好：</td>
                        <td align="left">
                            <input type="checkbox" name="hobby" value="编程"/>编程
                            <input type="checkbox" name="hobby" value="把妹"/>把妹
                            <input type="checkbox" name="hobby" value="装逼"/>装逼
                        </td>
                    </tr>
                    <tr>
                        <td align="right">所在城市：</td>
                        <td align="left">
                            <select name="city">
                                <option>上海</option>
                                <option>广州</option>
                                <option>北京</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">自我描述：</td>
                        <td align="left">
						<textarea re rows="3" cols="15" name="desc" >
						</textarea>
                        </td>
                    </tr>
                    <tr>
                        <td align="right"></td>
                        <td align="left">
                            <input type="submit" value="提交">
                            <input type="reset" value="重置">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
	</body>
</html>

六、总结

在这里插入图片描述

Li_CSDN_Li
关注
专栏目录
html点击文字下拉,利用jQuery实现可输入搜索文字的下拉框
weixin_39608657的博客
06-03 894
先看效果功能：点击下拉框输入框时，自动显示下面的下拉列表，而且是根据输入框中输入的搜索添加，自动在后台查找，然后传到前台，展现页面。用的的js：var $xialaSELECT;$(document).ready(function(){initXialaSelect();initSearch();});var temptimeout=null;var query="";function sea...
javascript实现通过拼音首字母快速选择下拉列表
08-04
javascript实现通过拼音首字母快速选择下拉列表：使用form表单
html通过拼音首字母定位,javascript实现通过拼音首字母快速选择下拉列表
weixin_35662528的博客
05-31 576
javascript实现通过拼音首字母快速选择下拉列表更新时间：2008年05月31日 13:18:45 作者：比如，某选项的拼音首字母为"a",只要按下键盘上的"a"，就可以快速选择该项。如何解决重音字 和兼容ff.ff下怎呢得到asc呢，忘高手指教下拉列表快速选择// 获取拼音首字母function getPinYin(c) {execScript("tmp=asc(\""+c+"\")"...
html通过拼音首字母定位,input+div 实现输入拼音首字母或汉字自动检索上拉列表...
weixin_31591833的博客
05-31 490
input+div 实现输入拼音首字母或汉字自动检索下拉列表1.页面代码：引用2.js 移开事件(onMouseOut)引用function d_1(obj,e){var e = window.event || e, relatedTarget = e.toElement || e.relatedTarget;while(relatedTarget && relatedTarget...
下拉列表支持拼音简拼、全拼、汉字搜索。
代码如疯
07-08 7111
下拉列表支持拼音简拼、全拼、汉字搜索。 项目需要做一个下拉列表能支持拼音简拼、全拼、汉字搜索，网上搜了好多效果都不是很好，无奈之下就自己写了一个插件，本人技术有限写的不好的地方大家多多拍砖，希望好的建议和代码共同分享。 先上图 实现原理：事实上这种下拉列表就是有一些div拼在一块来实现。
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
最新发布
03-06
【标题】中的“尚硅谷前端入门html+css零基础教程”指的是一个由尚硅谷教育机构提供的，面向初学者的前端开发课程，主要涵盖了HTML（超文本标记语言）和CSS（层叠样式表）的基础知识。这个教程是为那些对前端开发...
前端入门html和css布局
07-20
在前端开发领域，HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页界面的基础。本文将深入探讨这两个关键技术，并介绍如何利用它们进行有效的页面布局。 首先，HTML是网页内容的结构...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
Web设计与前端开发秘籍：HTML & CSS 设计与构建网站（完整清晰版）
08-05
《Web设计与前端开发秘籍：HTML & CSS 设计与构建网站》是一本深受读者喜爱的高分图书，尤其对于初学者来说，是进入Web设计领域的绝佳起点。这本书以其完整清晰的内容，深入浅出地讲解了HTML和CSS的基础以及高级应用...
前端入门 HTML+css实现静态淘宝
12-23
本教程将带你入门前端开发，通过HTML和CSS来实现一个静态的淘宝页面，帮助你理解这两种语言的基本概念和实际应用。 HTML，全称HyperText Markup Language，是一种标记语言，用于描述网页的内容和结构。在创建静态...
Layui首字母搜索下拉框
02-17
Layui首字母 / 拼音 / 中文 搜索下拉框 只能从第一个字符开始搜索。
css实现表单Select样式美化
05-19
css实现表单Select样式美化css实现表单Select样式美化
关于前端 jsp option 下拉框 标签 selected 选中显示使用
AJunAmzing的博客
10-22 4235
关于前端 jsp option 下拉框 标签 selected 选中显示使用 遇到下拉框在前端界面显示重复和不完全可以解决的办法之一，也最好懂如下： 这里解决的问题是后端将产品对象传到前端 在编辑页面自动显示，下拉框的一些问题 一、selected是什么？ selected 是option 的默认标签 格式： <option name=”“ value="" selected="selected">value</option> 二、使用步骤 1.这里我先公布我写好的selected
前端HTML,CSS(上）
Mr_OO的博客
07-13 423
1.HTML小记， 1. 概述： ​​ <h1></h1>就是标题标签 3. <p></p>是段落标签。 4. 网页上那张小女生的图片，由img标签来完成的， 它在网页上的代码写成<img src="1.jpg"> 5.html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签...
前端 select 标签如何创建下拉菜单？
官方推荐
08-07 4465
前端 select 标签如何创建下拉菜单？
Vue select的使用以及select设置默认选中，element select联动不能选择问题、el-select 多选设置默认选中、el-select获取选中的文字label
林中明月间丶
05-05 1万+
https://blog.csdn.net/weixin_41056945/article/details/92382436 https://blog.csdn.net/u014717572/article/details/83868192 option 选项内容写在JS中的，通过v-for来遍历的： 通过v-model可以获取到选中的值，如果option中存在value属性，优先获取va...
element-ui 列表 type=“selection“设置默认选中
weixin_46949106的博客
03-07 2046
请求完列表后进行回调操作，this.$refs.table.toggleRowSelection(this.lists[i],true) 是官网中给出的方法，第一个参数是需要被勾选的行组成的列表，第二个参数为true，必须要传。这里需要注意的是el-table一定要有ref属性，比如ref=“table”
HTML如何设置select下拉框的默认值？
热门推荐
qq_45750154的博客
07-05 2万+
本篇文章给大家介绍设置select下拉框默认值的方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 我们可以在所需选项上使用“selected”属性来设置select元素的默认值，这是一个布尔属性。 默认情况下，具有“selected”属性的option标签将显示在下拉列表select标签中。 语法： <optionvalue="value"selected>选项名称</option> 示例1：使用selected属性 <!DOCTY..
前端开发－CSS 实现select
fw118958的专栏
06-14 9008
select下拉选择器在前端开发中很长用，但是其样式却受制于浏览器，不通的内核显示不通的效果，特别是在移动端，下拉选择往往不能统一。 实现效果：图片2)代码：<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值