HTML+CSS

最新推荐文章于 2022-05-28 19:34:44 发布

㈤㈥㈦

最新推荐文章于 2022-05-28 19:34:44 发布

阅读量304

点赞数

分类专栏：前端文章标签： html css

本文链接：https://blog.youkuaiyun.com/weixin_45291606/article/details/104149277

版权

前端专栏收录该内容

16 篇文章

订阅专栏

文章目录

B/S架构详解

* 资源分类：
	1. 静态资源
		* 使用静态网页开发技术发布的资源。
		* 特点：
			1. 所有用户访问，得到的结果是一样的。
			2. 如：文本，图片，音频，视频，HTML，CSS，JavaScript
			3. 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源。
	2. 动态资源：
	 	 * 使用动态网页及时发布资源。
	 	 * 特点：
	 	 	* 所有用户访问，得到的结果可能不一样。
	 	 	* 如：jsp/servlet, php, asp
	 	 	* 如果用户请求的是动态网页，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。
	 * 我们要学习动态资源，必须先学习静态资源
	 * 静态资源：
	 	* HTML：用于搭建基础网页，展示页面的内容。
	 	* CSS：用于美化页面，布局页面。
	 	* JavaScript： 控制页面的元素，让页面有一些动态的效果。

HTML基础

1. 概念：
	* Hyper Text Markup Language 超文本标记语言
		* 超文本：
			* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
		* 标记语言：
			* 由标签构成的语言。<标签名称>  如 html , xml。
			* 标记语言不是编程语言。
2.标签学习：
	1.文件标签：构成html最基本的标签
		* html：html文档的根标签
		* head：头标签。用于指定html文档的一些属性。引入外部的资源
		* title：标题标签。
		* body：体标签
		* <!DOCTYPE html>：html5中定义该文档是html文档
	2.文本标签：和文本有关的标签
		* 注释：<!-- 注释内容 -->
		* <h1> to <h6> ：标题文件标签
			* h1 ~ h6 ：字体大小主键递减
		* <p>：段落标签
		* <hr>：换行标签
			* 属性：
				* color：颜色
				* width：宽度
				* size：高度
				* align：对其方式
					* center：居中
					* left：左对齐
					* right：右对齐
		* <b>：字体加粗
		* <i>：字体斜体
		* <center>：文本居中
		* <front>：字体标签
			* 属性：
				* color：颜色
				* size：大小
				* face：字体
		* 属性定义：
			* color：
				1. 英文单词：red、green、blue
				2. rgb(值1，值2，值3)：值的范围：0~255   如：rgb(0,0,255)
				3. #值1 值2 值3 ： 值的范围：00~FF之间。如：#FF00FF
			* width：
				1. 数值：whdth = '20' ,  数值的单位，默认是px (像素) 
				2. 数值%：表示相对于父元素的比例
	3. 图片标签：<img src="相对路径" 属性列表>
		* 相对路径 ：
			* 以.开头的路径
			 * ./ : 代表当前目录   ./image/1.ipg
			 * ../ : 代表上一级目录
	4. 列表标签：
		* 有序列表：
			<ol 属性列表>
				<li>  </li>
				<li>  </li>
				<li>  </li>
			</ol>
		* 无序列表：
			<ul 属性列表>
				<li> </li>
				<li> </li>
			</ul>  
	5. 链接标签：
		* a：定义一个超链接
			* 属性：
				* href：指定访问资源的URL（统一资源定位符）
				* target：指定打开资源的方式
					* _self：默认值，在当前页面打开
					* _blank：在空白页面打开
	6. div和span：
		* div：每一个div占满一行。块级标签。
		* span：文本信息在一行展示，行内标签，内联标签。
	7. 语义化标签：html5中为了提高程序的可读性，提供了一些标签。(结合css一起使用)
		1. <header>
		2. <footer>		
	9. 表格标签：
		* table：定义表格
			* width：宽度
			* border：边框
			* cellpadding：定义内容和单元格之间的距离。
			* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条。
			* bgcolor：背景色
			* align：对齐方式
		* tr：定义行
			* bgcolor：背景色
			* align：对齐方式
		* td：定义单元格
			* colspan：合并列
			* colspan：合并行
		* th：定义表头单元格
		* <caption>：表格标题
		* <thead>：表示表格的头部分
		* <tbody>：表示表头的体部分
		* <tfoot>：表示表头的脚部分

在这里插入图片描述

HTML进阶

1.表单

