HTML5和CSS3
2018-06-29 10:40:32 0 举报AI智能生成
登录查看完整内容
html5和css3基础
作者其他创作
大纲/内容
HTML5和CSS3
HTML
Hyper Text Markup Language（超文本标记语言）
浏览器
微软
Google
苹果
Opera
Mozilla
网页编辑工具
记事本
Dreamweaver
WebStorm
HBuilder
HTML基本结构
<html> <head> <title>这是我的第一个网页</title> </head> <body> 这是我的第一个网页 </body></html>
网页的基本标签
标题标签
<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
段落标签
<p>北京欢迎您，有梦想谁都了不起！</p><p>有勇气就会有奇迹</p>
换行标签
<p>北京欢迎你，有梦想谁都了不起！<br />有勇气就会有奇迹<br />北京欢迎你，为你开天辟地<br />
水平线标签
<hr />
字体样式标签
加粗:<strong></strong>
斜体:<em></em>
图像标签
<img src=\"\" alt=\"\" title=\"\" width=\"\" height=\"\" />
链接标签
<a href=\"path\" target=\"_blank\">链接文本或图像</a>
列表标签
无序列表
<ul> <li>窗前明月光</li> <li>疑是地上霜</li></ul>
有序列表
<ol> <li>举头望明月</li> <li>低头思故乡</li></ol>
自定义列表
<dl> <dt>水果</dt> <dd>苹果</dd> <dd>芒果</dd> <dt>蔬菜</dt> <dd>西红柿</dd> <dd>马铃薯</dd></dl>
表格标签
必须正确嵌套<table>下子标签是<tr>，<tr>子标签是<td>
三行两列的表格<table border=\"1px\"> <tr><td>1111</td><td>1111</td></tr> <tr><td>2222</td><td>2222</td></tr> <tr><td>3333</td><td>3333</td></tr></table>
合并行rowspan
合并列colspan
媒体元素
视频元素
<video controlls> <source src=\"video/video.webm\" type=\"video/webm\" /> <source src=\"video/video.mp4\" type=\"video/mp4\"/></video>
音频元素
<audio controls> <source src=\"music/music.mp3\" type=\"audio/mpeg\" /> <source src=\"music/music.ogg\" type=\"audio/ogg\"/></audio>
表单语法
<form action=\"url\" method=\"post\" enctype=\"multipart/form-data\"></form>
action 属性，表示要提交或挑战到那个url
method 表示提交方式，有两种 post 和get
enctype=\"multipart/form-data\" 只有在上传文件时，填写该属性，其他情况下不需要填写
作用：跳转页面，通过表单元素向服务器传值
表单元素
所有需要提交到服务器上的数据，表单元素，必须写在包涵在form标签里
文本框
<input type=\"text\" name=\"userName\"/>
密码框
<input type=\"password\" name=\"userPwd\" />
复选框
<input type=\"checkbox\" value=\"上网\" />上网
下拉框
<select name=\"year\"> <option value=\"1990\">1990</option> <option valut=\"1991\">1991</option></select>
css
引入CSS样式
行内样式
写在标签上，通过标签的style属性给标签设置样式<span style=\"color:red\">大家好</span>
内部样式表
写在当前页面的<head>标签中，通过<style>标签，作用于当前页面的样式<style> span{ color:red; }</style>
外部样式表
在外部新建一个css的样式文件，后缀.css 然后通过<link>标签引入进来<link rel=\"stylesheet\" herf=\"css/style.css\" />
找到它，操作它
如何找到标签
基本选择器
标签选择器
类选择器
ID选择器
基本选择器的优先级
ID选择器>类选择器>标签选择器
层次选择器
E F\t后代选择器\t选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F\t子选择器\t选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F\t相邻兄弟选择器\t选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F\t通用兄弟选择器\t选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
结构伪类选择器
E:first-child\t作为父元素的第一个子元素的元素E
E:last-child\t作为父元素的最后一个子元素的元素E
E F:nth-child(n)\t选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type\t选择父元素内具有指定类型的第一个E元素
E:last-of-type\t选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)\t选择父元素内具有指定类型的第n个F元素
属性选择器
E[attr]\t选择匹配具有属性attr的E元素
E[attr^=val]\t选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]\t选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]\t选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配
怎么样给标签加样式
字体样式
font-family\t设置字体类型\tfont-family:\"隶书\";
font-size\t设置字体大小\tfont-size:12px;
font-style\t设置字体风格\tfont-style:italic;
font-weight\t设置字体的粗细\tfont-weight:bold;
font\t在一个声明中设置所有字体属性\tfont:italic bold 36px \"宋体\";
文本样式
color\t设置文本颜色\tcolor:#00C;
text-align\t设置元素水平对齐方式\ttext-align:right;
text-indent\t设置首行文本的缩进\ttext-indent:20px;
line-height\t设置文本的行高\tline-height:25px;
text-decoration\t设置文本的装饰\ttext-decoration:underline;
列表样式
list-style
list-style-type
list-style-image
背景样式
background-color
background-image
background-position
background简写
background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
background-size
边框样式
border-color
border-width
border-style
border简写
border:1px solid #3a6587;
外边距margin
同级标签用margin
margin-top 上边距
margin-bottom 下边距
margin-left 左边距
margin-right 右边距
水平居中 margin: 0px auto;
内边距padding
包涵子父级关系下，用padding
padding-top
padding-bottom
padding-left
padding-right
圆角边框border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-radius: 20px 10px 50px 30px; 四个属性值按顺时针排列
盒子阴影box-shadow
它的值包括 6 个参数：阴影类型，X轴位移，Y轴位移，阴影大小，阴影扩展和阴影颜色。此 6 个参数可以有选择地省略。
box-shadow:5px 5px;
浮动float
float: right;
父级边框塌陷
定位position
透明度
CSS3变形
CSS3过渡
CSS3动画
超链接伪类
a:link\t未单击访问时超链接样式\ta:link{color:#9ef5f9;}
a:visited\t单击访问后超链接样式\ta:visited {color:#333;}
a:hover\t鼠标悬浮其上的超链接样式\ta:hover{color:#ff7300;}
a:active\t鼠标单击未释放的超链接样式\ta:active {color:#999;}
css兼容
IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-
0 条评论
回复 删除
下一页
