我的IT梦——web前端开发之HTML,CSS（一）
HTML
- HTML全称HyperText Markup Language（超文本标记语言）
- 标签成对出现
<!DOCTYPE html>文档类型定义- < > 标记||标签
charset=UTF-8字符编码集，万国码<head></head>头部<body></body>内容<!-- -->注释- 标题
<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6> - 无序排列
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li></ul> - 有序排列
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li></ol> - 定义列表
<dl>
<dt>第一项</dt>
<dd>第二项</dd></dl> <p></p>文章段落<br/>换行 空格- 引用
<blockquote></blockquote><q></q> - 超链接
<a href="" target=""></a> - 插入图片
<img src="图片所在地址" alt="自己命名，方便查找"> - 粗体
<strong></strong>（强调）<b></b> - 斜体
<em></em><i></i> - 划分区块
<div></div>
HTML,CSS,JavaScript三者的关系
- html 结构，决定网页的结构和内容
- css 表现（样式），设定网页的表现方式
- Js 行为，控制网页的行为
HTML标签
定义缩写
<abbr title="Hyper Text Markup language">html</abbr>
定义“定义”对图片的一个阐述
figure>
<img src="img/151209173849244246.jpg" alt="米奇"/>
<figcaption>米奇</figcaption>
</figure>
视频
<video src="img/movie.mp4" controls autoplay loop></video>
音频
<audio src="img/Mrbaluoke.wav" controls autoplay loop></audio>
表格
<table border="1">
<caption>学生登记表</caption>
<tr>
<th>姓名</th>表头
<th>年龄</th>
<th>班级</th>
<th>备注</th>
</tr>
<tr>
<td>张三</td>
<td>6</td>
<td>1-1</td>
<td>无</td>
</tr>
<tr>
<td>李四</td>
<td>6</td>
<td>1-1</td>
<td>无</td>
</tr>
<tr>
<td>王五</td>
<td>7</td>
<td>2-1</td>
<td>无</td>
</tr>
<tr>
<td colspan="4">由XX学校</td>
</tr>
</table>
表单
- action 提交的路径地址 method 提交方式 get || post
<form action="#" method="post"></form> - 文本框
<input type="text" placeholder="请输入账号" name="username"/> - 密码框
<input type="password" maxlength="6" name="user_password"/> - 纯情按钮
<input type="button" value="搜索"/> - 提交按钮
<input type="submit"/> <button>我是新的按钮</button> - 多选框
足球 <input type="checkbox" name="sport"/>头球 <input type="checkbox" name="sport"/>手球 <input type="checkbox" name="sport" checked/> -
单选框
男 <input type="radio" name="sex"/>女 <input type="radio" name="sex"/> -
label for 一个 id id具有唯一性
<label for="football">足球</label><input type="checkbox" name="sport" id="football"/> -
下拉框
<select name="" id=""><option value="beijing">北京</option><option value="tianjing">天京</option><option value="dongjing">东京</option></select> - 多行文字框
<textarea name="" id=""></textarea> - post 相对 get 更安全 id 具有唯一性 对前台而言可快速找到元素、修改样式等操作 name 对于后台获取数据有用
内联框架
`<iframe src="http://www.baidu.com" width="700" height="500" frameborder="0"></iframe>`
CSS
语法规则
选择器
{
声明;
属性:属性值;
}
通配符
{
margin: 0;
padding: 0; }
标记||标签||元素
h3{
color: #00D600;
font-size: 30px;
font-family: "黑体","Microsoft Yahei",sans-serif; }
id选择器
#test_h4_id{ color: blue; }
类选择器 复用
.test_class{ color: #eea236; }
属性选择器
input[type="text"]{ border: 1px solid red; }
伪类选择器
a 颜色 a:link{ color: #000; }
访问后 a:visited{ color: #ccc; }
鼠标移入||鼠标悬停 a:hover{ color: red; }
a点击时 一瞬间 a:active{ font-size: 20px; }
后代选择器
p span{ color: red;border: 1px solid red; }
子级选择器
p>span{ color: red; border: 1px solid red; }
并集选择器
h1,h2,h3,h4,h5,h6{ font-weight: normal; }
伪元素选择器
.testa:before{ content: "前前前"; }
.testa:after{ content: "反正有大把时光"; }
div{ width: 200px; border: 1px solid; }
div:first-letter{ font-size: 30px; }
div:first-line{ }
权重
！importent>style>id>class>元素>通配符
样式继承
子级的样式不是显示声明，从父级继承，但子级可以单独声明样式不影响父级，文字的样式会继承。
不被继承的：margin，padding，boeder，background
