1.图片路径
img的必须属性就是src
<img str="" title="" alt=""></img>//其中title是点在图片上显示出来的文字,alt在图片不能显示的时候显示的文字
当位于同一级路径 的时候(图像文件位于HTML文件的同一级)<img src="***.jpg">
当位于下一级路径的时候(图像文件位于HTML文件的下一级)<img src="***/***.jpd"
当位于上一级路径时候(图像文件位于HTML文件的下一级)<img src="***../***.jpd"
2.空格大于小于
(空格  ) (大于号 <) (小于号 >)
3.表格
<table></table>是用于 定义表格的标签
<tr></tr> 标签用于定义表格中的行
<td></td>用于定义表格中的单元格
align 规定表格相对于周围元素的对齐方式 属性值有left (向左看齐) right(向右看齐) center(居中)
border 规定表格是否拥有边框
cellpadding 规定单元边沿与内容的距离
cellsapcing 规定单元格之间的距离
跨行合并：rowspan="合并单元格的个数" 比如<tr rowspan="2"></tr>
跨列合并：colspan="合并单元格的个数" 比如：<td colspan=“2”></td>
4.列表
ul,ol.li 有序列表,无序列表,定义列表项
（<ul>里面不能插除了<li>之外的标签，要查其它的标签要写在<li>里面）例如<li ><a href="***"></a></li>
5.表单
我们用的是<from></from>的形式
<form action=“url地址” method=“提交方式” name=“表单域名称">
各种表单元素控件
</form>
在input标签当中,包含type属性
button 按钮属性
checkbox 复选框
checked 表示默认选中状态。用于单选按钮和复选按钮。
file 文件上传
hidden 隐藏输入字段
password 密码字段
radio 单选按钮(当选取一样name才是单选)
reset 重置按钮,清楚表单内的所有数据
submit 提交按钮
text 输入文本
textarea
<textarea rows="3" cols="20">
文本内容
</textarea>
cols=“每行中的字符数” ，rows=“显示的行数”
6.CSS部分
属性和属性值之间用英文“:”分开
后代选择器 中间用空格分隔
ul li {
样式声明
} /* 选择 ul 里面所有的 li标签元素 */
子元素选择器
div > p {
样式声明
} /* 选择 div 里面所有最近一级 p 标签元素 */
font-family 属性定义文本的字体系列。
使用 font-size 属性定义字体大小。
使用 font-weight 属性设置文本字体的粗细。normal(正常) bold(加粗) 100–900(自己定义大小)
text-align 用于设置元素内文本内容的水平对齐方式。
text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离.
外部样式表（链接式） <link rel="stylesheet" href="css/***"></link>
1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 <div></div>
2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
3. 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
文字类的元素内不能使用块级元素
<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
HTML 元素一般分为块元素和行内元素两种类型
行内元素不可以改变高度宽度
元素模式的转换
转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;
border-style
边框有 solid实线 none无边框
颜色
边框边的宽度
边框的简写 border:1px solid red;
外边距可以让块级盒子水平居中，但是必须满足两个条件：
① 盒子必须指定了宽度（width）。
② 盒子左右的外边距都设置为 auto 。
padding 属性用于设置内边距，即边框与内容之间的距离。
padding：5px 1个值，代表上下左右都有5px内边距
padding：5px 10px 2个值，代表上下内边距是5像素，左右内边距是10像素
padding：5px 10px 20px 3个值，代表上内边距是5像素，左右内边距是10像素，下内边距是20像素
padding：5px 10px 20px 30px 4个值，上是5像素，右是10像素，下是20像素，左是30像素，顺时针转
去掉 li 前面的 项目符号(小圆点)
list-style: none;
position属性来设置
static 静态定位
relative 相对定位
absolute 绝对定位
relative 相对定位的特点：（务必记住）
1. 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。
absolute绝对定位的特点：（务必记住）
1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3. 绝对定位不再占有原先的位置。（脱标）
我是学习这位大神的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
<title></title>
</head>
<body>
<!-- 文本框 text -->
<!-- 多行文本框 textarea -->
<!-- 密码 password-->
<!-- 单选按钮 radio 其中那个input里面的属性必须要是name是相同的-->
<!-- 复选框 checkbox 其中那个input里面的属性必须要是name是相同的-->
<!-- 下拉列表框 select-->
<!-- 提交按钮 sumbit-->
<!-- 普通按钮 button-->
<!-- 重置按钮 reset-->
<!-- 网站网址 url -->
<!-- 邮箱的应用 email -->
<!--日期类型 date -->
<!-- 数字的应用 number -->
<!-- 滚动属性 range -->
<!-- 必须提交 required -->
<form >
请输入你的姓名
<input type="text" name="yourname" value=".." maxlength="15" /><br>
请输入你的地址
<input type="text" name="youradr" value=".." maxlength="15" /><br>
<textarea rows="10" cols="7"></textarea><br>
<input type="submit" name="" id="" value="提交" /><br>
<input type="password" name="yourpaw" /><br>
<input type="radio" name="book" id="" value="book1" />1
<input type="radio" name="book" id="" value="book2" />2
<input type="radio" name="book" id="" value="book3" />3
<input type="radio" name="book" id="" value="book4" />4
<input type="radio" name="book" id="" value="book5" />5
<!-- name需要是一样的才可以 -->
<!-- 复选框 -->
<input type="checkbox" name="book" id="" value="book1" />6
<input type="checkbox" name="book" id="" value="book" />7
<input type="checkbox" name="book" id="" value="book" />8
<input type="checkbox" name="book" id="" value="book" />9
<input type="checkbox" name="book" id="" value="book" />10
<!-- name需要相同 -->
</body>
</html>
扫一扫
4569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
