总结01-前端基础01-（2.13-2.17）

最新推荐文章于 2024-08-12 22:06:26 发布

weixin_51545492

最新推荐文章于 2024-08-12 22:06:26 发布

阅读量68

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_51545492/article/details/129109776

版权

HTML

一、html结构

<html>
    <head>  头标签
        <meta charset="utf-8">   页面编码格式
        <title>窗口标题</title>
     </head>
     <body>
    内容标签等
     <body>
</html>

二、文本标签

1、标题标签： h1-h6:从大到小。<h1> 文本 </h1>

 2、<hr/> ：水平线标签，效果为分割线，分割前后两端内容

3、段落标签：<p> 内容</p>。内容前后两端内容自动换行

4、换行标签<br/>
5、字体滚动标签: marquee。<marquee behavior=“xx” />属性如下：

（1） behavior=“xx”  滚动方式。slide:滚动到某一边停止。scroll:穿梭滚动。alternate:来回滚动

（2）scrollamount="xx"  滚动速度。正整数值，值越大,速度越快

（3）direction="xx"   方向。默认值 left ：从右到左、right:从左到右、down:上到下、up:下到上

6、bgcolor="xx"  设置背景色

7、 <blockquote> 文本内容</blockquote> 文本内容进行首行缩进

8、上标标签：<sup>XX</sup> 
9、下标标签：<sub>XX</sub>原样输出标签：
10、特殊转义字符：
&copy--- "©"   版权所有
&re----"®"  注册商标
&nbsp;代表一个空格 
&ensp;代表两个空格
11、原样输出标签： <pre>XX </pre> 按照文本内容原样输出
12、设置字体加粗标签：
<strong>XX</strong>---对字体加粗，没有语义的强调
 <b>XX</b>---有语义的强调
 13、斜体标签：
  <em>XX</em>：斜体，没有语义的强调
  <i>XX</i>：斜体，没有语义的强调
14、字体标签：<font color="XX" >文本</font>。属性如下：
color="XX"：字体颜色
size="XX"  字体大小

三、列表标签

1、无序列表
<ul >
    <li>内容</li>
</ul>
无序列表type属性：<ul type="XX">
type="disc" ：小黑圆圈
type="circle":空心原点
type="square":小正方形

2、有序列表
<ol >
    <li>内容</li>
</ol>
有序列表type属性： <ol type="XX">
type="1":数字顺序排列
type="A"：字母顺序排列

3、列表分类
<dl>  ---定义列表
     <dt>列表项的分类</dt>  
     <dd>具体列表内容1</dd>
     <dd>具体列表内容2</dd>
     <dd>具体列表内容3</dd>
 </dl>

四、超链接标签

1、a 标签
<a href="跳转地址" target="XX"> 文本</a>
属性：target---跳转链接打开方式
（1）target= "_blank":新窗口打开
（2）target = "_self" :当前窗口打开，默认
2、锚点
在同一个页面下使用步骤：
（1）打锚点  <a name = "锚点名称"> < a/>
（2)跳转链接: <a href = "#锚点名称"> 文本  <a/>
在不同页面下使用步骤：
（1）打锚点  <a name = "锚点名称"> < a/>
（2）另一页面跳转链接：<a href = "另一页面地址#锚点名称"> 文本  <a/>

五、图像标签


一、图片
<img  src="图像地址" />  ---一般存放在img文件中，使用相对路径
属性：   <img  width="XX" />
1、width = "10px" /  height= "10px"   ---照片宽度、高度。  width = "100%" ---铺满
2、title="文本"   ---鼠标悬停在图片上时提示的文本文字
3、alt="文本"    ---图片加载失败时提示的文字

4、align="xx" ---图片在浏览器中对其方式
（1）align="left"  ---左对齐，默认
（2）align="center"  ---居中
（3）align="left"  ---右对齐

二、背景图片
<body background="图片地址">   ---一般存放在img文件中，使用相对路径

