HTML5、CSS3文档、html快速编程

mac2022-06-30 23

HTML5、CSS3基础文档、html快速编程

JavaScript传送门. Gitee使用. 廖雪峰Gitee使用.

HTML5、CSS3基础文档、html快速编程一、 HTML1、基本标签文件标签文本标签图像标签列表标签链接标签块标签语义化标签表格标签 2、表单标签二、CSS：页面美化布局控制单位颜色css的使用、css与html结合方式1、内联样式2、内部样式3、外部样式选择器1、基础选择器2、扩展选择器属性 css3中的单位css动画浏览器内核前缀borderborder-style圆角阴影transition渐变Transform（2D转换）Transform 3Danimation动画position属性难点成果展示 vscode快捷键html快速编程字体视频捐赠

一、 HTML

网页结构编写（超文本标记语言: HyperText Markup Language）

实例

<!DOCTYPE>// 声明为 HTML5 文档 <html>// 元素是 HTML 页面的根元素 <head> <meta charset="UTF-8">//声明编码，否则会出现乱码 <title>页面标题</title> </head> <body>只有<body>//区域才能显示再网页中 <h1>我的第一个标题</h1>//标题标签h1~h6 <p>我的第一个段落。</p>//段落标签，自动换行切行之间间距更大 </body> </html> //注：注释格式是错误的，正确格式

1、基本标签

基础标签及其属性、作用注：提及标签有部分标签H5 已废弃已废弃：已废弃的元素或者属性意味着它已经过时。废弃的元素在以后将会过时，但是浏览器会继续支持已废弃的元素。

文件标签

<html> html文档的根标签 <head> 头标签。指定html文档的一些属性，引入外部的资源 <title> 标题标签 <body> 体标签 <!DOCTYPE> 声明为 HTML5 文档

文本标签

<h1>~<h6> 主题标签，由大到小 <p> 段落标签，自动换行切行之间间距更大 <br> 换行标签 <hr> 展示一条水平线。 <b> 字体加粗 <i> 字体斜体 <font> 字体标签（淘汰） *属性：size、color、face字体

color：rgb(a,b,c) a、b、c表示红绿蓝占比0~255 #abc 00~FF 例 #FF00FF

图像标签

<img> 图像标签 *主要属性 src:规定显示图像的 URL(统一资源定位符)，可以是图片相对路径，图片网络地址 * align:规定如何根据周围的文本来排列图像,值:"top,bottom,middle,left,right"(H5不支持) * alt：规定图像的替代文本，图像显示错误时，提示用户图像内容显示的字。 //可套用<a>超链接标签

列表标签

//有序列表 <ol> //标签定义了一个有序列表. 列表排序以数字来显示。 *属性 type规定列表类型，及1、2、3或A、B、C,值"1,A,a,I,i" //无序列表 <ul>//标签定义无序列表。 *属性 type列表的项目符号的类型值"disc,square,circle"分别显示为“原点，方块，圆圈”注：HTML5 不支持。HTML 4.01 已废弃。 <li> //标签来定义列表选项。例 <ul type="disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

链接标签

<a>定义一个超链接 *属性 href:指定访问资源的URL(统一资源定位符) * target:指定打开资源方式 *_self：默认值，在当前页面打开 *_blank: 在空白页面打开

块标签

<div>每一个div占满一整行 *常与属性class进行格式控制 <span>文本信息在一行展示，行内标签，内联标签

语义化标签

*提高代码可读性，与css控制样式 <header> <footer> ...

表格标签

<table> 定义表格 <tr> 定义行 <td> 定义单元格 *可用<td><img></img></td>实现对图片格式控制 <th> 定义表头单元格，对样式没有影响 *属性 rowspan行个数，colspan列个数,用于合并单元格 <caption> 表格标题 //与css控制样式，提高代码可读性，对样式无影响，但是标签位置改变不影响最后格式。 <thead> 表示表格头部分 <tbody> 表示表格体部分 <tfoot> 表示表格脚部分 *样例 <table> <caption>标题</caption> <thead>  <tr> <td rowspan="2"></td> <td></td> </tr> </thead> <tbody>  <tr>  <td></td> </tr> </tbody> <tfoot>  <tr> <td colspan="2"></td>  </tr> </tfoot> </table>

2、表单标签

