HTML5+CSS3基础元素使用

做一个全方面发展的优(快)秀(乐)人(咸)才(鱼)(ง •_•)ง。

HTML表中一些元素已经可以用css设计实现,但依然写在表格内用于了解。

以下元素整理方式与HTML5+CSS+JS全方面解析配套使用。

HTML

HTML5基本元素

书写方式 功能
<a href=”xxx”></a> 超链接,跳转到xxx(网址),不创建新标签页
<a href=”xxx” target=”_self”></a> 超链接,跳转到xxx(网址),不创建新标签页
<a href=”xxx” target=”_blank”></a> 超链接,跳转到xxx(网址),并创建新标签页
<p></p> 段落(自动换行)
<i></i> 斜体
<em></em> 被强调的文本(效果为斜体)
<b></b> 粗体
<strong></strong> 被强调的文本(效果为粗体)$^①$
<u></u> 下划线
<s></s> 删除线
<br /> 换行

①<i>与<b>仅表示效果,<em>与<strong>主要作用为语义上的强调,在阅读器以及翻译等其他方面有比<i>和<b>更多的效果。由于现在开发大部分使用css,<i>和<b>的直接使用已经逐渐减少。

HTML5表格元素

书写方式 功能
<table></table> 创建表格
<table border=”1px”></table> 定义表格边框宽度为1px
<table align=”center”></table> 表格居中
<tr></tr> 创建一行单元格,嵌套在<table></table>内
<th></th> 创建一个单元格,嵌套在<tr></tr>内,作为表头元素字体加粗且居中
<td></td> 创建一个单元格,嵌套在<tr></tr>内
<td colspan=”2”></td> 以此单元格为起点,合并两个同一行相邻的单元格
<td rowspan=”2”></td> 以此单元格为起点,合并两个同一列相邻的单元格

HTML5列表元素

书写方式 功能
<ol></ol> 创建有序列表(默认标号为阿拉伯数字)
<ul></ul> 创建无序列表
<li></li> 创建列表中的项
<ol reversed=”reversed”></ol> 反转有序列表的标号
<ol type=””></ol> 选择标号类型(五种):”A” , “a” , “I” , “i” , “1”,分别为大小写字母,大小写罗马数字以及阿拉伯数字

HTML5表单元素(上)

书写方式 功能
<form></form> 创建表单,表单内容均写在这里面
<input /> 单行文本框
<input type=”text”/> 同<input />
<input value=”xxx”/> 初始化,在文本框内置文本xxx
<input placeholder=”xxx”/> 初始化,在文本框内置文本xxx,且不占文本空间。作用为提示应输入的信息
<input maxlength=”xxx”/> 文本框文本最长输入长度为xxx
<input readonly / > 只读,无法修改文本框内容
<input type=”password”/> 密码框,输入文本显示形式均为”*”
<input type=”button” value=”xxx”/> 设置按钮,按钮提示文本为xxx
<input type=”submit” value=”xxx”/> 设置按钮,按钮提示文本为xxx $^①$
<textarea>xxx</textarea> 设置多行文本框,且可调整大小,初始内容为xxx
<textarea row=”10” cols=”15”>xxx</textarea> 设置初始文本框为10行15列
<input type=”number” /> 数字框
<input type=”checkbox” /> 选择框(多选)
<input type=”radio” /> 选择框(单选)
<input type=”radio” name=”xx”/> 多个此语句并列,name为xx的元素只能选择一个
<input type=”radio” checked/> 初始为选中状态
<select></select> 选择列表框
<datalist></datalist> 选择列表框,可自定义输入内容,但需要利用<input / >定义,用法为:<input list=”xxx”/> <datalist id=”xxx”></datalist>
<option></option> 选择列表框元素,嵌套在<select></select>或<datalist></datalist>内

HTML5表单元素(下)

书写方式 功能
<input type=”date”/ > 获取时间
<input type=”color”/ > 获取颜色
<input type=”image” src=”xxx”/> 显示名字为xxx的图片
<input type=”file” /> 上传单个文件
<input type=”file” multiple/> 上传多个文件

HTML5嵌入图片与创建分区响应图

书写方式 功能
<img src=”xx.jpg”></img> 显示xx.jpg
<img src=”xx.jpg” width=”100px” heigth=”150px”></img> 设置图片宽高分别为100px,160px
<img src=”xx.jpg” alt=”picture”></img> 图片加载失败时提示picture字样
<a href=”xxx.com”><img src=”xx.jpg” alt=”picture”></img></a> 跳转功能,点击图片跳转至xxx.com
<form><input type=”image” src=”xxx”></input></form> 点击图片在网址栏可显示坐标
<img src=”x.jpg” usemap=”#xx” /><map name=”xx”></map> 定义图片可行跳转区域
<area href=”xxx” shape=”rect” coords=” 1,2,3,4”></area> 定义图片跳转矩形区域,其中矩形的左上右下边界分别为1px,2px,3px,4px(距离左边界或上边界距离),嵌套在<map></map>中
<area href=”xxx” shape=”circle” coords=” 1,2,3”></area> 定义图片跳转圆形区域,其中圆心坐标为1px,2px,半径为3px,嵌套在<map></map>中
<area href=”xxx” shape=”poly” coords=” 1,2,3,4,…”></area> 定义图片跳转圆形区域,顶点为(1px,2px),(3px,4px),…其中顶点个数必须不小于三个,coords内数字个数必须不小于六个