* 概念：用于采集用户输入的数据的。用于和服务器进行交互。
* form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。
	* 属性：
		* action：指定提交数据的URL
		* method：指定提交方式
			* 分类：一共7种，2种比较常用
				 get：
						1. 请求参数会在地址栏中显示。会封装到请求行中。
						2. 请求参数大小是有限制的。
						3. 不太安全
				 post： 
				 		1. 请求参数不会在地址栏中显示。会封装在请求体中(Http协议后讲解)
				 		2. 请求参数的大小没有限制
				 		3. 较为安全
	* 表单项中的数据想要被提交：必须制定其name属性
* 表单项标签：
	* input：可以通过type属性值，改变元素展示的样式
		* type属性：
			* text：文本输入框，默认值
				* placeholder : 指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息。
			* password：密码输入框
			* radio：单选框
				* 注意 ：
					1. 想要让多个单选框实现单选效果，则单选框的name属性必须一样。
					2. 一般会给一个单选框提供value属性，指定其被选中后提交的值
					3. checked属性，可以指定默认值
			* checkbox：复选框
				* 注意：
					1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
					2.  checked属性，可以指定默认值
			* file：文件选择框
			* hidden：隐藏域，用于提交一些信息
			* 按钮：
				* submit：提交按钮。可以提交表单
				* button：普通按钮
				* image：图片提交按钮
					* src属性指定图片的路径
		* label：指定输入项的文字描述信息 
			* 注意：
				* label的for属性一般会和 input 的 id 属性对应。如果对应了，则点击label区域，会让input输入框获取焦点。
	* select：下拉列表
		* 子元素：option，指定列表项
	*  textarea：文本域
		* cols：指定列数，每一行有多少个字符
		* rows：默认多少行。

<form action="#" method="get">

    <label for="username" >用户名：</label><input type = "text" name = "username" placeholder="请输入用户名" id="username"><br>
    密码：<input type = "password" name = "password" placeholder="请输入密码"><br>
    性别：<input type="radio" name="gender" value="male" checked="checked"> 男
         <input type="radio" name="gender" value="female"> 女
             <br>
    爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街
    <input type="checkbox" name="hobby" value="Java" checked="checked"> Java
    <input type="checkbox" name="hobby" value="game"> 游戏
    <br>

    文件选择：<input type="file" name="file"><br>
    隐藏域：<input type = "hidden" name="id" value="aaa"><br>

    取色器：<input type="color" name="color"><br>
    生日：<input type="date" name="birthday"><br>
    生日：<input type="date" name="birthday"><br>
    邮箱：<input type="email" name="email" ><br>
    年龄：<input type="number" name="age"><br>

    省份：<select>
            <option value="">--请选择--</option>
            <option value="1">--北京--</option>
            <option value="2">--上海--</option>
            <option value="3">--陕西--</option>
        </select>

    自我描述：
        <textarea cols="5" rows="5"></textarea>

    <br>
    <input type="submit" value="登录">
    <input type="button" value="一个按钮"><br>
    <input type="image" src="img/regbtn.jpg">
</form>

CSS：页面美化和布局控制

1. 概念：Cascading Style Sheets 层叠样式表
	* 层叠：多个样式可以作用在同一个html的元素上，同时生效
2. 好处：
	1. 功能强大
	2. 将内容展现和样式控制分离
		* 降低耦合度。解耦
		* 让分工协作更容易
		* 提高开发效率  
3. CSS的使用：CSS与html结合方式
	1. 内联样式
		* 在标签内使用style属性指定css代码
		* 如：<div style = "color:red;"> hello css </div>
	2. 内部样式
		* 在head标签内，定义style标签，style标签的标签体内容就是css代码
		* 如：
			<style>
		       div{
		            color: blue;
		        }
		    </style>
			 <div>hello css</div>
	3. 外部样式
		1. 定义css资源文件。
		2. 在head标签内，定义link标签，引入外部资源文件
		* 如：
			* a.css文件
				div{
		    		color:green;
				}
			<link rel="stylesheet" href="css/a.css">
			<div>hello css</div>
	* 注意：1，2，3 种方式  css作用范围越来越大
	* 1方式不常用，后期常用2，3
	* 3引用css的格式可以写为：
		<style>
			@import "css/a.css";
		</style>
4. css语法
	* 格式
		选择器{
			属性名1 ：属性值1；
			属性名2 ：属性值2；
			属性名3 ：属性值3；
			......
		}
	* 选择器：筛选具有相似特征的元素
	* 注意：
		* 每一对属性需要使用 ; 隔开，最后一对属性可以不加 ；