<form> 定义表单，采集用户数据 *属性 *action:指定提交数据的URL *method:指定提交方式（共7种，常用两种） get:1、请求会在地址栏中显示，会封装在请求体中。 2、请求参数大小有限 3、不安全 post:1、请求不会再地址栏中显示。会封装在请求体中。 2、参数大小没有限制 3、较为安全 *表单数据想被提交，必须指定name属性

表单项标签

*input标签:可以通过type属性，改变元素展示的样式 *type属性： *text:文本输入 *passworld:密码框输入，隐藏输入内容 *color:取色器 *date、datetime-local:选择时间 *email:邮箱输入框，规定输入格式 *number:数值输入框 *radio:单选框 *注：1、想让单选框实现但是选效果，name属性值必定相等 2、一般会给单选框提供value属性，指定选中后提交的值。 3、checked属性指定默认值 *file:文件选择框 *hidden：隐藏域，不会显示但会提交数据。 *checkbox:复选框 *注：1、提供value属性 2、checked属性指定默认值 *button:按钮，以后学js以前使用 *image:图片按钮，提交表单数据 *src属性指定图片路径 *submit:提交表单 *select标签:下拉列表 *option标签：单选项 *属性：selected默认选择 *注：一般用value属性保证提交的值例： <select name="province"> <option value="">--请选择--</option> <option value="1">北京</option> <option value="2" selected >济南</option> </select> *label标签: *label的for属性一般会和 input 的 id 属性值对应。对应及点击label区域，会让input输入框获取焦点。及点击跳转到输入框 *textarea标签:文本域 *属性cols列宽，一行的字符数。 ws行高，默认多行。

二、CSS：页面美化布局控制

概念：Cascading Style Sheets 层叠样式表> *层叠：多个样式也以作用在同一HTML的元素上好处：1、功能强大 2、将内容与样式控制分离 *降低耦合度（分工协作） *提高开发效率

单位

px:像素单位em：参考父元素font-sizerem：相对根元素html%：相对父元素vw：可视窗口宽度，100vw为可视总宽度vh：同上vm：100vm=min(100vw, 100vh)

颜色

选色板

css的使用、css与html结合方式

1、内联样式

*在标签内使用style属性指定css代码 *如：<div style="color:red;">红色</div> *不常用

2、内部样式

*在head标签内定义style标签 *如：div{ color:blue; }

3、外部样式

*定义css资源文件 *在head标签内定义link标签，引入外部资源文件 *如：a.css文件： div{ color:green: } html文件： <link rel="stylesheet" href="css/a.css"> 或 <style> @import "css/a.css"; </style>

选择器

1、基础选择器

1、id选择器：选择具体的id属性元素，建议一个html页面中id值唯一 *语法：#i的属性值{} 2、元素选择器：选择具有相同标签名称的元素 *语法：标签名称{} *注意：id选择器优先级高于元素选择器 3、类选择器：选择具有相同class属性值的元素 *语法：.class属性值{} *注意：类选择器优先级高于元素选择器

2、扩展选择器

1、选择所有元素： *语法：*{} 2、并集选择器： *语法：选择器1,选择器2{} 3、子选择器：筛选选择器1元素下的选择器2元素 *语法：选择器1 选择器2{} 4、父选择器：筛选选择器2的父元素选择器1 *语法：选择器1 > 选择器2{} 5、属性选择器：选择元素名称，属性名=属性值的元素 *语法：元素名称[属性名="属性值"]{} 6、伪类选择器：选择一些元素具有的状态 *语法：元素:状态{} *如：<a> *状态： *link:初始化的状态 *visited:被访问的状态 *active:正在访问的状态 *hover:鼠标悬浮状态 *first-child：选取父元素的首个子元素的指定选择器 *last-child：选取父元素的最后一个子元素的制定选择器 *nth-child（n）：匹配属于父元素的第N个子元素，不论元素的类型 *nth-last-child（n）：匹配从父元素最后一个子元素开始倒数的子元素

