【HTML5+CSS3】超文本标记语言--核心提炼、精心打造
HTML5
CSS样式
CSS: cascading style sheet (美化页面)
内部样式：
<p style="size:50px;color:red;">
外部样式：
<style type="text/css">
p{
size:60px;
color:red;
}
</style>
引用样式：
<link type="text/css" rel="stylesheet" href="样式名字">
背景设置：
background-color-------------------------背景颜色
background:url("路径")--------------------设置背景图片
/*background-image:url(路径)--------------设置背景图片*/
background-repeat------------------------设置图片平铺
background:linear-gradient(渐变方向 颜色1 颜色2)-----设置渐变背景
行设置：
line-height----------------行高
vertical-algin:middle--------------行内垂直居中对齐
超链接：
text-decoration------------不显示下划线
color----------------------颜色
a:hover{color:"red"}-------悬停时的颜色
a:link{color:“red"}--------没有点击过的颜色
a:visited{color:"red“}----点击过的颜色
a:active:{color:red;}-----鼠标点击但不松开时的颜色
文本、字体：
---字体样式
font-size------------------------字体大小
/*px:像素 pt:磅 磅大一点*/
font-family----------------------字体类型
font-weight----------------------字体加粗
font-style-----------------------字体倾斜
---文本样式
text-algin-----------------------文本对齐方式
color-----------------------------颜色
letter-spacing--------------------字符间距
line-height------------------------行高
text-shadow:左或右 上或下 模糊程度 颜色--------设置字体阴影效果
/*20px -1px 5px red
表格：
border-collapse-----------------------设置边框重叠部分只显示一次
border:边框的宽度 边框的颜色 边框的风格----设置边框样式
//dashed----(虚线边框)
border-radius-------------------------设置圆角边框
border-(p/bottom/left/right-color)---设置边框颜色
图片设置：
filter: opacity(30%)----------------设置图片透明度
CSS background-attachment - 百度百科
查看更多内容
CSS background-attachment 是css的一种属性。属性设置背景图像是否固定或者随着页面的其余部分滚动，所有浏览器都支持
设置居中
第一章
1、程序的分类
------------程序按架构的方式可以分为两类：
1、C/S架构
c:client(客户端)
s:server(服务器端)
2、B/S架构
b:Browser(浏览器)
s:server(服务器端)
C/S应用：指客户端/服务器端架构方式
特点：1、它的客户端是一个独立的应用程序
2、它的应用范围相对较小，一般主要应用局域网范围
3、它的安全性相对较高
4、维护成本高
B/S应用：指浏览器/服务器端架构方式
特点：1、它的客户端不需要安全程序，一个普通浏览器就可作为客户端
2、它的应用范围较大，主要用于互联网 3、它的安全性相对较低
4、普通浏览器没有维护成本，只需要升级服务器端即可
-----------------学习的方向基于B/S架构模式
2、web应用程序
基于网页的应用程序，我们称为：“web程序”
1、*.htm
它是用于兼容一些较老的浏览器，例如：IE5、IE6
2、*.html（主推）
它不能兼容一些低版本的IE浏览器
html：超文本标记语言
作用：可以通过一组标记形成网页中的各种控件，呈现界面给用户
1、静态web程序（web前端）
特点：只涉及一些静态页面操作（html\css\js\bootstrap\jquery）,不涉及后台交互
2、动态web程序
特点：前后台交互，与服务器交互
3、VS code软件使用
快速生成键：shift+1
快速运行：alt+b
3、基本语法
<!DOCTYPE html>-------------用于声明当前html的版本信息（h4/h5，当前是h5）
<html lang="en">------------开始标签
<head>----------------------网页的头部，一般用于设置的网页基本信息
<meta charset="UTF-8">----------设置当前页面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>-------------------------网页主体
</body>
</html>---------------------结束标签
4、(标记)标签
html的标签按是否自动换行分为两种：
1、块级标签
特点：会自动换行
1、普通块级标签：它主要用于包含文本
<p></p>-----------段落标签，一个标签就是一个段落
<HR>--------------水平线标签
size:大小
align:对齐方式
left:左
center:中间
right:右
color:颜色
10px:像素大小
width:宽度
high:高度
<H1>..<H6>----------标题标签
2、容器块级标签：不仅包含文本，也可以包含其他标签
`1`<ol>----------------有序列表(快捷方式：ol>li{用户$}*5)
<ol>
<li></li>
<li></li>
</ol>
`2`<ul>----------------无序列表（每个列表项前面显示小圆点）
`3`<dl>----------------定义列表(描述图片信息)
<dl>
<dt>
<img src="a.jgp">
</dt>
<dd> </dd>
</dl>
`4`<form>--------------表单(它是块级会自动换行，但包含的标签不会)
<form action="用于指定提交的数据交到哪里处理" method="提交方式">
文本框：<input type="text" name="name">--可以接受输入内容
-----required placeholder="请输入用户名"
密码框：<input type="password" name="pwd">
下拉列表：<select name="age">
<option value="10">10</option>
<option value="20" selected："默认选中">20</option>
<option value="30">30</option>
</select>
单选按钮：<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
<input type="submit" value="按钮">
-------要形成单选，name的值必须相同；checked表示默认选中
复选按钮：<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="java">net
<input type="checkbox" name="hobby" value="java">spring
<input type="checkbox" name="hobby" value="java">php
日期：<input type="date" name="bir">
文本域：<textarea rows="5" cols="50" name="remark">
邮件：<input type="email" name="email">
数值：<input type="number" name="score">
文件域：<input type="file" name="file">
隐藏：<input type="hidden" value="隐藏内容">
普通按钮：<input type="button" value="普通按钮"/>
提交按钮：<input type="submit" value="按钮">----会提交表单
重置按钮：<input type="reset" value="按钮">
</form>
<br>----换行标记
`5`<div>---------------层（一个容器，既可以包含文本，也能包含控件）
<div algin="left" 对齐方式>
可以任何东西
</div>
`6`<table>-------------表格（快捷方式：table>tr*2>th*3）
<table border="1" algin='center'>-------表示一个表格
<caption>这是一个表格</caption>---表格标题，会居中显示
<therd>-------表示表格的头部
<tr>-------------------------表示表格中的一行数据
<Th>编号</Th>-------------表示标题列
<Th>姓名</Th>
<Th>成绩</Th>
</tr>
</therd>
<tbody>------表示表格的主体部分
<tr>
<td>1</td>----------------表示普通列
<td>jack</td>
<td>100</td>
</tr>
</tbody>
</table>
2、行级标签
特点：不会自动换行
1、img图片标签
<img src="8.jpg" title="鼠标悬停提示信息 "alt="图片无法加载时提示信息">
2.span面板标签
<span>
<p>什么都可以放</p>
</span>
与div的区别：
*、div是块级标签，会自动换行，span是一个行级标签，不会换行
*、div会占满一整行宽度，span是包含多少内容就占多少宽度
3、A超链接标签
*、跳转到指定的页面
<a href="http://www.baidu.com" target="_self">网易</a>--当前页面会被替换掉
<a href="http://www.baidu.com" target="_blank">网易</a>--显示新的空白页面
*、跳转到内部页面
<a href="index.html target="_blank">首页</a>
*、跳转到指定
<a id="1">段落一</a>-----创建锚标记
<a href="#1">跳转到段落一</a>-----跳转到指定锚标记上
5、表格的合并
1、跨行合并 rowspan
跨两列
2、跨列合并 colspan
跨两行
6、表格的嵌套
<table width="60%" border="1" align="center">
<tr >
<td>
<table width="60%" border="1" align="center">
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
</table>
</td>
<td>1</td>
</tr>
</table>
第二章
html
常用标签：
<b></b>------------------------------加粗标签
<font></fong>------------------------字体标签
<i></i>*-----------------------------字体倾斜
<u></u>------------------------------带下划线
<center></center>--------------------居中标签
<marquee>----------------------------字体滚动
转义字符：
------------------------------空格
<---------------------------------”<“符号
©--------------------------------版权符号
¥--------------------------------人民币
预定义格式：
<pre></pre>-------------------------怎么排版就怎么输出
音频、视频
视频：
<video width="320" height="240" controls>
<source src="" type="video/mp4">
</video>
音频：
<audio controls>
<source src="" type="video/mp3">
</audio>
内联框架：
**内联框架：**在一个窗体中包含多个页面
<iframe name="top" src="页面名字1.html" frameborder="0px">
<hr>
<iframe name="bottom" src="页面名字2.html" frameborder="0px">
超链接跳转：
targent="_parent"-------------------让内联窗体中整个父窗体跳转
targent="内联框架的name名"------------指定跳转到指定区域显示
targent="_self"-------------------当前页面会被替换
targent="_blank"-------------------打开新的页面
CSS选择器：
1、基本选择器
**1、id选择器：**根据id名获得一个控件
<style>
#控件的id名称{
color:red;
}
</style>
2、类选择器：根据指定的名称，选择一组控件
<style>
.abc{
color:red;
}
</style>
<div class="abc"></div>
**3、元素(标签)选择器：**用于根据控件的类型获得一组控件
<style>
div{//选择所有div
color:red;
}
</style>
优先级：
ID选择器>类选择器>标签选择器
2、扩展选择器
1、并集选择器
<style>
/*同时选择多个控件 class # id 都能选*/
选择器1，选择器2，选择器3{
color:red;
}
</style>
2、全局选择器
<style>
/*选择页面上所有的控件*/
*{
color：grend;//应用到所有文件
}
</style>
3、后代选择器
<style>
/*获得指定元素下包含的所有指定元素后代*/
父元素 子元素{
}
#mycss div{//获得id名为mycss的控件下包含的所有div
}
</style>
4、父级选择器
<style>
/*选择父级为指定元素的子元素*/
父元素>子元素{
}
#mydiv>div{//选择父元素的id名为mydiv的子元素
}
</style>
5、属性选择器
<style>
/*查找包含指定属性的元素*/
[href]{//选择所有包含href属性的控件
color:red;
}
[href=‘china’]{//选择所有包含href属性的控件,并且属性值为#的
color:red;
}
[href^=‘c’]{//选择所有包含href属性的控件,并且以c开头
color:red;
}
</style>
6、平辈相邻元素选择器
<style>
/*获得指定元素之后的某一个特定的平辈且相邻的元素*/
指定元素+特定的元素{
}
#mydiv+div{//相邻平辈元素选择器
color:red;
}
</style>
第三者
列表样式：
list-style:none-------------------/*去掉列表小圆点
decimal----------------/*改成数值
square-----------------/*改成方块
circle-----------------/*改为空心圆
浮动样式：
float：left----------------------/*左浮动
clear:both-----------------------/*清除浮动
定位样式：
1、绝对定位：absolute
position:absolute-----------/*绝对定位
top:100px;
bottom:100px;
/*1、它是从当前父容器的左上角开始*/
/*2、如果当前父容器中有多个组件都采用绝对定位，则都是会从左上角开始，要注意这种情况可能会出现组件重叠的问题*/
2、相对定位：relative
position:relative;--------/*相对定位
top:100px;
left:100px;
/*它是从控件当前位置开始*/
3、固定定位：fixed
position:fixed;-----------/*固定定位
top:100px;
left:100px;
/*通过坐标，固定控件的位置*/
透明度：
opacity-------------------/*透明度
opacity:0.1---------------/*值越小能见度越低
动画：
transfoem:rotate(30deg)-----------------/*倾斜角度
transition:2s---------------------------/*过渡时间
盒子模型：
小盒子到大盒子边界的距离，称为外边距（margin）
margin:10px------------------------------均为10px
大盒子到小盒子的距离，称为内边距（padding）
padding:50px 100px 100px 80px;-----------上 右 下 左
padding：100px 80px-----------------------上下 左右
padding：80px-----------------------------均为80px
margin与padding区别：
用margin调整距离，大盒子尺寸不变，用padding调整距离大盒子尺寸发生改变(box-sizing:border-box/设置该属性尺寸就不会变/）
推荐使用情况：
1、一般设置边框与包含内容之间的距离时，使用内边距调整
2、一般设置边框与边框之间的距离时，使用外边距调整
上一篇： 117. web前端
下一篇： 基于ssm基于HTM