第十三篇：HTML和CSS入门
一、HTML本质以及在WEB程序中的作用
1.一套规则，浏览器认识的规则。
2.开发者：
学习html规则
开发后台程序
- 写html文件（充当模板的作用）
- 数据库获取数据，然后替换到html文件的指定位置
3.本地测试
- 找到文件路径，直接浏览器打开
- pycharm打开；
4.编写html文件
- doctype对应关系
- html标签，标签内部可以写属性，只能有一个
- 注释： <!-- 注释内容 -->
5.标签分类：
- 自闭合标签
- 主动闭合标签
二、HTML的head内标签
head标签中
- <meta > 编码，跳转，刷新，关键字，描述，IE兼容
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
- title标签
- <link /> 图标，
- <style />
- <script >
三、HTML的body内标签
body标签
- 图标：  空格，> 大于号，< 小于号；
<p> 段落
<br> 换行
<h1> 标题
================
所有的标签分为：
块级标签：div（白板），h系列（加大加粗），p标签（段落和段落之间有间距），
行内标签（内联标签）：span标签（白板），
标签之间可以嵌套
标签存在的意义，css操作，js操作；
ps:Chrome审查元素的使用
四、body内标签之lnput系列
- input系列 + form标签；
input type="text" 文本，name属性
input type="password" 密码，name属性
input type="submit" 提交表单按钮，value属性
input type="buttom" 按钮，value属性
input type="radio" name="gender" value="1" 单选（name相同互斥）
input type="checkbox" name="favor" value="1" 复选框（name批量获取数据）
默认被选中：checked="checked"
input tpye="file" 上传文件；依赖form表单的属性 enctype="multipart/form-data"；
input tpye="reset" 重置
- textarea标签，多行文本
- <select name='city'> <option value='1'></option>，下拉框，
multiple="multiple" 多选框；size=10,显示多个；
- form标签，action="";methed="GET" or "POST"
五、超链接
- a标签，href，target属性,功能：跳转，
锚 href="#i3" <div id="i3"> 标签id不能重复；
六、图片及表格
- img标签 src属性，title,alt属性显示关键字；
- 列表；<ul><li>，<ol><li> <dl><dt><dd>
- 表格：
<table> 表
<thead>
<tr>
<th>
<tbody>
<tr> 行
<td> 列
合并单元格：
<td colspan="2"> 列合并；
<td rowspan="2"> 行合并；
七、fieldset标签和label标签
- label标签 for="idname" ,结合input使用；
<label for="username">用户名：<label>
<input id="username" tpye="text">
- fieldset 标签；legend
- div
- span
八、标签总结
- 20个标签
九、CSS选择器
1.在标签上设置style属性；
background-color:#2342345;
height:48px;
...
2.编写样式：
1.标签的style属性中可以写；
2.写在head标签style标签中；
- id选择器
#i1{
background-color:#2342345;
height:48px;
}
id="i1"
- class选择器（最常用的）
.c1 {}
class="c1"
- 注释 /* 注释内容 */
- 标签选择器
div {
height:48px;
}
所有的div标签设置此样式；
- 关联选择器（层级选择器）
.c1 div {
height:48px;
}
.c1类下面的div标签设置此样式；
- 组合选择器
.i1,.i2,.i3{
height:48px;
}
- 属性选择器
input[type="text"]{
height:48px;
}
对选择到的标签再通过属性筛选；
3.优先级，标签上的style优先，其他css按照编写顺序，就近原则；
4.引入css文件；<link ref="stylesheet" href="am.css" />
5.边框
border:1px solid red,宽度，样式，颜色
border-left border-top
6.height:48px; 高度
width:80%; 宽度
font-size:18px; 字体大小
text-aling:center; 水平居中
line-height:48px; 垂直居中
font-weight:bold； 字体加粗
十、CSS之float样式
7.float
float:left;让标签飘起来；块级标签也可以堆叠；
<div style="clear:both;">
十一、CSS之display样式
8.display:inline
display:block
display:inline-block
display:none 让标签消失；
行内标签无法设置高度宽度边距,块级标签可以设置；
十二、CSS之内外边距
9. padding 内边距,自身发生变化
margin(0,auto)外边距
实战练习：跑马灯
<html>
<body>
<div id="i1">欢迎领导莅临指导</div>
<script>
function func1(){
t=document.getElementById("i1")
t.in
}
setInterval()
</script>
</body>
</html>
