1.web的标准三层结构
结构(html):用于对网页元素进行整理和分类-- 好比人的身体
表现(css):用于设置网页元素的版式,颜色,大小等外观样式-- 好比人的着装
行为(js):指网页模型的定义及交互的编写-- 好比人的行为动作
2.html骨架标签
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
3.HTML标签的关系
1.嵌套关系(父子关系)
<head>
<title></title>
</head>
2.并列关系(兄弟关系)
<head></head>
<body></body>
4.排版标签
1.标题标签:h1~h6
2.段落标签:<p></p>
3.水平线标签:<hr/>
4.换行标签:<br/>
5.两个重要的盒子标签:<div></div> 一行只能放一个div <span></span>一行可以放多个span
5.文本格式化标签
1.加粗标签:<b></b>或<strong></strong> 推荐用strong
2.斜体标签:<i></i>或<em></em> 推荐用em
3.加删除线标签:<s></s>或<del></del> 推荐用del
4.加下划线标签:<u></u>或<ins></ins> 推荐用ins
6.图像标签
<img 属性1='',属性2='',.../>必须有属性
属性 属性值 描述
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 数字 设置图像边框的宽度
7.链接标签
<a></a>
属性 作用
href 用于指定链接目标的url地址
target 用于指定链接页面的打开方式,有_self和_blank两种,_self为默认值,_blank为在新 窗口中打开方式
8.注释标签
<!-- 注释语句 -->
9.锚点定位
分两步:1.使用相应的id名标注跳转目标的位置 <h3 id='tree'></h3>
2.使用链接文本链接<a href='#tree'></a>
10.base标签
设置整体链接打开状态,base写到<head></head>之间
11.pre标签
按原来写的格式显示在页面上,是保留空格和换行的
12.特殊字符
特殊字符 描述 字符代码
空格符
< 小于号 <
> 大于号 >
& 和号 &
¥ 人民币 ¥
© 版权 ©
® 注册商标 ®
° 摄氏度 °
± 正负号 ±
✖ 乘号 ×
➗ 除号 ÷
² 平方 ²
³ 立方 ³
13.表格
表格是用来展示数据的,可以让数据展示的整齐规范
表格标签:<table></table>
行标签:<tr></tr>
单元格标签:<td></td>
属性 含义
border 设置表格的边框(默认border=0,无边框)
cellspacing 设置单元格与单元格边框之间的空白距离
cellpadding 设置单元格内容与单元格边框之间的空白间距
width 设置表格宽度
height 设置表格高度
align 设置表格再网页中的水平对其方式(left,center,right)
表头单元格:<th></th>会让文字加粗居中
表格标题caption:<table>
<caption></caption>
</table>
合并单元格
跨行合并:rowspan='合并单元格的个数'
跨列合并:colspan='合并单元格的个数'
合并单元格顺序:先上后下 先左后右
合并单元格三部曲:1.先确定是跨行还是跨列2.根据先上后下,先左后右的原则找到目标单元格合并3.删除多余的单元格
表格的划分:thead,tbody,tfood 头部,中部,尾部
14.列表标签
1.无序列表
<ul>
<li></li>
<li></li>
....
</ul>
<ul>中只能嵌套<li>,在<ul>下直接嵌套其他标签是不被允许的
2.有序列表
<ol>
<li></li>
<li></li>
...
</ol>
3.自定义列表
<dl>
<dt></dt>
<dd></dd>
...
<dt></dt>
<dd></dd>
</dl>
15.表单标签
1.<input type='' value=''/> type属性值不同,可以指定不同的标签
属性 属性值 描述
type text 单行文本输入框
password 密码输入框
radio 单选按钮
checkbox 复选框
button 普通按钮
submit 提交按钮
reset 重制按钮
image 图像形式的提交按钮
file 文件域
name 由用户自定义 控件的名称
value 由用户自定义 inpu控件中默认的文本值
size 正整数 input控件在页面中的显示宽度
checked checked 定义选择控件默认被选中的项
maxlength 正整数 控件允许输入的最多字符数
2.label标签
<label></label>作用:1.用于绑定一个元素,当点击label标签时,被绑定的表单元素就会获得输入焦点 2.通过for 和 id来控制
3.textarea(文本域)
<textarea cols='每行中的字符数' rows='显示的行数'>
文本内容
</textarea>
4.select下拉列表
<select>
<option></option>
<option><option>
...
</select>
5.表单域
<form action='url地址' method='提交方式' name='表单名称'>
</form>