注意事项:超链接标签的href属性以及图像标签的src属性="url地址"都会进行加载(加载url地址,如果是服务器地址,就需要向服务器再次发送请求)

六、html表格

格式：
<body>
    <table >
<caption>文本</caption> ---表格上标题
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr >
            <td>张三</td>         
            <td>19</td>
        </tr>   
    </table>
    </body>
1、table：列表标签
table属性：
（1）<table border="1px">:表格边框线粗细

（2）<table align="left">：表格在浏览器中对齐的位置
left ---浏览器上方左对齐，默认
center ---浏览器上方居中对齐
right ---浏览器上方右对齐

（3）<table cellspacing="0">：表格边框线和单元格间的空隙
（4）<table bgcolor="red">：表格的背景颜色
（5）<table width/height="10px">：表格宽度、高度

2、<caption>文本</caption>：表格上方的标题
3、tr：行标签。<tr align="center"> ---行内容居中
4、th：行中的第一行表头内容，自动加粗居中

5、td：行中单元格具体内容
td属性：
（1）<td rowspanspan="5">内容</td>：5行进行合并
（2）<td colspan="5">内容</td> 5列进行合并

七、html表单

1、表单标签form格式
<body>
    <form action="server.html" method="post">
    用户名:<input type="text" placeholder="请您输入用户名" name="username" />
            <input type="submit"value="注册">
        </form>
</body>

2、form属性
（1）action：<form action="提交到的服务器地址url">
（2）<form method="post">提交方式post/gest
（3）<input type="submit"value="注册">：注册按钮

3、表单项
（1）type="hidden"：隐藏域，(页面中没有任何效果,可以提交数据)
<input type="hidden" name="id" value="id01" />
（2）type="text" ：文本输入框
用户名:<input type="text" name="username" placeholder="请输入用户名" />
（3）type="password" ：密码输入框
密码:<input type="password" name="pwd" placeholder="请输入密码" />
placheoder：文本框提示信息
（4）type="radio" ：单选按钮，指定同一个name,必须只能选一个
<input type="radio" name="sex"  value = "0"/>男
<input type="radio" name="sex"  value = "1"/>女
（5）type="checkbox"：复选框，选择多个内容，必须指定相同的name属性
<input type="checkbox" name="hobby"  value = "0"/>游泳
<input type="checkbox" name="hobby"  value = "1"/>健身
（6）type="date" : 日期组件，2023/2/18
<input type="date" name="birthday" />
（7）type="email"：邮箱组件，必须满足邮箱格式，XXX@XXX
<input type="email" name="Email" /> 
（8）type="file"：文件上传组件
<input type="file" name="txt" />
（9）type="botton"：按钮组件，必须结合value使用
<input type="botton" name="按钮名称" />
（10）type="reset"：重置按钮，将前面已输入的内容清空重置
<input type="reset" name="清空" />
（11）下拉菜单
<select name="籍贯">
    <option>陕西省</option>
    <option>广东省</option>
</select>
（12）文本域
<textarea rows="5" cols="30">
文本内容文本内容
</textarea>
属性：rows，文本域能够写几行。cols：一行能书写的字符个数

（13）超链接嵌套按钮
<a href="跳转地址"> <input type="botton" value="登录">

4、get方式和post方式提交区别
（1)是否提交在地址栏上
    get方式将数据提交到地址栏上的,  action提交的地址url?key1=value1&key2=value2....(浏览器默认get提交)
    post提交方式,不会将数据提交到地址栏上,在浏览器(F12--进入调试器)--->"网络"里面的负载 可以看到表单提交的数据 (post提交针对中文会出现乱码!)
（2)是否适合私密数据提交
    get提交方式,相对post来说不安全,地址栏是可以直接看到明文的敏感数据
    post提交方式,相对get来说安全,隐私数据可以看到的
      get/post提交的数据(密码等等)----加密的!   md5加密(信息摘要算法) "123456"   + 加盐 "qianfeng" 保证不会被破解