例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>样例</title> <style> p{ color: #FFD026; } div > p{ border: 1px solid; color: red; } div div{ color: aqua; } div input[type="text"]{ border: 5px solid; border-radius: 5px; } a:link{ color: red; } a:visited{ color: pink; } a:active{ color: #0cf5ff; } a:hover{ color: chartreuse; } </style> </head> <body> <div> <p>样例div>p</p> <div>样例div>div</div> </div> <p>样例p</p> <div> <input type="text"></input> </div> <a href="aaaaa.html">注册界面</a> </body> </html>

属性

1、字体文本 * font-size：字体大小 * color：文本颜色 * text-align：对齐方式 * line-height：行高 2、背景 * background：背景图片 * 例：background: url("") no-repeat center;//图片不重复，居中 3、边框 * border：设置边框属性 * border-radius：边框半径 4、尺寸 * width：宽度 * height：高度 5、盒子模型（与div合用）具体应用才会理解 * 内外边距是相对的 * margin：外边距 * padding：内边距 * 默认情况下内边距会影响整个盒子大小 * 用box-sizing: border-box; 固定盒子大小等等。。。。。。

css3中的单位

px:绝对单位，页面按精确像素展示 em:相对单位，基准点为父节点字体大小，如果过定义font-size按自身来计算（浏览器默认字体是16px） rem:像滴哦单位，相对根节点html的字体大小来计算 vw:视窗宽度，1vw等于视窗宽度的1% vh:视窗高度度，1vh等于视窗高度的1% vmin:min(vw,vh) vmax:max(vw,vh)

css动画

浏览器内核前缀

原因：浏览器对新属性支持情况不同

*Gecko内核前缀-moz- 火狐 *Webkit内核前缀-webkit- Google、360、世界之窗、猎豹等 *Trident内核前缀-ms- IE *Presto内核前缀-o- opera /*标准写法：前缀写法+标准*/ -moz-animation: none; -webkit-animation: none; -o-animation: none; animation: none;

border

border: border-width border-style border-color;

border-style

dotted 点状 solid 实线 double 双线 dashed 虚线

圆角

圆角形成：按照指定位置向内偏移量移动圆心或焦点，画圆或椭圆

/*完整格式 2个参数 4个值*/ /*水平（左上，右上，右下，左下） / 垂直（左上，右上，右下，左下），其实就是左上顺时针*/ border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px; /*1个参数 4个值，顺序同上，同时规定水平竖直位置*/ border-radius: 10px 20px 30px 40px /*1个参数 2个值，（左上，右下）（右上，左下），其实就是对角线的角*/ border-radius: 10px 40px; /*四个角的值*/ border-radius: 10px; /*格式可以灵活使用,这里不在过多赘述*/ border-radius: 10px / 10px 20;

阴影

text-shadow/box-shadow: 阴影1.阴影2… 阴影格式： (inset内阴影/outset默认)横向偏移量，纵向偏移量，模糊度，外延值、颜色

这里偏移量是以元素为原点进行偏移

box-shadow: 10px 20px 5px red, 10px -20px 5px yellow; box-shadow: 0 0 0 100px yellow;

transition

transition 属性是一个简写属性，用于设置四个过渡属性： transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 定义过渡效果何时开始。

语法：transition: property duration timing-function delay;

linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

渐变

线性渐变 Linear Gradients/径向渐变 Radial Gradients 需注意这里的只能使用background, background-image,不能使用background-color，理解并不是很难

background: linear-gradient(direction, color-stop1, color-stop2) background: radial-gradient(center, shape, size, start-color, … , last-color)

direction(to x) x: top, bottom, right, left, [numb]deg background: linear-gradient(to top, red, blue) background: linear-gradient(to right bottom, red, blue) background: linear-gradient(45deg, red, blue) background: linear-gradient(-45deg, red, blue) center(at x y)x,y:以左上为参考点，建议使用像素

Transform（2D转换）

Transform 2D函数包括translate()、scale()、rotate()、skew()

transform: translate(0,-10px)//移动 transform: rotate(45deg)//旋转 transform: scale(1.3)//缩放 transform: sknew(45deg) sknew(x y)//倾斜

Transform 3D

注意，此时x，y轴方向依然是左，下，z轴方向向外

animation动画

通过关键帧控制动画的每一步使元素从一种样式转换为另一种样式 @keyframes 声明动画，指定关键帧

@keyframes语法

@keyframes name{ from|0%{ css样式 } percent{ css样式 } to|100%{ css样式 } }

animation属性

//简写 animation:name duration timing-function delay iteration-count direction; 动画子属性 animation-name: ;选择器的关键帧的名称与keyframes名称一致 animation-duration: s|ms;动画完成一个周期所需时间 animation-timing-function: ;动画速度变化类型 animation-delay: s|ms;播放的延迟时间 animation-iteration-count: 数值|infinite; animation-directioin: nomal|alternate动画会在反向和正常轮流播放; animation-fill-mode:默认none|forwards动画停在最后一帧； animation-paly-state:pasued|runing;动画正在运行还是暂停

点动画

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOT</title> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } .dot-div-1{ height: 50px; width: 50px; position: absolute; top: 0; left: 0; border: 1px solid #0f0f0f; } .dot-div-2{ height: 50px; width: 50px; position: absolute; top: 0; left: 50px; border: 1px solid #0f0f0f; } .dot-div-3{ height: 50px; width: 50px; position: absolute; top: 0; left: 100px; border: 1px solid #0f0f0f; } .dot-div-1 > .dot{ background-color: #8854d0; } .dot-div-2 > .dot{ background-color: #2980b9; } .dot-div-3> .dot{ background-color: #eb3b5a; animation: dot-animation-3 1s infinite; } .dot{ height: 20px; width: 20px; border-radius: 50%; /*border: 1px solid #e74c3c;*/ position: absolute; top: 28%; left: 28%; z-index: 2; transition: 0.5s; } .dot:hover{ position: absolute; top: 28%; left: 28%; transform: scale(1.3); transition: 0.5s; } .dot-2-border{ height: 18px; width: 18px; position: absolute; top: 31%; left: 31%; border-radius: 50%; background-color: #3498db; z-index: 1; animation: dot-animation-2 2s infinite; } .dot-1-border-1,.dot-1-border-2,.dot-1-border-3,.dot-1-border-4{ height: 18px; width: 18px; position: absolute; top: 30%; left: 30%; border-radius: 50%; z-index: 1; } .dot-1-border-1,.dot-1-border-3{ border: 1px solid #a55eea; } .dot-1-border-2,.dot-1-border-4{ border: 1px dashed #D980FA; } .dot-1-border-1{ animation: dot-animation-1 linear 2s infinite; } .dot-1-border-2{ animation: dot-animation-1 linear 2s 0.5s infinite; } .dot-1-border-3{ animation: dot-animation-1 linear 2s 1s infinite; } .dot-1-border-4{ animation: dot-animation-1 linear 2s 1.5s infinite; } @keyframes dot-animation-2 { from{ transform: scale(1); opacity: 1; } to{ transform: scale(3); opacity: 0; } } @keyframes dot-animation-1 { 0%{ transform: scale(0); opacity: 0.9; } 100%{ transform: scale(3); opacity: 0; } } @keyframes dot-animation-3 { from{ transform: scale(1); opacity: 0.9; } 30%{ transform: scale(1.5); background-color: #fc5c65; } to{ transform: scale(1); opacity: 0.9; } } </style> </head> <body> <div class="dot-div-1"> <div class="dot"></div> <div class="dot-1-border-1"></div> <div class="dot-1-border-2"></div> <div class="dot-1-border-3"></div> <div class="dot-1-border-4"></div> </div> <div class="dot-div-2"> <div class="dot"></div> <div class="dot-2-border"></div> </div> <div class="dot-div-3"> <div class="dot"></div> <div class="dot-3-border"></div> </div> </body> </html>

position属性

参数：static 静态 relative 相对 absolute 相对 fixed 固定 static系统默认，与不加它没有任何区别。 top、bottom、left、left操作位置

定位流：给出定位属性开辟定位流（absolute fixed），relative严格来说并没有脱离文档流。

relative：div相对于原来的标准流（文档流）进行定位设置top等值，会对其周围进行覆盖，可用来微调元素位置。

absolute：div父级元素有定位属性时，绝对定位就是相对父级元素的位置 div父级元素没有定位属性时，绝对定位就会向更高一级查找，直到查找到定位属性或body为止. 使用absolute的div脱离原来的文档流，新建定位流，后面的元素会向前补全。同级元素都设置绝对定位，两者之间互不干扰，都会新建自己的定位流，所以会出现重叠的情况，且层级高的在上面。 fixed：相对于页面的可视区，不会随页面移动而消失。

难点

flex下面网站讲的相当的好，相对绝对位置依据菜鸟教程 flex布局传送门 position

成果展示

道路很远，还需心向远方。 html文件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <link rel="stylesheet" href="../CSS/a.css">    </head> <body id="web_bg" style="background-image: url(https://photo.16pic.com/00/15/98/16pic_1598736_b.jpg);"> <div class="rg_layout"> <div class="rg_left"> <p>新用户注册</p> <p>USER REGISTER</p> </div> <div class="rg_center"> <div class="rg_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="请输入用户名"></input></td> </tr> <tr> <td class="td_left"><label for="passworld">密码</label></td> <td class="td_right"><input type="passworld" name="passworld" id="passworld" placeholder="请输入密码"></input></td> </tr> <tr> <td class="td_left"><label for="email">邮箱</label></td> <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></input></td> </tr> <tr> <td class="td_left"><label for="name">姓名</label></td> <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></input></td> </tr> <tr> <td class="td_left"><label for="phnumber">手机号</label></td> <td class="td_right"><input type="number" name="phnumber" id="phnumber" placeholder="请输入手机号"></input></td> </tr> <tr> <td class="td_left"><label>性别</label></td> <td class="td_right"> <input type="radio" name="sex" value="male">男</input> <input type="radio" name="sex" value="female">女</input> </td> </tr> <tr> <td class="td_left"><label>生日</label></td> <td class="td_right"><input type="date" name="brithdata" id="brithday"></input></td> </tr> <tr> <td colspan="2" align="center" ><input id="btn_sub" type="submit" value="登陆"></td> </tr> </table> </form> </div> </div> <div class="rg_right"> <p>已有帐号？<a class="text_submit" href="#">立即登陆</a></p> </div> </div> </body> </html>

css文件

* { margin: 0px; padding: 0px; box-sizing: border-box; } .rg_layout { width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white; margin: auto; margin-top: 15px; } .rg_left { float: left; margin: 15px; } .rg_left > p:first-child { color: #FFD026; font-size: 20px; } .rg_left > p:last-child{ color: #A6A6A6; font-size: 20px; } .rg_right { float: right; margin: 15px; } .rg_right > p a{ color: pink; } .rg_center { float: left; width: 450px; } .td_left{ width: 100px; text-align: right; height: 45px; } .td_right{ padding-left: 50px; } #username,#phnumber,#passworld,#name,#email,#brithday{ width: 251px; height: 32px; border: 1px solid #A6A6A6; border-radius: 5px; padding-left: 10px; } .rg_form{ padding-top: 50px; } #btn_sub{ width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026; margin: auto; }

vscode快捷键

1.复制到下一行 Alt+Shift+下键(上下左右的下); 2.复制到上一行 Alt+Shift+上键(上下左右的上); 3.Ctrl+Shift+K 删除行 Delete line 4.移动一行 alt+方向键 5.同时选择多个单词: Alt + Click 6.一次性找出文所有的当前选中的单词: Ctrl + Shift + L 7.矩形框的鼠标选择: 同时按住Shit和Alt并使用鼠标进行拖拽选择

html快速编程

插件自寻，idea自带，输入按Tab即可

<div class="clasname"></div>   <div id="idname"></div>  <div class="firstdiv"> <div class="scondiv"> <div class="thirdiv"></div> </div> </div>  <div> <p></p> <a href=""></a> </div>  <div><a href=""></a><a href=""></a><a href=""></a></div>  <div> <div><a href=""></a></div> <div><a href=""></a></div> <div><a href=""></a></div> </div>  <div>测试</div>  <div>1</div> <div>2</div> <div>3</div>  <div>测试01</div> <div>测试02</div> <div>测试03</div> <div>测试04</div> <div>测试05</div> <div>测试06</div> <div>测试07</div> <div>测试08</div> <div>测试09</div> <div>测试10</div>  <div id="idname" class="classname"></div>

演示

div.nev>(div.nevitem>img[src=$.png]+p{标题$})*10 <div class="nev"> <div class="nevitem"><img src="1.png" alt=""> <p>标题1</p> </div> <div class="nevitem"><img src="2.png" alt=""> <p>标题2</p> </div> <div class="nevitem"><img src="3.png" alt=""> <p>标题3</p> </div> <div class="nevitem"><img src="4.png" alt=""> <p>标题4</p> </div> <div class="nevitem"><img src="5.png" alt=""> <p>标题5</p> </div> <div class="nevitem"><img src="6.png" alt=""> <p>标题6</p> </div> <div class="nevitem"><img src="7.png" alt=""> <p>标题7</p> </div> <div class="nevitem"><img src="8.png" alt=""> <p>标题8</p> </div> <div class="nevitem"><img src="9.png" alt=""> <p>标题9</p> </div> <div class="nevitem"><img src="10.png" alt=""> <p>标题10</p> </div> </div>

字体

Google Font

视频

相应资源已上传公众号，关注微信公众号“翼点通”，回复“JavaWeb”、“Spring”、“SpringMVC” 获取相应资源。

捐赠

如果本文章能给你什么收获，能支持0.5r就更好了，您的支持就是我更新的动力。

最新回复(0)