html基础知识整理
HTML
1.互联网原理：上网即请求数据
1.1 html:超文本标记语言
1.2服务器作用：存储数据
1.3浏览器作用：接收和发送http请求
1.4 http:超文本传输协议
html骨架：《html>
<head>配置HTML页面</head>
《body》书写网页内容《/body>
</html>
DTD：文档定义类型
DTD作用：说明使用的html是哪一种规范
html标签：
Head:配置html页面
title：标题
meta: 配置字符集
body: 书写网页内容
小测试：h1标签他的用作？
标明语义，加粗是css完成的
html语法：对换行，空格,缩进不敏感，对嵌套敏感
标签之间有空白折叠现象
标签语法：
标签一般是成对出现，单标签除外
标签名必须用一对加括号包裹
结束标签要书写关闭符号
标签分类：
文本标签：p span input img b u i a
容器级标签：div ul ol li h1
标签属性： key=”value”
<h1></h1>
<p></P>
<a href=”” targrt=”-blank” title=””>超链接</a>
<img src=”图片路径” alt=”加载失败显示的内容” title=”鼠标悬停显示的内容”/>
路径：
相对路径：相对与网页的路径
同级查找：图片名.后缀名
子级查找：images/图片名.后缀名
上级查找:../images/图片名.后缀名
HTML
一、div+css布局
绝大部分网页布局都是div+css布局。
优点：结构和样式分离，偏于代码的维护
结构及样式如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
<style type="text/css">
/*清除默认样式*/
* {
padding: 0px;
margin: 0px;
}
.header {
width: 100%;
height: 100px;
background-color: #eee;
}
.logo {
float: left;
width: 200px;
height: 100px;
background-color: red;
}
.nav {
float: right;
width: 600px;
height: 100px;
background-color: red;
}
.content {
width: 100%;
height: 500px;
background-color: #eee;
margin-top: 30px;
}
.aside {
float: left;
width: 300px;
height: 500px;
background-color: green;
}
.main {
float: right;
width: 600px;
height: 500px;
background-color: green;
}
.footer {
width: 100%;
height: 100px;
background-color: #eee;
margin-top: 30px;
}
</style>
</head>
<body>
<!--结构-->
<!--header头部-->
<div class="header">
<div class="logo">logo</div>
<div class="nav"">导航栏</div>
</div>
<!--content内容-->
<div class="content">
<div class="aside">aside侧边栏</div>
<div class="main">main内容</div>
</div>
<!--footer尾部-->
<div class="footer" > footer</div>
</body>
</html>
二、列表
列表有3种：ul无序列表，ol有序列表，dl自定义列表
列表：相类似，相近的内容使用列表语义
2.1无序列表
作用：给文本添加无序列的语义
ul:unordered list
li: list item
ul是容器级标签，li也是容器级标签，内部可以书写任何标签，甚至可以书写ul>li
ul内部可以嵌套一个或者多个li标签，li之间没有先后顺序
无序列表前面的小圆点，样式是css设置。
|
1 list-style: square; |
2.2 有序列表
作用：给文本添加有序列表的语义
ol:ordered list
li:list item
Ol>li
规则：
每一个列表项之间有顺序之分
ol,li也是一组成对出现的标签，ol一定嵌套li。
ol内部嵌套一个或者多个Li
ol,li都是容器级标签，ol内部只能书写Li，li是容器级可以书写任何内容
有序列表前面的数字，css设置
|
1 list-style: none;/*清除数字*/ |
2.3 自定义列表
作用：给文本添加自定义列表语义
dl: definition list
dt: definition title
dd: definition description
Dl>dt>dd
dl嵌套dt和dd，dt和dd是同级关系，dt是标题，dd是对标题解释说明（dl>dt+dd）
dl，dt,dd都是容器级标签
dl内部书写dt和dd，可以书写多组dt和dd,dd是对dt解释说明，dd可以有多条也可以没有。
一般我们在使用dl时，只嵌套一组dt和dd，便于样式书写。
结构：
|
1 <!-- 一般一个dl嵌套一组dt和dd --> 2 <dl> 3 <!-- 标题 --> 4 <dt>苹果公司</dt> 5 <dd>苹果是美国公司</dd> 6 <dd>苹果公司收益很多</dd> 7 </dl> 8 9 <dl> 10 <!-- 标题 --> 11 <dt>华为公司</dt> 12 <dd>华为总部在深圳</dd> 13 <dd>是国内很好的公司</dd> 14 </dl> 15 16 17 <dl> 18 <dt>小米公司</dt> 19 <!-- dt也可以没有dd，表示没有解释说明 --> 20 </dl> |
样式：
|
1 <style type="text/css"> 2 dl { 3 float: left; 4 width: 300px; 5 height: 400px; 6 7 margin-left: 30px; 8 } 9 </style> |
三、表格
3.1 基础表格
table: 表格
tr: 行
td: 单元格
关系：
table > tr > td
最简单表格：每一行单元格个数相同
|
1 <table> 2 <tr> 3 <td>第1行第1个单元格</td> 4 <td>第1行第2个单元格</td> 5 <td>第1行第3个单元格</td> 6 </tr> 7 <tr> 8 <td>第2行第1个单元格</td> 9 <td>第2行第2个单元格</td> 10 <td>第2行第3个单元格</td> 11 </tr> 12 <tr> 13 <td>第3行第1个单元格</td> 14 <td>第3行第2个单元格</td> 15 <td>第3行第3个单元格</td> 16 </tr> 17 </table> |
如果表格有表头的概念？？？
td替换成th即可
3.2 合并单元格
单元格合并利用td（th）两个属性
跨行合并colspan
列合并rowspan
属性值：是数字合并几行（列）就书写几，没有单位
|
1 <table> 2 <tr> 3 <td colspan="2">1</td> 4 <td>2</td> 5 <td>3</td> 6 </tr> 7 <tr> 8 <td>4</td> 9 <td rowspan="2">5</td> 10 <td colspan="2">6</td> 11 </tr> 12 <tr> 13 <td>7</td> 14 <td>8</td> 15 <td>9</td> 16 </tr> 17 </table> |
3.3 三个划分区域的语义标签
标题caption
表头区域thead
表格主体tbody
关系：table>caption+(thead>tr>th)+(tbody>tr>td)
|
1 <table> 2 <!-- 标题 --> 3 <caption>人员名单</caption> 4 <!-- 表头 --> 5 <thead> 6 <tr> 7 <th>姓名</th> 8 <th>性别</th> 9 <th>年龄</th> 10 </tr> 11 </thead> 12 <!-- 主体部分 --> 13 <tbody> 14 <tr> 15 <td>小明</td> 16 <td>男</td> 17 <td>20</td> 18 </tr> 19 <tr> 20 <td>小明</td> 21 <td>男</td> 22 <td>20</td> 23 </tr> 24 <tr> 25 <td>小明</td> 26 <td>男</td> 27 <td>20</td> 28 </tr> 29 <tr> 30 <td>小明</td> 31 <td>男</td> 32 <td>20</td> 33 </tr> 34 </tbody> 35 </table> |
四、表单
4.1 form标签
将所有的表单元素都书写在form标签内部
form标签是功能标签不是结构标签
提交位置：action
提交方式：method
|
1 <form action="1.php" method="get"></form> |
表单元素：提供给用户进行输入或者选择控件
属性：type，根据type属性值，有不同的表单类型
4.2 单行文本框
type: text
name: 名字
value: 默认值
|
1 请输入用户名：<input type="text" name="yonghuming" value="用户名" /> |
4.3 密码框
Type：password
|
1 密码：<input type="password" name=""mima" /> |
4.4 单选框
type属性值：radio
规则：同一组单选框，必须有相同的name名
表单被选中ckeched
|
1 <p> 2 请选择性别： 3 <input type="radio" name="sex" />男性 4 <input type="radio" name="sex" checked="checked" />女性 5 </p> |
4.5 label标签
作用：可以绑定单选框
|
1 请选择性别： 2 <input type="radio" name="sex" id="nan" /><label for="nan">男性</label> 3 <input type="radio" name="sex" id="nv" checked="checked" /><label for="nv">女性</label> |
4.6 复选框
type属性值：checkbox
规则：
|
1 <p> 2 请选择爱好： 3 <input type="checkbox" name="fav" id="study" checked="checked" /><label for="study">学习</label> 4 <input type="checkbox" name="fav" id="sing" /><label for="sing">唱歌</label> 5 </p> |
4.7 按钮
三种按钮：
普通按钮： button
提交按钮：submit
重置按钮：reset(将用户输入清空)
|
1 普通按钮：<input type="button" value="按钮" /> 2 提交按钮：<input type="submit" value="立即注册" /> 3 重置按钮：<input type="reset" /> |
<a>标签可以模拟按钮
4.8 文本域
textarea:文本域 是双标签
也可以书写默认文本，在标签中间
|
1 <textarea name="" id="" cols="30" rows="10">请书写意见或者建议</textarea> |
4.9 下拉框
Select>option
1 请选择你喜欢的城市：
2 <select name="city" id="city">
3 <!-- value提交值 -->
4 <option value="01">北京</option>
5 <option value="02" selected="selected">上海</option>
6 <option value="03">深圳</option>
7 <option value="04">广州</option>
</select>
一般我们使用无序列表模拟下拉框
五、html杂项
5.1 注释
快捷键：ctrl + /
特点：注释不会渲染在浏览器页面中
作用：一般标注某个结构开始，结束,或者不显示浏览器中的代码可以添加注释
|
1 <!-- 注释 --> |
5.2 字符实体
字符实体（转义字符）：一些有特殊功能符号，直接书写在代码在浏览器渲染时不能正常显示我们想要的效果
语法：
|
1 &关键字; |
|
1 空格： 2 大于号：>> 3 小于号：<< 4 版权信息：©© |
5.3 废弃标签
b,u,i,em,strong常用做小钩子（文本级标签）
b: 默认加粗
u: 默认下划线
i: 默认倾斜
em: 语义加强，倾斜
strong: 语义加强，加粗
5.4 色值表示法
单词表示法：
|
1 red,lightblue |
十六进制表示法：#
|
1 color: #db9408; |
rgb(,,)表示法
|
1 color: rgb(219,148,8); |
|
总结： 无序列表：ul>li 有序列表：ol>li 自定义列表：dl>dt+dd
表格： table > caption + (thead > tr >th)+( tbody > tr > td) 单元格合并：属性值数字 rowspan: colspan:
表单：
|