3)提交数据大小是否有限制
    get提交方式,在地址栏上提交数据,提交数据大小有限制!
    post提交方式,是在浏览器中  网络中的请求头后面的负载里面可以直接不断去提交数据,没有大小限制

CSS

一、css概念

CSS:层叠样式表 Cascading Style Sheet。通过CSS给页面添加修饰效果

二、给标签添加样式使用方式

1、行内样式
<body>
    <a href="XXX" style="color: red; font-size: 25px; text-decoration: none;">超链接</a>
    </body>
style="样式属性名称1：样式值1；样式属性名称2：样式值2；..."
每一个html标签都有属性style（样式），一次只能控制一个标签。适用于在局部位置设置某个标签样式

2、内联样式（css内部方式）
<head>
    <meta charset="utf-8">
    <title>XXX</title>
    <style>
        常用标签名称(a){  
        样式属性名称1:值1;
        样式属性名称2:值2;
        ...
        (color:orange)
        }
    </style>
</head>
<body>
<a href="#">超链接</a> 
</body>
弊端：html标签和css代码混合使用，不利于后期项目维护
3、外联方式(CSS外部样式)
（1）<head>
        xxx
    <link href="css文件地址" rel="stylesheet" />
    </head>
（2）<head>
        <style>
            @import url("css文件路径");
        </style>    
</head>

1）在css文件夹中新建一个.calss文件
2）使用  css选择器{   
        样式属性名称1:值1;
        样式属性名称2:值2;
        ...
        }
3)在当前页面导入css文件
rel="stylesheet"  ---固定格式，必须写,"关联样式库中样式"
4、在当前html页面中导入css样式， 在head标题体中
 （1） <link href="css/xx.css文件" rel="stylesheet" />
 （2）  <style>
            @import url("css/xx.css文件")
        </style>

三、CSS选择器

优先级： id选择器 > class类选择器 > 标签名称选择器

1、标签名称选择器

标签名称{
    样式名称1：值1 ;
    样式名称2：值2 ;
}
<style>
        div{
        color: skyblue;
        font-size: 20px;
            }
  </style>

2、class（类）选择器

    .class属性值{
        样式名称1：值1 ;
        样式名称2：值2 ;
        }
<style> 
        .class01{
            color: orange;
            font-size: 30px;
            } 
</style>

3、id选择器

    #id属性值{
        样式名称1：值1 ;
        样式名称2：值2 ;
        }
<style> 
    #id01{
        color: green;
        font-size: 35px; 
        }
</style>    
在标签中指定id属性="id值"(不能以数字开头,字母开头)
id属性值在同一个html页面中,必须是 "唯一的"

4、子元素选择器

选择器1 选择器2{
        样式名称1：值1 ;
        样式名称2：值2 ;
}
选择器2选中的标签是选择器1选中标签的子标签

5、并集选择器

选择器1,选择器2,选择器3....{
    样式名称1：值1 ;
    样式名称2：值2 ;
            }

6、伪类选择器

1、标签的四种状态：
(1)、 link：鼠标没有访问标签的状态
(2)、 hover：鼠标经过这个标签的状态
(3)、 active：鼠标点击且没有松开的状态
(4)、 visited：鼠标已经点击访问过的状态

visited升到放在link之后才能循环使用
伪类名称对大小写不敏感

2、伪类选择器格式
选择器名称(标签名称/class/id):状态名称{
                样式名称:值;
                ...
                ...
            }

<style>
    a:link{
        color: red;
        font-size: 20px;
          }
<body>
        <a href="XXX">文本</a>
    </body>

四、CSS背景样式

1、CSS背景格式