5. 选择器
	1. 基础选择器
		1. id选择器：选择具体的id属性值的元素。建议在一个html页面中id值唯一
			* 语法：#id属性值{ }
		2. 元素选择器：选择具有相同标签名称的元素
			* 语法：标签名称{ }
			* 注意：id选择器优先级高于元素选择器
		4. 类选择器：选择具有相同的class属性值的元素。
			* 语法：.class属性值{ }
			* 注意：类选择器优先级高于元素选择器
	2. 扩展选择器：
		1. 选择所有元素：
			* 语法：*{ }
		2. 并集选择器
			* 语法：选择器1,选择器2{ }
		3. 子选择器：筛选选择器1元素下的选择器2元素
			* 语法：选择器1  选择器2{ }
				<style>
					div p{
						color : red ;
					}
				</style>
			<div>
				<p>传智播客</p>
			</div>
		4. 父选择器：
			* 选择器1 > 选择器2{ }
		5. 属性选择器：选择元素名称，属性名=属性值的元素
			* 语法：元素名称[属性名="属性值"]{ }
			input [type='text']{
				border：5px solid;
			}
			<input type="text">
		6.伪类选择器：选择一些元素具有的状态 
			* 语法 ：元素 : 状态{ }
			* 如：标签<a>
				* 状态：
					* link：初始化的状态
					* visited：被访问过的状态
					* active：正在访问的状态
					* hover：鼠标悬浮的状态
7. 属性
	1. 字体、文本
		* font-size：字体大小
		* color：文本颜色
		* text-align：对其方式
		* line-height：行高
	2. 背景
		* background：设置背景颜色，背景图片等
	3. 边框
		* border：设置边框，复合属性
	4. 尺寸
		* width：宽度
		* height：高度
	5. 盒子模型
		* margin：外边距
		* padding：内边距
			* 注意：默认情况下内边距会影响整个盒子的大小
			* 使用 box-sizing : border-box;  设置盒子的属性，让width和height就是最终盒子的大小。 
		* float：浮动
			* left
			* rig

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>

    <style>
    	/*全局设置*/
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        body{
            background: url("img/register_bg.png") no-repeat center;
        }
		
		/*类选择器*/
        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid white;
            background: white;
            /*让div水平居中*/
            margin: auto;
            margin-top: 15px;
        }

        .rg_left{
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }

        .re_left > p:first-child{
            color: #FFD026;
            font-size: 20px;
         }

        .re_left > p:last-child{
            color: #A6A6A6;
            font-size: 20px;
        }

        .rg_center{
            border: 1px solid red;
            float: left;

            width: 600px;

        }

        .rg_right{
            /*border: 1px solid red;*/
            float: right;
            margin: 15px;
        }

        .rg_left > p:first-child{
            color: #FFD026;
            size: 10px;
        }

        .rg_right p a {
            color: pink;
        }

        .td_left{
            width: 100px;
            text-align: right;
            height: 45px;
        }

        .td_right{
            padding-left: 50px;
        }


		/*id选择器*/
        #username,#password,#name,#tel,#email,#birthday,#checkcode{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            /*设置边框圆角*/
            border-radius: 5px;
            padding-left: 10px;
        }

        #checkcode{
            width: 110px;
        }

        #img_check{
            height: 32px;
            vertical-align: middle;
        }

        #btn_sub{
            width: 150px;
            height: 40px;
            background: #FFD026;
            border: 1px solid #FFD026;
        }

    </style>

</head>
<body>
    <div class="rg_layout">
        <div class="rg_left">
            <p class="">新用户注册</p>
            <p>USER REGISTER</p>

        </div>

        <div class="rg_center">
            <div class="rg_from">

                <!--定义表单 form-->
                <form action="#" method="post">
                    <table>
                        <tr>
                            <td class="td_left"><label for="username">用户名</label></td>
                            <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="password">密码</label></td>
                            <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="email">Email</label></td>
                            <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="name">姓名</label></td>
                            <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="tel">手机号</label></td>
                            <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label>性别</label></td>
                            <td class="td_right"><input type="radio" name="gender" value="male"> 男
                                <input type="radio" name="gender" value="female"> 女
                            </td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="birthday">出生日期</label></td>
                            <td class="td_right"><input type="date" name="birthday" id="birthday"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="checkcode">验证码</label></td>
                            <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                                <img id="img_check" src="img/verify_code.jpg">
                            </td>
                        </tr>


                        <tr>
                            <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
                        </tr>
                    </table>


                </form>
            </div>

        </div>

        <div class="rg_right">
            <p>已有账号?<a href="#">立即登录</a></p>

        </div>

    </div>
</body>
</html>