HTML5嵌入视频

书写方式 功能
<video src=”xx.mp4” width=”500px” heigth=”500px” /></video> 播放xx.mp4视频,视频框宽高为500px,500px
<video src=”xx.mp4” controls/> 设置控制栏
<video src=”xx.mp4” controls preload=”auto”> 自动加载视频
<video src=”xx.mp4” controls preload=”none”> 不加载视频
<video src=”xx.mp4” controls preload=”metadata”> 加载视频第一帧
<video src=”xx.mp4” poster=”xxx.jpg”></video> 设置封面为xxx.jpg
<video src=”xx.mp4” muted/></video> 视频静音

CSS

以下以创建.css文件为例进行说明,css的使用方式为:

HTML中:

CSS中:

a.css为创建的css文件的名字,其路径需要与调用它的html一致,在css中创建xx类时前面必须加上点(.),若为内置文档类型(如<a></a>,<p></p>等)在设置时可省略点。

css选择器

书写方式 功能
*{…;} 通配符,对html中所有的元素均起作用
#id1{…;} 对元素id为id1的元素起作用
[href]{…;} 属性选择器,对href属性起作用(也可以为其他属性)
.xx:hover{…;} 当鼠标放置在该元素时触发设定的效果(冒号后面可设置其它类型的触发条件)

css控制边框和背景

书写方式 功能
border-size: 2px; 设置边框宽度为20px
border-color: blue; 设置边框颜色为blue
border-style: ; 边框样,可选择solid/dashed/dotted/inset/hidden,分别为实线/虚线/圆点/内嵌/隐藏
border:2px blue dashed; 简化设置边框样式,元素顺序可交换
border-top/botton/left/right: ; 同border,分别设置四个边框属性
background-image:url(xxx) ; 设置xxx为背景图片
background-color:; 设置背景颜色
background-size: ; 设置背景填充样式
border-radius: 10px/10px; 定位圆心为(10px,10px),画弧线,两个值不相等时为椭圆弧

css设置文本样式

书写方式 功能
text-align: ; 设置文本对齐方式
direction: ; 设置文本排版方向
letter-spacing: ; 设置字母间距
word-spacing: ; 设置单词间距
line-heigth: ; 设置行高
text-indent: ; 设置文本缩进
text-decoration: ; 文本装饰,可设置下划线(underline),上划线(overline),删除线(line-through)等。
text-transform: ; 英文单词大小写转换,全为大写(uppercase),全为小写(lowercase),仅首字母大写(capitalize)等
font-family: ; 设置字体
font-size: ; 设置字体大小
font-style: ; 设置字体样式(粗体,斜体等)
font-variant: ; 设置字体大小写转换以及字体大小,如小型大写(small-caps)
font-weight: ; 设置字体粗细
text-shadow: 1px 2px 1px red; 设置文本阴影,参数分别为水平偏移,竖直偏移,模糊程度(可不写),颜色。

css使用过渡

使用过渡时利用之前学过的选择器 : .xx:hover{…;},表示类名为xx的元素在鼠标放上去时执行当前类操作。

其内部元素与之前无异,只是相当于创建了一个新的格式,在鼠标放上去时显示,但其增加了过度时的动画效果(css使用动画语句也写在 .xx:hover{…;}中)。

书写方式 功能
transition-delay: ; 过渡延迟(单位s或ms)
transition-duration: ; 平滑过渡,宽高大小均匀变化(单位s或ms)
transition-property: ; 设置有平滑过渡效果的元素(宽高,颜色等)

css使用动画

调用动画时需要将动画最终效果的元素放在一个新的类型 : @keyframes name{…;} .

书写方式 功能
animation-duration: ; 同transition-duration: ;
animation-delay: ; 同transition-delay: ;
animation-name: ; 动画效果名称
anianimation-iteration-count: infinite; 动画效果执行无数次(也可设置为其他正整数)
anianimation-direction: alternate; 动画结束后反方向播放动画,即倒放

css使用变换

书写方式 功能
transform: rotate(30deg) ; 顺时针旋转30°
transform: scale(2); 缩放2倍
transform: scalex(2); 长扩大2倍
transform: scaley(2); 宽扩大2倍
transform-origin: 20px 40px ; 以距左边界20px,上边界40px为锚点进行变换(也可设为top/button,left/right)

css盒子模型

书写方式 功能
padding-top/button/left/right: 100px; 文本、图片等距离上/下/左/右边界100px
background-clip: content-box/padding-box/boder-box; 设置元素背景(仅内容/延伸至边缘/包含边缘)
margin-left/right/top/botton: ; 设置盒子与网页左右上下边距(绝对距离)
感谢您的支持
-------------本文结束感谢您的阅读-------------