<head>
<style>
    body(标签选择）{
         background(背景属性): 背景颜色 图片文件地址 背景图片是否重复 背景图片起始位置 ;
        }
</style>
</head>
背景的简写属性:
    background:background-color background-image background-repeat backgound-position;
    示范   background: darkgray url(img/index_right.jpg) no-repeat top center;
必须严格按照顺序

2、CSS背景属性

1、background-color：背景颜色
2、background-image: url(图片文件地址)
3、background-repeat：背景图片是否重复，如何重复
（1）background-repeat，默认，图片尺寸达不到当前屏幕分辨率，x轴/y轴都重复
（2）background-repeat-x：x轴重复
（3）background-repeat-y：y轴重复
（4）background-no-repeat:不重复
4、background-attachment:背景附着: 设置fixed 固定,图片不会随着页面滚动而滚动
5、background-position:设置背景图像的起始位置,默认左上对齐  
    top  left  
    center  center
    bottom  right
 background: red url(xxx) no-repeat top center

五、CSS文本样式

<head>
 <style>
    选择器{
        样式1：值1；
        样式2：值2；
        }
         </style>
</head>
1、文本颜色：color
2、文本对齐方式:text-align
（1）tetx-align：left---左对齐，默认
（2）text-align：center---居中
（3）text-align：right---右对齐
3、文本装饰:text-decoration
text-decoration：onoe---删除链接的下划线
text-decoration：underline---设置下划线
text-decoration：voerline---上划线
text-decoration：line-through---中划线
4、文本字符间距
（1）letter-spacing：10px
（2）word-spacing：20px     两个字组成一个词
5、大小写转换：text-transform
text-transform：uppercase ---转换成大写字母
text-transform：lowercase ---转换成小写字母
6、文本缩进 textt-indent：10px  ---指定文本第一行缩进
7、行高 text-height：20px

六、CSS字体样式

<head>
 <style>
    选择器{
        样式1：值1；
        样式2：值2；
        }
         </style>
</head>
1、字体格式  font-family=“黑体”
2、字体类型  font-style
（1）font-style：normal  默认字体类型
（2）font-style：italic  斜体
（3）font-style：oblique  斜体
3、字体粗细  font-weight：10px     bold：等价于700
4、字体大小 font-size：20px

font的简写
font：字体类型 字体粗细 字体大小 字体格式   ---按顺序
font：italic bold 20px “仿宋”

七、CSS边框样式

1、边框颜色 
（1）border-top-color：上边框颜色
（2）border-bottom-color：底边框颜色
（3）border-left-color：左边框颜色
（4）border-right-color：右边框颜色
2、边框宽度 
（1）border-top-width：上边框宽度
（2）border-bottom-width：底边框宽度
（3）border-left-width：左边框宽度
（4）border-right-width：右边框宽度
3、边框样式
（1）border-top-style：上边框样式
（2）border-bottom-style：底边框样式
（3）border-left-style：左边框样式
（4）border-right-style：右边框样式

边框样式值：solid（单实线）、double（双实线）、dashed（虚线）、dotted（点）

border的简写属性
border：边框宽度 边框样式（必须有） 边框颜色  ---按顺序
border：10px solid red

八、CCS列表样式

一、无序列表
<style> 
    ul{
    }       
     ul li{
    }
</style>
1、列表标记类型
（1）list-style-type：none   ---去掉列表项前面的标记
（2）list-style-type：square   ---小黑正方形
（3）list-style-type：circle   ---空心圆点
（4）list-style-type：disc  ---小黑圆圈，默认
2、将图片指定为列表标记项   list-style-image
list-style-image；url（图片地址）
3、display-inline   设置到同一行上
4、border-collapse 属性设置是否将表格边框折叠为单一边框：  collapse:合并

九、盒子模型

概念：
（1）将任何标签都看成盒子,整个页面布局大体方向先使用div将内容包裹起来,形成 "层级" ,一个页面分成了很多块。给div加入id/class等选择器,通过css样式属性精准控制!
（2块级元素:
        div 占一行标签
        h1-h6 占一行内容
 （3行级元素:
        <br/> <span> 
（4）将html页面中任何标签 看成一个"盒子"
    容量:width/height
    厚度: 边框 border
    内边距:padding  盒子的内边距: 边框和内容之间的距离(上右下左)
    外边距:margin  盒子和盒子之间的距离:通过外边距让整个盒子进行移动!
<head>
         <link href="css文件" rel="stylesheet" />   ---导入外部css样式
</head>
<body>
    <div id="formDiv">
        <form>
        <div id="userDiv">
                <label for="username">用户名</label>
                <input type="text" id="username" placeholder="请输入用户名" />
                /* label元素和input输入元素是一个表单组，
                able里面for必须和input标签中id一致*/
        </div>
        <div id="btnDiv">
                <input  id="register" type="submit" value="注册" />
        </div>
    </div>
</body>

十、框架标签

概念：
框架标签:frame,一个frame包含一个html页面
<frame src="链接到的html页面地址" name="当前框架名称" />
如果整个页面结构并非一个html组成,而是两个或者两个以上的html页面组成,需要使用框架集frameset

一、框架
frame:框架标签。
         src="链接到html页面地址"
         name="给框架标签起名称"

frameset框架集。不能和body共存
<frameset rows="20%,*">         *:代表剩下的百分比    20%就是头部页面 
                                rows属性:由上而下划分,每一个部分所占的权重百分比
        <frame src="01_header.html" />    ---链接头部html页面地址
   <frameset cols="15%,*">      *:代表剩下的百分比  15%是左边菜单页，剩下为中间主页
                                   cols属性:由左而右划分,每一个部分所占的权重百分比
        <frame src="02_menu.html" />    ---链接菜单html页面地址
        <frame src="03_main.html" name="main" />    
        超链接的target打开方式。如果在框架标签中使用,target也可以指定在哪个一个frame中打开，需要和frame标签中name属性值一致!
    </frameset>
</frameset>
二、菜单页面-menu
<body>
    <ul>
        <li>
            <a href="student_table.html" target="main">查询所有学生</a>
超链接的target打开方式，如果在框架标签中使用,target也可以指定在哪个一个frame中打开需要和frame标签中name属性值一致!
        </li>
        <li>
            <a href="../01_格式优雅的表单.html" target="main">教师管理</a>
        </li>
    </ul>
</body>
三、中间主页面-main
四、头部页面-header

十一、框架

一、使用方式
1)将图标库的css文件夹和font文件夹放在前端项目下
2)将boostrap前端框架这里面所有css文件夹的内容以及font文件夹的放在当前项目下
3)首先页面中导入boostrap全局样式boostraom. min.css
4)在head标题体中导入第三方提供的 font-awesome.min.css图标样式
二、样例
（1）
<head>
         导入css样式
         <link href="../css/bootstrap.min.css" rel="stylesheet" />
         <link href="../css/font-awesome.min.css" rel="stylesheet" />
    </head>
<body>
    <div>
        <a  href="../01_个人中心.html" target="_top">   ---top弹出
            <i class="icon-user icon-large"></i>   
            图标库提供标签 i标签 里面使用class属性="icon-user" 
        </a>
    </div>
</body>

（2）
<head>
    <title>学生信息表</title>
        <style>
            @import url("../css/bootstrap.min.css");   
            ----导入前端框架boostrap提供css样式库 import引入----
        </style>
</head>
<body>
    <table class="table table-striped table-bordered table-hover">
        <tr>
                <th>姓名</th>
                <th>操作</th>
        </tr>
        <tr>
                <td>高圆圆</td
                <td>
                    <input type="button" class="btn btn-primary" value="修改" />
                    <input type="button" class="btn btn-danger" value="删除" />
                        
                        boostrap提供按钮样式 
                        class="btn btn-primary" 深蓝色(首选项效果)
                        class="btn btn-danger" 危险图标
                        
                </td
        </tr>       
    </table>
</body>