文章目录：
3.1.1 外部样式表(External style sheet)【样式分离-企业常用】
3.1.2 内部/内嵌样式表(Internal style sheet)【样式不分离】
3.1.3 内联样式 (Inline style)【样式不分离】
一：HTML
1.环境
1.运行环境：系统（Windows、linux、unix....）+浏览器（谷歌、火狐、Edge.....）
2.编辑环境：vscode 、HBuilderX、WebStorm、Sublime Text、.Notepad++中文版.、记事本......
也可以选择在线编辑（作为学生学习不建议使用）：在线HTML编辑器、HTML/CSS/JS同步
如果不想安装软件(就用记事本) 第一步：新建记事本 （demo.text） 第二步：写好代码 第三步：另存为网页格式 （demo.html） 第四步：点击运行，会在浏览器打开
2.网页布局
3.HTML大致框架
HTML大致框架
<!-- 声明:让浏览器能够正确地渲染页面 --> <!DOCTYPE html> <html> <!--头--> <head> <!--编码格式--> <meta charset="utf-8"> <!--控制移动设备上页面显示的视口（viewport）的大小和缩放比例 （可不写 写上更好）--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--针对 Internet Explorer 浏览器，确保网站在不同浏览器中都有一致的显示效果 （可不写 写上更好）--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--标题--> <title></title> <!--CSS样式：描述了网页的布局--> <style> .......... </style> <!--CSS样式--> <!--JS样式：描述了网页的布局--> <script> .......... </script> <!--JS样式--> </head> <!--头--> <!--身体--> <body> <!--JS(JavaScript)：控制了网页的行为--> <script> .......... </script> <!--JS--> <h2>标签</h2> <p>文本</p> <div class="dropdown">盒子</div> <button class="dropbtn">按钮</button> <a href="http://www.baidu.com">超链接</a> ........ </body> <!--身体--> </html>简单模板【必须要记下来】
<html> <head> <title></title> <!--CSS--> <style> </style> <!--JS--> <script> </script> </head> <body> </body> </html>
4.HTML网页标签集合
1.结构标签 <!doctype>：定义文档类型 <html>：定义 HTML 文档的根标签 <head>：用于指定文档头部的信息，如字符集、标题、样式链接等 <body>：包含了页面的主体内容 <nav>：定义导航链接、菜单等结构 <header>：定义头部内容 <footer>：定义底部内容 <aside>：定义页面侧边栏的内容 <main>：规定文档的主要内容，只能出现一次，通常是指网页主体内容部分 <section>：将文档内容分割成独立的部分，例如文章中按章节划分的部分 <article>：将文档内部结构分割成一片独立完整的内容区域，例如博客或新闻文章 <aside>：定义网页中的侧边栏内容 <basefont>：定义页面中文本的默认字体 2.基本标签 <p>：定义段落。 <a>：创建文本超链接和锚点 <img>：插入图片 <ul>：定义以圆点方式显示的列表 <ol>：定义以数字方式显示的列表 <li>：定义列表中的一个项目 <br>：换行标签 <hr>：添加分隔线 <table>：创建 HTML 表格 <caption>：定义表格标题 <tr>（table row）：它是一个表格中的行元素。用于创建表格中的一行 <th>（table heading）：它是表格的表头单元格元素，用于定义表格的标题或头部。通常在表格的第一行中使用<th>元素 <td>（table data）：它是表格的数据单元格元素，用于定义每个单元格中的数据。<td>元素通常出现在<tr>元素中 <form>：定义一个表单，用于用户输入 <input>：定义表单中的数据域（字段），比如输入框、单选框或复选框等 <output>：定义输出的一些类型 <label>：定义 input 元素的标注（相当于 input 标题） <button>：定义按钮 <select>：创建下拉列表框 <option>：定义下拉列表框中某个选项 <dl>：定义列表 <dt>：定义列表的项目 <dd>：定义列表项目的描述 <map>：定义图像映射 3.文本格式化标签 <h1> to <h6>：定义标题，其中 <h1> 是最高级标题，<h6> 是最低级标题 <strong>：定义强调文本，通常以粗体显示 <em>：定义强调文本，通常以斜体显示 <blockquote>：定义块引用，用于引用其他文本 <q>：定义短引用，用于引用内联文本 <cite>：定义引用的来源，常用于引用标题、作者等信息 <code>：定义计算机代码文本 <del>：定义被删除文本 <s>：定义被删除线的文本 <strike>：定义加删除线文本 <u>：定义下划线文本 <b>：定义粗体文本 <i>：定义斜体文本 <big> <font> <center> <dir>：定义大号文本 <small>：定义小号文本 <pre>：定义预格式化文本，通常用于显示代码块，保留空格和换行符 4.多媒体标签 <audio>：定义音频媒体 <video>：定义视频媒体 <source>：定义多媒体资源的来源 <iframe>：定义内联框架，通常用于嵌入其他网页或多媒体 5.表单元素标签 <input>：用于创建各种表单元素，如文本框、单选按钮、复选框等 <textarea>：用于创建多行文本输入框 <select>：定义下拉列表框 <button>：定义按钮 6.其他标签 <div>：用于组织和分组内容，通常与 CSS 一起使用 <span>：用于行内元素的分组和样式 <meta>：定义文档的元信息，如字符集、关键词等 <style>：定义内部样式表 <link>：用于引入外部资源，如样式表、图标等 <script>：用于包含 JavaScript 代码 <noscript>：提供在不支持脚本的情况下显示的替代内容 <meta>：定义文档的元信息，如字符集、关键词等 <menu>：定义命令的菜单/列表 7.HTML5新增标签 <header>：定义文档的头部，通常包含网页的标题、logo、导航等 <footer>：定义文档的底部，通常包含版权信息、联系方式等 <nav>：定义导航链接的容器 <article>：定义独立的、可独自分配的内容，如一篇文章、一段代码等 <section>：定义文档中的一个区域，可以包含一个或多个 <article> <aside>：定义与页面内容相关的内容，通常是侧边栏或者标注 <figure>：用于包裹媒体元素和其相关内容，如图片、图表、代码等 <figcaption>：为 <figure> 元素添加标题 8.语义化标签 <nav>：定义导航链接的容器 <article>：定义独立的、可独自分配的内容 <section>：定义文档中的一个区域 <aside>：定义与页面内容相关的内容 <figure>：用于包裹媒体元素和其相关内容 <time>：定义日期或时间 <mark>：定义文本的高亮部分 9.SVG标签：用于描述二维矢量图形的 XML 标记语言，用于在网页上显示图形和图表 <svg>：定义可缩放矢量图形容器 <circle>：定义圆形 <rect>：定义矩形 <line>：定义直线 <polyline>：定义折线 <polygon>：定义多边形 <path>：定义路径 10.MathML标签：用于在网页上显示数学公式和符号的标记语言 <math>：定义数学公式的根元素 <mi>：定义数学标识符（变量） <mo>：定义数学运算符 <mn>：定义数学数字 <sup>：定义上标文本 <sub>：定义下标文本 <msup>：定义上标 <msub>：定义下标 11.Web Components相关标签 <template>：定义模板，用于存放客户端不渲染的内容，可通过 JavaScript 操作 <slot>：定义插槽，用于在 Web Components 中插入内容
5.常用标签举例
<!DOCTYPE html> <html> <head> <title>页面标题</title> <!-- <meta>：定义元数据，如字符集、关键词和描述 --> <meta charset="UTF-8"> <meta name="description" content="页面描述"> <meta name="keywords" content="关键词1, 关键词2, 关键词3"> <meta name="author" content="作者"> <style> // 样式定义 </style> <!-- 空格 -->   <!-- <link>：用于引入外部资源，如样式表 --> <link rel="stylesheet" href="style.css"> <script> // JavaScript 脚本 </script> </head> <body> <!-- <h1> - <h6>：定义标题，其中<h1>是最高级标题<h6>是最低级标题 --> <h1>这是一个标题</h1> <p>这是一个段落</p> <!-- 文本格式化标签 --> <b>加粗文本</b> <i>斜体文本</i> <u>下划线文本</u> <strong>重要文本</strong> <em>强调文本</em> <mark>标记文本</mark> <small>小号文本</small> <sub>下标文本</sub> <sup>上标文本</sup> <!-- 链接与图像 --> <a href="https://www.baidu.com">链接</a> <img src="image.jpg" alt="图片描述"> <!-- 列表 --> <ul> <li>无序列表项</li> <li>无序列表项</li> </ul> <ol> <li>有序列表项</li> <li>有序列表项</li> </ol> <!-- <table>：定义表格，包含行<tr>、表头<th>和单元格<td> --> <table> <tr> <th>表头单元格</th> <th>表头单元格</th> </tr> <tr> <td>表格数据单元格</td> <td>表格数据单元格</td> </tr> </table> <!-- 表单 --> <form action="/submit" method="post"> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> <br> <label for="password">密码：</label> <input type="password" id="password" name="password" required> <br> <input type="submit" value="提交"> </form> <!-- 多媒体 --> <audio controls> <source src="audio.mp3" type="audio/mp3"> </audio> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> </video> <!-- 这是一个注释 --> <!-- 水平线 --> <hr> <!-- 换行 --> <br> </body> </html>
二：CSS
1.什么是CSS呢？
什么是CSS？ 答：层叠样式表 (Cascading Style Sheets)。就是修饰样式的一种编码规范 扩展：Html5、CSS3、JS的区别和关系 学习顺序 以鲤鱼游泳为例子 Html：骨架 第一步（demo.html） 画鱼的轮廓骨架 CSS：修饰样式 第二步（demo.css） 给鱼上颜色，修饰线条样式，加阴影.... JS：动态 第三步（demo.js） 让鱼游动起来 学习版本也在不断更新（里面有很多功能的丰富化扩展），比如： HTML——>H5 CSS ——>C3
2.瞅瞅CSS代码样式什么样？
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>四川文轩职业技术学院</title> <style> body {background-color:yellow;} h1 {font-size:36pt;} h2 {color:blue;} p {margin-left:50px;} </style> </head> <body> <h1>这个标题设置的大小为 36 pt</h1> <h2>这个标题设置的颜色为蓝色：blue</h2> <p>这个段落的左外边距为 50 像素：50px</p> </body> </html>运行效果展示
3.编码规范
3.1.CSS样式代码写到哪里去哎？ （插入形式）
3.1.1 外部样式表(External style sheet)【样式分离-企业常用】
浏览器Network里面可以查看引入成功
适用于：给很多页面加样式 <link rel="stylesheet" type="text/css" href="style.css"> 浏览器会从文件 style.css 中读到样式声明
demo.html里面代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外部样式表</title> <!-- 外部引用css style --> <link rel="stylesheet" href="style.css"> </head> <body> <h1> 西岭雪山 </h1> </body> </html>style.css里面代码
h1 { color: red; } body { width: 200px; height: 200px; background-color: blue; }
3.1.2 内部/内嵌样式表(Internal style sheet)【样式不分离】
适用于：单个文档需要特殊的样式时 <head> <style> hr {color:sienna;} p {margin-left:20px;} </style> </head>
3.1.3 内联样式 (Inline style)【样式不分离】
使用于：当样式仅需要在一个元素上应用一次时 <p style="color:sienna;margin-left:20px">这是一个段落</p>
优先级： 内联样式>内部样式表>外部样式表
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>内部样式与外部样式</title> <!-- 外部样式 style.css --> <link rel="stylesheet" type="text/css" href="https://static.runoob.com/assets/css/css-howto/style.css"/> <!-- 设置：h3{color:blue;} --> <style type="text/css"> /* 内部样式 */ h3{color:green;} </style> </head> <body> <h3 style="color:sienna;margin-left:20px">显示绿色，是内部样式</h3> </body> </html>运行结果
3.2 声明
就是先打个招呼！
p{color:red;text-align:center;} p { color:red; text-align:center; } 声明 声明范围：大括号 {} 括起来 声明=属性:值 声明总是以分号 ;结束 加样式的形式 空格 font size="5px"; 短横线 font-size:250%;
3.3 注释
根据不同的代码编辑软件和环境而定！
<!--这是个注释--> <!-- --> /*这是个注释*/ /* */ //这是个注释 //
3.4 选择器
| 四大类：基本选择器、复合选择器、伪类选择器、属性选择器 | |||
| 选择器 | 格式 | 作用 | 举例 |
| id选择器 | #id属性值{属性:值} | 匹配特定的id | #sex{font-size:15px;} |
| 类class选择器 | .class属性值{属性:值} | 匹配所有符合的class | .box{windth:800px;} |
| 通用选择器 | *{属性:值} | 匹配所有标签 | *{margin:0px;} |
| 属性/标签选择器 | 标签名{属性:值} | 匹配对应的标签 | p{font-size:14px;} |
3.4.1 块元素选择器{}
p{ }: 为所有 p 元素指定一个样式 .marked{ }: 为所有 class="marked" 的元素指定一个样式 .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式 p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式 ----------------------------------------------------------------------上面是最常用的 后代选择器(以空格 分隔) div p { background-color:yellow; } 子元素选择器(以大于 > 号分隔） div>p { background-color:yellow; } 相邻兄弟选择器（以加号 + 分隔） div+p { background-color:yellow; } 普通兄弟选择器（以波浪号 ～ 分隔） div~p { background-color:yellow; }举例
h1,h2,p { color:green; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>元素选择器</title> <style> body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);} </style> </head> <body> <h1>这是标题 1</h1> <p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p> <p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p> <div class="marked"> <p>这是一个带有标记的段落。</p> </div> </body> </html>
3.4.2 id选择器 " # "
#para1 { text-align:center; color:red; }代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>id 选择器</title> <style> #para1 { text-align:center; color:red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>这个段落不受该样式的影响。</p> </body> </html>运行效果展示
3.4.3 class选择器 " . "
所有 .center {text-align:center;} 特定 p.center {text-align:center;}代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>class选择器</title> <style> p.center { text-align:center; } </style> </head> <body> <h1 class="center">这个标题不受影响</h1> <p class="center">这个段落居中对齐。</p> </body> </html>运行效果展示
3.4.4 通用选择器 " * "
所有设置
*{ color:#ff0000; }
3.4.5 属性选择器
包含标题（title）的所有元素变为蓝色
[title] { color:blue; }标题title='runoob'元素的边框样式
[title=runoob] { border:5px solid green; }包含指定值的title属性的元素
[title~=hello] { color:blue; } <h1 title="hello world">Hello world</h1> <p title="student hello">Hello CSS students!</p>
3.4.6 多个class选择器
多个 class 选择器可以使用空格分开代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>多个 class 选择器可以使用空格分开</title> <style> .center { text-align:center; } .color { color:#ff0000; } </style> </head> <body> <h1 class="center">标题居中</h1> <p class="center color">段落居中，颜色为红色。</p> </body> </html>运行效果展示
4.常用CSS基础语法
4.1 尺寸（了解）
height 设置元素的高度 line-height 设置行高 max-height 设置元素的最大高度 max-width 设置元素的最大宽度 min-height 设置元素的最小高度 min-width 设置元素的最小宽度 width 设置元素的宽度 normal 默认。设置合理的行间距 number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距 length 设置固定的行间距 100px em % 基于当前字体尺寸的百分比行间距 90% ------------------------------------------------------------------------------------------下面是单位换算 常见前端长度单位 1in = 2.54cm = 25.4 mm = 101.6q 英寸（Inch） 厘米（Centimeter） 毫米（Millimeter） 1/4毫米 = 72pt = 6pc 点（Point），大约1/72英寸 派卡（Pica），大约6pt，1/6寸 = 72px 像素（Pixel）,相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的 =4.5em 相对长度单位 1px = 1 / 16em = 0.0625em
4.2 BackGround背景
body {background:#ffffff url('https://www.baidu.com/img/bdlogo.png') no-repeat right top;} 属性值的顺序为： background-color背景颜色 background-image背景图片 background-repeat背景图的重复 background-attachment用于设置背景图像的滚动行为 background-position背景图的位置运行效果
4.2.1 背景颜色
body { background-color:#b0c4de; bgcolor:#b0c4de; }设置颜色方法
方法一：十六进制 如：#FFFFFF：白色 #FF0000：红色 #00FF00：绿色 黑色：#000000 #0000FF：蓝色 #FFFF00：黄色 #00FFFF：青色 #FF00FF：品红色 #C0C0C0：银色 #800080：紫色 #808000：橄榄色 #008000：深绿色 #000080：深蓝色 #808080：灰色 #8000FF：深紫色 #8FBC8F：深橄榄色 #BDB76B：深黄色 #696969：深灰色 #A9A9A9：暗灰色 方法二：RGB 如：R（red）、G（green）和B（blue） 红色rgb(255,0,0) 白色rgb(255,255,255) 黑色rgb(0,0,0) 方法三：颜色名称 如："red" 红色red，橙色orange，黄色yellow，绿色green 蓝色blue，紫色purple，灰色gray，粉色pink 黑色black，白色white，棕色brown
4.2.2 背景图片
body { background-image:url('https://static.runoob.com/images/mix/paper.gif'); } body {background-image:url('https://static.runoob.com/images/mix/bgdesert.jpg');} ------------------------------------------------------------------------------------下面是相关属性样式设置 body { background-image:url('https://static.runoob.com/images/mix/gradient2.png'); background-repeat:repeat-x; 指定如何重复背景图像 repeat：背景图像将向垂直和水平方向重复。这是默认 repeat-x：只有水平位置会重复背景图像 repeat-y：只有垂直位置会重复背景图像 no-repeat：background-image 不会重复 inherit：指定 background-repeat 属性设置应该从父元素继承 background-position:right top; 改变图像在背景中的位置 left top left center left bottom right top right center right bottom center top center center center bottom background-size:80px 60px; 改变图像大小 background-size: 50% 50% background-size: 3em background-size: 12px background-size: auto background-origin:content-box; 指定背景图像的定位区域 padding-box：背景图像填充框的相对位置 border-box：背景图像边界框的相对位置 content-box：背景图像的相对位置的内容框 background-clip:content-box; 指定背景图像的绘画区域 border-box：默认值。背景绘制在边框方框内（剪切成边框方框） padding-box：背景绘制在衬距方框内（剪切成衬距方框） content-box：背景绘制在内容方框内（剪切成内容方框） background-attachment:fixed; 设置背景图像是否固定或者随着页面的其余部分滚动 scroll：背景图片随着页面的滚动而滚动，这是默认的 fixed：背景图片不会随着页面的滚动而滚动 local：背景图片会随着元素内容的滚动而滚动 background-image:url('paper.gif'); 指定要使用的一个或多个背景图像 url('URL')：图像的URL none：无图像背景会显示。这是默认 linear-gradient()：创建一个线性渐变的 "图像"(从上到下) radial-gradient()：用径向渐变创建 "图像"。 (center to edges) repeating-linear-gradient()：创建重复的线性渐变 "图像" repeating-radial-gradient()：创建重复的径向渐变 "图像" }运行效果
4.3 Text文本
color 设置文本颜色 body { color:red; } h1 { color:#00ff00; } p { color:rgb(0,0,255); } direction:rtl; 设置文本方向 ltr：默认。文本方向从左到右 rtl：文本方向从右到左 h1 {letter-spacing:2px} 设置字符间距 px：大小单位 normal：默认。规定字符间没有额外的空间 length：定义字符间的固定空间（允许使用负值） p.small {line-height:90%} 设置行高 %：基于当前字体尺寸的百分比行间距 length：设置固定的行间距 number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距 normal：默认。设置合理的行间距 h1 {text-align:center} 元素设置文本的对齐方式 left：把文本排列到左边。默认值：由浏览器决定 right：把文本排列到右边 center：把文本排列到中间 justify：实现两端对齐文本效果 inherit：规定应该从父元素继承 text-align 属性的值 h1 {text-decoration:overline} 设置文本修饰 none：默认。定义标准的文本 underline：定义文本下的一条线 overline：定义文本上的一条线 line-through：定义穿过文本下的一条线 blink：定义闪烁的文本 p{text-indent:50px;} 缩进元素中文本的首行 length：定义固定的缩进。默认值：0 %：定义基于父元素宽度的百分比的缩进 h1{text-shadow: 2px 2px #ff0000;} 设置文本阴影 text-shadow: h-shadow v-shadow blur color; h-shadow：必需。水平阴影的位置。允许负值 v-shadow：必需。垂直阴影的位置。允许负值 blur：可选。模糊的距离 color：可选。阴影的颜色 h1 {text-transform:uppercase;} 控制元素中的字母 none：默认。定义带有小写字母和大写字母的标准的文本 capitalize：文本中的每个单词以大写字母开头 uppercase：定义仅有大写字母 lowercase：定义无大写字母，仅有小写字母 unicode-bidi:bidi-override; 设置或返回文本是否被重写 unicode-bidi: normal|embed|bidi-override|initial|inherit; normal：默认。不使用附加的嵌入层面 embed：创建一个附加的嵌入层面 bidi-override：创建一个附加的嵌入层面。重新排序取决于 direction 属性 vertical-align:text-top; 设置元素的垂直对齐 baseline：默认。元素放置在父元素的基线上 sub：垂直对齐文本的下标 super：垂直对齐文本的上标 top：把元素的顶端与行中最高元素的顶端对齐 text-top：把元素的顶端与父元素字体的顶端对齐 middle：把此元素放置在父元素的中部 bottom：使元素及其后代元素的底部与整行的底部对齐 text-bottom：把元素的底端与父元素字体的底端对齐 length：将元素升高或降低指定的高度，可以是负数 %：使用 "line-height" 属性的百分比值来排列此元素。允许使用负值 white-space:nowrap; 设置元素中空白的处理方式 normal：默认。空白会被浏览器忽略 pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签 nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止 pre-wrap：保留空白符序列，但是正常地进行换行 pre-line：合并空白符序列，但是保留换行符 word-spacing:30px; 设置字间距 normal：默认。定义单词间的标准空间 length：定义单词间的固定空间
4.4 Fonts字体
p.italic {font-style:italic} 字体样式 normal：默认值。浏览器显示一个标准的字体样式 italic：浏览器会显示一个斜体的字体样式 oblique：浏览器会显示一个倾斜的字体样式 p.thick {font-weight:bold;} 字体粗细 normal：默认值。定义标准的字符 bold：定义粗体字符 bolder：定义更粗的字符 lighter：定义更细的字符 100~900：定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold h1 {font-size:250%} 字体大小 smaller：把 font-size 设置为比父元素更小的尺寸 larger：把 font-size 设置为比父元素更大的尺寸 length：把 font-size 设置为一个固定的值 px em %：把 font-size 设置为基于父元素的一个百分比值 small x-small xx-small medium x-large xx-large p.small {line-height:90%} 字体高度 normal:默认。设置合理的行间距 number:设置数字，此数字会与当前的字体尺寸相乘来设置行间距 length:设置固定的行间距 %:基于当前字体尺寸的百分比行间距
4.5 链接a
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>a链接</title> <style> a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */ </style> </head> <body> <p><b><a href="https://www.baidu.com" target="_blank">这是一个链接</a></b></p> <p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p> <p><b>注意：</b> a:active 必须在 a:hover 之后。</p> </body> </html>target属性
1._blank <a href="example.html" target="_blank">example</a> 浏览器会另开一个新窗口显示example.html文档 2._parent <a href="example.html" target="_parent">example</a> 指向父frameset文档 3._self <a href="example.html" target="_self">example</a> 把文档调入当前页框 4._top <a href="example.html" target="_top">example</a> 去掉所有页框并用document.html取代frame
4.6 列表(有序ol 无序ul)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列表</title> <style> ul {list-style-position: inside;} //inside:列表项目标记放置在文本以内，且环绕文本根据标记对齐 //outside:默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐 ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ul.c{list-style-image:url('https://www.baidu.com/img/bdlogo.png');} ul.d{list-style:square url("https://www.baidu.com/img/bdlogo.png");} ul.e { list-style-type: none; margin: 0; padding: 0; } ol.f {list-style-type:upper-roman;} ol.g {list-style-type:lower-alpha;} </style> </head> <body> <p>无序列表实例:</p> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="c"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="d"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="e"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <p>有序列表实例:</p> <ol class="f"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="g"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body> </html>
4.7 列表dl
<dl>：定义列表
<dt>：定义列表的项目
<dd>：定义列表项目的描述<html> <head> <style> dl { margin: 0; padding: 0; color: #333; /* 修改整个描述列表的文本颜色为深灰色 */ } dt { font-weight: bold; /* 加粗文本 */ margin-top: 10px; /* 上边距为 10px */ color: #007bff; /* 修改术语的文本颜色为蓝色 */ } dd { margin-left: 20px; /* 左侧缩进为 20px */ margin-bottom: 10px; /* 下边距为 10px */ color: #28a745; /* 修改描述的文本颜色为绿色 */ } </style> </head> <body> <h1>列表dl</h1> <dl> <dt>四川</dt> <dd>乐山大佛</dd> <dd>都江堰</dd> <dt>陕西</dt> <dd>华山</dd> <dd>兵马俑</dd> <dt>北京</dt> <dd>圆明园</dd> <dd>长城</dd> </dl> </body> </html>运行效果
4.8 表格Table
<table>：创建 HTML 表格
<caption>：定义表格标题<tr>：它是一个表格中的行元素。用于创建表格中的一行
<th>：定义表格中的表头单元格
<td>：定义表格中的数据单表格边框 table, th, td { border: 1px solid black; } 折叠边框 table { border-collapse:collapse; } 表格宽度和高度 table { width:100%; } th { height:50px; } 表格文字对齐 td { text-align:right; //vertical-align:bottom; } 表格填充 td { padding:15px; } 表格颜色 th { background-color:green; color:white; }例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格Table</title> <style> table, td, th { border:1px solid green; } th { background-color:green; color:white; } </style> </head> <body> <table> <tr> <th>姓名</th> <th>性别</th> <th>分数</th> </tr> <tr> <td>张三</td> <td>男</td> <td>100</td> </tr> <tr> <td>李四</td> <td>女</td> <td>60</td> </tr> <tr> <td>王五</td> <td>男</td> <td>90</td> </tr> <tr> <td>赵六</td> <td>女</td> <td>70</td> </tr> </table> </body> </html>运行效果
4.9 盒子Div
Margin(外边距) - 清除边框外的区域，外边距是透明的 Border(边框) - 围绕在内边距和内容外的边框 Padding(内边距) - 清除内容周围的区域，内边距是透明的 Content(内容) - 盒子的内容，显示文本和图像 Outline(轮廓) - 是绘制于元素周围的一条线，位于边框的外围（紧贴着边框），主要用来突出显示某个元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒子div</title> <style> div { background-color: lightgrey; width: 300px; border: 25px solid green; padding: 25px; margin: 25px; } </style> </head> <body> <div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div> </body> </html>
4.9.1 Border边框
border:5px solid red;①边框宽度 border-width
p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; }②边框-单独设置各边
p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }③边框颜色 border-color
p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; }
4.9.2 Outline轮廓
①设置所有的轮廓属性
p { outline:#00FF00 dotted thick; }②设置轮廓的颜色
p { outline-style:dotted; outline-color:#00ff00; }③设置轮廓的样式
p { outline-style:dotted; }④设置轮廓的宽度
p { outline-style:dotted; outline-width:5px; }
4.9.3 Margin外边框
margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; margin:25px 50px 75px 100px; 上边距为25px 右边距为50px 下边距为75px 左边距为100px margin:25px 50px 75px; 上边距为25px 左右边距为50px 下边距为75px margin:25px 50px; 上下边距为25px 左右边距为50px margin:25px; 所有的4个边距都是25px
4.9.4 Padding内边距填充
padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; padding:25px 50px 75px 100px; 上填充为25px 右填充为50px 下填充为75px 左填充为100px padding:25px 50px 75px; 上填充为25px 左右填充为50px 下填充为75px padding:25px 50px; 上下填充为25px 左右填充为50px padding:25px; 所有的填充都是25px
4.10 块与内联元素
块元素：是一个元素，占用了全部宽度，在前后都是换行符 <h1> <p> <div> 内联元素：只需要必要的宽度，不强制换行 <span> <span style="color: red; font-weight: bold;">特殊样式</span> <a> <a href="https://www.baidu.com">点击百度网站</a>相互转换方法
改内联元素为块元素 ：li{display:inline;} 把span元素作为块元素：span{display:block;} display设置元素的表现形式: block：块级元素，元素会生成一个块级框，占据其父元素的整个宽度 其他元素必须在其下方排列。如 <div>、<p>、<h1>-<h6>以及 <li> 等 inline：行内元素，元素会生成一个行内框，与其他元素排成一行。如 <span>、<a>等 none：元素不会在页面上显示任何框，也不会占据任何空间 inline-block：行内块级元素，元素会生成一个行内框，但元素的宽度和高度像块级元素一样被考虑 flex：弹性盒模型，用于在一维空间（行或列）内布局、对齐和分布空间 grid：二维的弹性盒模型，用于在行和列内布局、对齐和分布空间
4.11 显示隐藏
h1{visibility:hidden;} 隐藏的元素仍需占用与未隐藏之前一样的空间 h1{display:none;} 隐藏的元素不会占用任何空间
4.12 位置相关
4.12.1 Position定位
静态定位:position:static; HTML 元素的默认值，即没有定位，遵循正常的文档流对象 静态定位的元素不会受到 top, bottom, left, right影响 固定定位:position:fixed; 元素的位置相对于浏览器窗口是固定位置 即使窗口是滚动的它也不会移动 相对定位:position:relative left:-20px; 相对定位元素的定位是相对其正常位置 绝对定位:position:absolute; left:100px; top:150px; 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html> 粘性定位: position: -webkit-sticky; position: sticky; top: 0; 基于用户的滚动位置来定位 重叠:z-index:-1; 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面举例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>位置</title> <style> h2 { position:relative; left:100px; top:150px; color:red; } </style> </head> <body> <h2>这是一个绝对定位了的标题</h2> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> <p>用绝对定位,一个元素可以放在页面上的任何位置</p> </body> </html>
4.12.2 Overflow内容溢出显示方式
overflow: visible; visible 默认值。内容不会被修剪，会呈现在元素框之外 hidden 内容会被修剪，并且其余内容是不可见的 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 inherit 规定应该从父元素继承 overflow 属性的值举例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Overflow内容溢出显示方式</title> <style> div { background-color: #eee; width: 200px; height: 50px; border: 1px dotted black; overflow: scroll; } </style> </head> <body> <div id="overflowTest"> <p>这里的文本内容会溢出元素框</p> <p>这里的文本内容会溢出元素框</p> <p>这里的文本内容会溢出元素框</p> </div> </body> </html>
4.12.3 Float浮动
会使元素向左或向右移动，其周围的元素也会重新排列
往往是用于图像，但它在布局时一样非常有用 float:right; float:left; clear:both; //清除浮动举例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动</title> <style> img { float:right; } </style> </head> <body> <p> <img src="https://www.baidu.com/img/bdlogo.png" width="95" height="84" /> 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 </p> </body> </html>
4.12.4 对齐方式
文本居中对齐 text-align: center; text-align:middle; 元素居中对齐，图片居中对齐 margin: auto; 左右对齐 - 使用定位方式 position: absolute; 左右对齐 float: right; 垂直居中对齐 padding: 70px 0; 垂直居中 line-height: 200px; 垂直居中 transform: translate(-50%, -50%);举例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>对齐方式</title> <style> .center { text-align: center; width: 60%; border: 3px solid #73AD21; padding: 10px; } </style> </head> <body> <h2>我是文本</h2> <div class="center"> <p><b>我是文本 </b>看我的位置变化</p> </div> </body> </html>
4.13 导航栏ul
①导航栏=链接列表
<ul> <li><a href="#home">主页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#contact">联系</a></li> <li><a href="#about">关于</a></li> </ul>删除边距和填充 ul { list-style-type: none; margin: 0; padding: 0; }②垂直导航栏
a { display:block; width:60px; }③横向导航栏
li { display:inline; }④默认激活/当前导航条active
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>激活/当前导航条</title> <style> ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li a.active { background-color: #4CAF50; color: white; } li a:hover:not(.active) { background-color: #555; color: white; } </style> </head> <body> <h2>垂直导航条</h2> <p>在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中。</p> <ul> <li><a class="active" href="#home">主页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#contact">联系</a></li> <li><a href="#about">关于</a></li> </ul> </body> </html>⑤全屏高度的固定导航条
ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; height: 100%; /* 全屏高度 */ position: fixed; overflow: auto; /* 如果导航栏选项多，允许滚动 */ }⑥浮动链接宽度相等
li { float:left; } a { display:block; width:60px; }⑦链接右对齐
<ul> <li><a href="#home">主页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#contact">联系</a></li> <li style="float:right"><a class="active" href="#about">关于</a></li> </ul>⑧添加分割线
/* 除了最后一个选项(last-child) 其他的都添加分割线 */ li { border-right: 1px solid #bbb; } li:last-child { border-right: none; }⑨固定导航条
ul { position: fixed; top: 0; width: 100%; }
4.14 下拉菜单dropdown
<!DOCTYPE html> <html> <head> <title>下拉菜单</title> <meta charset="utf-8"> <style> /* 下拉按钮样式 */ .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; /* 用于将鼠标指针改变为手型 */ } /* 容器 <div> - 需要定位下拉内容 */ .dropdown { position: relative; display: inline-block; } /* 下拉内容 (默认隐藏) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } /* 下拉菜单的链接 */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; /* 用于去除文本装饰 */ display: block; } /* 鼠标移上去后修改下拉菜单链接颜色 */ .dropdown-content a:hover {background-color: #f1f1f1} /* 在鼠标移上去后显示下拉菜单 */ .dropdown:hover .dropdown-content { display: block; } /* 当下拉内容显示后修改下拉按钮的背景颜色 */ .dropdown:hover .dropbtn { background-color: #3e8e41; } </style> </head> <body> <h2>下拉菜单</h2> <p>鼠标移动到按钮上打开下拉菜单。</p> <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <div class="dropdown-content"> <a href="http://www.baidu.com">计算机应用1班</a> <a href="http://www.baidu.com">计算机应用2班</a> <a href="http://www.baidu.com">计算机应用3班</a> </div> </div> </body> </html>运行效果
4.15 form表单Input
表单属性
action:将表单中收集的用户数据提交给“表单的处理程序"进行相关的处理! 这个属性可以不写，如果不写，表示将表单的数据提交给当前页面进行处理! method:指表单数据的提交方式取值:getlpost 如果说method属性没有书写 则默认表示表单数据以“get”方式进行提交 get方式：会显示在浏览器的地址栏中 get方式提交的表单数据不安全 get方式只能提交少量的数据 post方式：不会将表单数据显示在浏览器的地址栏中，直接发送给表单的处理程序进行处理，加密 post方式提交的数据相对安全 post方式可以提交大量的数据! type：类型 name：获取输入的值 用途：name属性用于指定表单元素的名称 这个名称在表单提交到服务器时，会被包含在请求的数据中，作为键（key）使用 服务器端脚本（如PHP、Python Flask/Django等）使用这个名称来识别接收到的数据，并据此进行处理 重要性：没有name属性的表单元素在表单提交时，其数据不会被包含在请求中 因此，为了使表单元素的数据能够被服务器接收和处理，必须为每个需要提交的表单元素指定一个唯一的name属性 username=admin password=admin sex=男 value：注册 提交时使用 用途：value属性用于指定表单元素的初始值或用户输入的值（对于某些类型的表单元素 如<input type="text">、<input type="radio">等） 对于不同类型的表单元素，value属性的含义和用法可能有所不同 重要性：value属性决定了表单元素在提交到服务器时的数据值 对于需要用户输入的表单元素（如文本输入框），value属性通常用于设置初始值或预填充值 对于不需要用户输入的表单元素（如单选按钮、复选框），value属性则定义了该元素被选中时，应该发送到服务器的值 <!-- 文本输入框的初始值 --> <input type="text" name="email" value="example@example.com" placeholder="Enter your email"> <!-- 单选按钮的选中值 --> <input type="radio" name="gender" value="male"> Male<br> <input type="radio" name="gender" value="female"> Femaleinput类型（表单控件）
1.文本框(input type="text") ︰用于输入文本信息，如用户名、密码、地址等 ⒉密码框(input type="password") : 与文本框类似，但输入内容会以星号或圆点等形式隐藏 3.单选按钮(input type="radio") :用于在多个选项中选择一个 4.复选框(input type="checkbox") :用于在多个选项中选择多个或全部 5.下拉列表框(select) :提供一个下拉列表供用户选择 6.多行文本框(textarea):可输入多行文本信息，如评论、留言等 7.文件上传框(input type="file") ︰允许用户上传文件到服务器 8.隐藏域(input type="hidden"):不显示在页面上，但可以传递数据给服务器端脚本处理 9.提交按钮(input type="submit")︰将表单数据提交给服务器进行处理 10.重置按钮(input type="reset") ︰清空表单中的所有数据并恢复默认值标签通用属性：每一个标签中都会拥有的属性,叫做通用属性!
class：“我们将class的属性值称之为“类名” 只要是拥有相同的class的属性值，不管是什么标签，我们都可以将其称之为一类! class属性一般多用于CSS中 id：id的属性值必须是唯一的 在一个HTML文档中，ID的属性值必须要唯一!它就好多我们的身份证号码一样! id属性一般多用于JavaScript中 style：它主要是用来设置CSS样式的!
举例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单input</title> </head> <style> input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; /* 更改元素的盒模型计算方式:宽度和高度包括边框和内边距 */ } input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } div { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } </style> <body> <h3>使用 CSS 来渲染 HTML 的表单元素</h3> <div> <form> <label for="fname">姓</label> <input type="text" id="fname" name="firstname" placeholder="Your name.."> <label for="lname">名</label> <input type="text" id="lname" name="lastname" placeholder="Your last name.."> <label for="country">省份</label> <select id="country" name="country"> <option value="australia">成都</option> <option value="canada">绵阳</option> <option value="usa">都江堰</option> </select> <input type="submit" value="按钮"> </form> </div> </body> </html>运行效果
4.16 音视频
4.16.1 音乐audio
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>音频播放器</title> <style> body { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; } .music-player { max-width: 500px; margin: 50px auto; background-color: #f2f2f2; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); overflow: hidden; } .album-cover { position: relative; height: 300px; } .album-cover img { width: 100%; height: 100%; object-fit: cover; /* 内容对象应缩放并填充整个使用的高度和宽度，同时保持其宽高比*/ } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; /* 透明度为完全透明 */ transition: opacity 0.3s; /* 透明度变化的过渡效果 */ } .album-cover:hover .overlay { opacity: 1; } .controls { display: flex; align-items: center; justify-content: space-between; /* 在容器的主轴上对齐项目 */ background-color: #fff; padding: 10px; } .progress { flex-grow: 1; /* 子项将等比例放大，以占用多余的空间 */ height: 4px; background-color: #d9d9d9; border-radius: 2px; margin: 0 10px; position: relative; cursor: pointer; overflow: hidden; } .progress-bar { position: absolute; top: 0; left: 0; height: 100%; width: 0; background-color: #e91e63; border-radius: 2px; } .playback button, .volume button { border: none; background-color: transparent; color: #444; font-size: 20px; cursor: pointer; outline: none; transition: color 0.3s; } .playback button:hover, .volume button:hover { color: #e91e63; } .current-time, .duration { color: #666; font-size: 14px; } .volume-slider input[type="range"] { width: 70px; height: 5px; background-color: #d9d9d9; border-radius: 2px; margin: 0 10px; cursor: pointer; outline: none; } .mute-btn i { font-size: 24px; } </style> </head> <body> <div class="music-player"> <div class="album-cover"> <img src="cover.jpg" alt="专辑封面"> <div class="overlay"></div> </div> <div class="controls"> <div class="progress"> <div class="progress-bar"></div> </div> <div class="playback"> <button class="play-pause-btn"><i class="fa fa-play"></i></button> <span class="current-time">0:00</span> / <span class="duration">0:00</span> </div> <div class="volume"> <button class="mute-btn"><i class="fa fa-volume-up"></i></button> <div class="volume-slider"> <input type="range" min="0" max="1" step="0.1" value="1"> </div> </div> </div> <audio controls> <source src="http://www.kumeiwp.com/sub/filestores/2023/08/18/705849ccb385afeebd143e7fdd939b65.mp3" type="audio/mp3"> <!--<source src="music.mp3" type="video/mp3"> <source src="music.mp3" type="video/ogg">--> </audio> </div> </body> </html>运行效果
音频资源src在线形式
<body> <div class="audio-container"> <audio controls> <source src="http://www.kumeiwp.com/sub/filestores/2023/08/18/705849ccb385afeebd143e7fdd939b65.mp3" type="audio/mp3"> </audio> </div> </body>
通过属性设置也可以
<audio controls autoplay loop muted> <source src="music.mp3"> <source src="music.mp3"> </audio> controls：添加该属性可以在音频元素上显示控件，包括播放/暂停按钮、音量控制和进度条等。用户可以通过这些控件来操作音频的播放和暂停。 autoplay：添加该属性可以使得音频在页面加载完成后自动播放，无需用户手动点击播放按钮。 loop：添加该属性可以使得音频循环播放，当音频播放结束时会自动重新开始播放。 muted：添加该属性可以将音频静音播放，即无声播放。这个属性常用于自动播放的背景音乐或视频中，以避免对用户产生干扰
4.16.2 视频video
<!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>视频video</title> <style> .video-container { width: 600px; margin: 50px auto; text-align: center; } video { width: 100%; height: auto; } </style> </head> <body> <div class="video-container"> <video width="400" controls loop autoplay muted> <source src="G:/CSS/test.mp4" type="video/mp4"> <source src="G:/CSS/test.mp4" type="video/ogg"> </video> </div> </body> </html>运行效果
视频资源src在线形式
视频地址也可以用在线视频地址 <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> <body> <div class="video-container"> <video controls> <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> </video> </div> </body>
通过属性设置也可以
<video width="500" height="300" controls loop autoplay muted poster="./media/fengmian.jpg"> <source src="test.mp4"> <source src="test.mp4"> </video> controls:控制播放暂停的按钮 autoplay:自动播放 loop:无限循环 muted:静音 poster:视频封面
4.17 权重!important（初学了解）
与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时（权重最大），此声明将覆盖任何其他样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>权重!important（</title> <style> #myid { background-color: blue; } .myclass { background-color: gray; } p { background-color: red !important; } </style> </head> <body> <p>都会显示红色，因为 !important 作用，你可以删除该规则来看看效果。</p> <p class="myclass">都会显示红色，因为 !important 作用，你可以删除该规则来看看效果。</p> <p id="myid">都会显示红色，因为 !important 作用，你可以删除该规则来看看效果。</p> </body> </html>运行效果
4.18 图片廊（初学了解）
别看着复杂其实就是相互嵌套，设置不同的样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片廊</title> <style> div.img { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.img:hover { border: 1px solid #777; } div.img img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } </style> </head> <body> <div class="responsive"> <div class="img"> <a target="_blank" href="http://static.runoob.com/images/demo/demo1.jpg"> <img src="http://static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200"> </a> <div class="desc">这就是爱情</div> </div> </div> <div class="responsive"> <div class="img"> <a target="_blank" href="http://static.runoob.com/images/demo/demo2.jpg"> <img src="http://static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200"> </a> <div class="desc">诗和远方</div> </div> </div> <div class="responsive"> <div class="img"> <a target="_blank" href="http://static.runoob.com/images/demo/demo3.jpg"> <img src="http://static.runoob.com/images/demo/demo3.jpg" alt="图片文本描述" width="300" height="200"> </a> <div class="desc">彼岸</div> </div> </div> <div class="responsive"> <div class="img"> <a target="_blank" href="http://static.runoob.com/images/demo/demo4.jpg"> <img src="http://static.runoob.com/images/demo/demo4.jpg" alt="图片文本描述" width="300" height="200"> </a> <div class="desc">初见仙门</div> </div> </div> </body> </html>运行效果
透明/不透明
//透明 img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ } //悬停 img:hover { opacity:1.0; filter:alpha(opacity=100); /* IE8 及其更早版本 */ }
4.19 计数器counter（初学了解）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计数器</title> <style> body { counter-reset: section; } h2::before { counter-increment: section; content: "班级 " counter(section) ": "; } </style> </head> <body> <h1>班级顺序:</h1> <h2>计算机应用1班</h2> <h2>计算机应用2班</h2> <h2>计算机应用3班</h2> </body> </html>运行效果
CSS常考样式（必须记住）
什么是CSS？ 答：层叠样式表 (Cascading Style Sheets) 插入形式【常考】：外部样式表、内部/内嵌样式表、内联样式 选择器 【常考】：块元素选择器、id选择器、class选择器、通用选择器 宽高【常考】 宽 高 width:100%; height:50px; 方位【常考】 上 下 左 右 top bottom left right 盒子Div【常考】：Margin(外边距)、Border(边框) 、Padding(内边距)、Content(内容)、Outline(轮廓) Border border="1" border: 1px solid black; border-style:solid; border-width:5px; border: none; Margin margin:25px 50px 75px 100px; 上 右 下 左 margin:25px 50px 75px; 上 左右 下 margin:25px 50px; 上下 左右 margin:25px; 上下左右 margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; Padding padding:25px 50px 75px 100px; padding:25px 50px 75px; padding:25px 50px; padding:25px; padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; Outline outline-style:dotted; outline-color:#00ff00; outline-width:5px; 颜色【常考】 color:red; 白色white 黑色black 红色red 背景颜色【常考】 background-color:red; bgcolor:red; 背景图片 background-image:url('https://static.runoob.com/images/mix/paper.gif'); 设置行高【常考】 line-height:90%; 文本居中对齐【常考】 text-align:center; text-align:middle; 列表样式 list-style-type:circle; 圆形circle 矩形square 行内形式 块级形式 display:inline; display:block; 位置 静态定位:position:static; 固定定位:position:fixed; 相对定位:position:relative 绝对定位:position:absolute; 溢出 overflow: scroll; visible 默认值。内容不会被修剪，会呈现在元素框之外 hidden 内容会被修剪，并且其余内容是不可见的 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 浮动 float:right; float:left; 字体 字体类型 font-family: Arial; font-family: "宋体"; 字体大小【常考】 font size="5px"; font-size:250%; 字体粗细【常考】 font-weight:bold; 字体样式 font-style:italic;
三：JS
1.什么是JS呢？
JS 即 JavaScript：常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果 js（全称“javascript”）是一种具有函数优先的轻量级、解释型或即时编译型的高级编程语言 ECMAScript是JavaScript标准 DOM 文档对象模型：HTML元素操作 BOM 浏览器对象模型：浏览器操作 JavaScript是由网景公司开发的一款基于浏览器、基于面向对象、事件驱动式的网页脚本语言 1.基于浏览器:Javascript他是被浏览器来进行解析的.HTML、CSS、Javascript都是被浏览器解 析的 2.基于面向对象:在Javascript中一切皆对象,对象由属性和方法组成! 3.事件驱动式:用户的某些行为,比如鼠标经过、鼠标离开、鼠标点击等这些行为他会被 Javascript所捕获,Javascript可以对这些行为赋予一些功能代码
2.瞅瞅JS代码动态交互效果什么样？
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本移动</title> <style> #movingText { position: absolute; top: 50px; left: 50px; } body {background-color:yellow;} div{color:blue;} </style> </head> <body> <div id="movingText">看我开始移动了哦！</div> <script> // 获取要移动的文本元素 var textElement = document.getElementById('movingText'); // 初始位置 var position = 0; // 移动速度（每100毫秒移动5像素） var speed = 5; function moveText() { // 每100毫秒向右移动5像素 position += speed; textElement.style.left = position + 'px'; // 当文本移出屏幕时，重新从屏幕左侧开始移动 if (position > window.innerWidth) { position = -textElement.offsetWidth; } } // 每100毫秒调用一次moveText函数，实现移动效果 setInterval(moveText, 100); </script> </body> </html>运行效果展示
3.编码规范
3.1书写格式
1.嵌入式:通过<script></script>标签将Javascript代码嵌入到HTML代码中 <title>在干嘛</title> <script type="text/javascript"> //使用JS来修改网页的标题，会覆盖之前的标题 document.title="在吃饭"; </script> 2.外链式:JS代码它可以单独的保存为一个以js为扩展名的文件 然后通过HTML中的<script></script>的src属性将其引入到当前的HTML文件中! <script type="text/javascript" src="1.js"></script> 3.行内式:将JS代码书写在HTML标签的事件属性中鼠标单击等HTML标签中 有一些事件属性带有on前缀：比如鼠标经过、鼠标离开、<标签名 事件属性 =“JS代码”> <div onclick="alert(123)"></div>
3.2 语法规则
1.JavaScript区分大小写 2.JavaScript脚本程序须嵌入在HTML文件中 3.JavaScript脚本程序中不能包含HTML标记代码 4.每行写一条脚本语句 5.每一条语句末尾可以加分号一定是英文下的分号(;)，最好加分号 6.JavaScript脚本程序可以独立保存为一个外部文件 这个文件是不能自己运行的它必须要依赖于HTML文件
4.输出语句
document.write("要输出的内容")：用于往body标签里面输出内容 <script type="text/javascript"> document.write('<hr/>'); document.write('<h1>哈哈哈<h1/>'); </script> <title>在干嘛</title> <script type="text/javascript"> //使用JS来修改网页的标题，会覆盖之前的标题 document.title="在吃饭"; </script> window.alert("要输出的内容")：提示框，警告框，弹出内容框 alert(1); alert(2); alert('哈哈哈'); window.alert('www.baidu.com') <div onclick="alert(123)"></div> console.log("要输出的内容")：向浏览器的调试工具中的“console”选项卡里面输出内容；调试时使用Console console.log('你好')
5.弹窗
alter()：警告弹窗 confirm()：确认弹窗 prompt()：提示弹窗
6.访问和操作HTML（JavaScript DOM操作）
DOM本质：连接Web页面和编程语言
如何获取一个HTML元素内容？
<html> <head> <title>例子</title> <!--CSS--> <style> </style> <!--JS--> <script> //第一步：获取元素 getElementById通过Id获取元素 x=document.getElementById("intro"); //第二步：获取内容 .innerHTML获取元素内容 alert('id为intro元素的文本是：')+x.innerHTML; </script> </head> <body> <p id="intro">你好</p> </body> </html>
如何修改一个HTML元素内容？
<html> <head> <title>例子</title> <!--CSS--> <style> </style> <!--JS--> <script> //第一步：获取元素 getElementById通过Id获取元素 x=document.getElementById("intro"); //第二步：获取内容 .innerHTML获取元素内容 //直接赋值覆盖掉 x.innerHTML="这里面就是需要修改的内容 "; </script> </head> <body> <p id="intro">你好</p> </body> </html>
如何动态创建HTML元素内容？
<html> <head> <title>例子</title> <!--CSS--> <style> </style> <!--JS--> <script> //第一步：获取元素 getElementById通过Id获取元素 x=document.getElementById("intro"); //第二步：动态获取内容 document.write() //写入当前时间 document.write(Date()); //写入框架 document.write("<iframe src='http:/www.163.com'></iframe>"); </script> </head> <body> <p id="intro">你好</p> </body> </html>
如何让页面增加互动？
<html> <head> <title>例子</title> <!--CSS--> <style> </style> <!--JS--> <script> function changetext(id) { //当点击文本，会修改原来h1里面内容 id.innerHTML="谢谢！"; } </script> </head> <body> <p id="intro">你好</p> <h1 onclick="changetext(this)">请点击该文本</h1> </body> </html>
如何从浏览器获取用户Cookie？
获取cookie 写入cookie document.cookie="cookie=test"
获取浏览器屏幕信息？
(window.)screen
获取/控制用户页面URL?
(window.)location
获取访问者浏览器信息？
(window.)navigator
扫一扫
1159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
