HTML5和CSS3
2018-06-29 10:40:32 1 举报AI智能生成
html5和css3基础
作者其他创作
大纲/内容
HTML
Hyper Text Markup Language（超文本标记语言）
浏览器
微软
Google
苹果
Opera
Mozilla
网页编辑工具
记事本
Dreamweaver
WebStorm
HBuilder
HTML基本结构
<html>
<head>
<title>这是我的第一个网页</title>
</head>
<body>
这是我的第一个网页
</body>
</html>
<head>
<title>这是我的第一个网页</title>
</head>
<body>
这是我的第一个网页
</body>
</html>
网页的基本标签
标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段落标签
<p>北京欢迎您，有梦想谁都了不起！</p>
<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>
<li>窗前明月光</li>
<li>疑是地上霜</li>
</ul>
有序列表
<ol>
<li>举头望明月</li>
<li>低头思故乡</li>
</ol>
<li>举头望明月</li>
<li>低头思故乡</li>
</ol>
自定义列表
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>芒果</dd>
<dt>蔬菜</dt>
<dd>西红柿</dd>
<dd>马铃薯</dd>
</dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>芒果</dd>
<dt>蔬菜</dt>
<dd>西红柿</dd>
<dd>马铃薯</dd>
</dl>
表格标签
<table>标签是表格，<tr>表示行 <td>表示单元格,列
必须正确嵌套<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>
<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>
<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>
<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>
</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>
<option value="1990">1990</option>
<option valut="1991">1991</option>
</select>
css
引入CSS样式
行内样式
写在标签上，通过标签的style属性给标签设置样式
<span style="color:red">大家好</span>
<span style="color:red">大家好</span>
内部样式表
写在当前页面的<head>标签中，通过<style>标签，作用于当前页面的样式
<style>
span{
color:red;
}
</style>
<style>
span{
color:red;
}
</style>
外部样式表
在外部新建一个css的样式文件，后缀.css 然后通过<link>标签引入进来
<link rel="stylesheet" herf="css/style.css" />
<link rel="stylesheet" herf="css/style.css" />
找到它，操作它
如何找到标签
基本选择器
标签选择器
类选择器
ID选择器
基本选择器的优先级
ID选择器>类选择器>标签选择器
层次选择器
E F 后代选择器 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F 子选择器 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F 通用兄弟选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
结构伪类选择器
E:first-child 作为父元素的第一个子元素的元素E
E:last-child 作为父元素的最后一个子元素的元素E
E F:nth-child(n) 选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type 选择父元素内具有指定类型的第一个E元素
E:last-of-type 选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素
属性选择器
E[attr] 选择匹配具有属性attr的E元素
E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val] 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配
怎么样给标签加样式
字体样式
font-family 设置字体类型 font-family:"隶书";
font-size 设置字体大小 font-size:12px;
font-style 设置字体风格 font-style:italic;
font-weight 设置字体的粗细 font-weight:bold;
font 在一个声明中设置所有字体属性 font:italic bold 36px "宋体";
文本样式
color 设置文本颜色 color:#00C;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:20px;
line-height 设置文本的行高 line-height:25px;
text-decoration 设置文本的装饰 text-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 未单击访问时超链接样式 a:link{color:#9ef5f9;}
a:visited 单击访问后超链接样式 a:visited {color:#333;}
a:hover 鼠标悬浮其上的超链接样式 a:hover{color:#ff7300;}
a:active 鼠标单击未释放的超链接样式 a:active {color:#999;}
css兼容
IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-
0 条评论
下一页
