----------------------- HTML ---------------------
- !tab (快速生成框架)
- 在标签中, 必须写
----------------------- HTML 常用标签 ---------------------
1. 排版标签
<html> 根标签,最大的标签
<head> 网页头部显示内容
<title></title> 文档标题
<hx></hx> 标题标签
<p></p> 段落换行标签
<hr /> 水平线标签
<br /> 换行标签
<div></div> 用来布局的,只能放一个
<span></span> 用来布局的,可以放好多个span
<b></b>和<strong></strong> 文字加粗标签,推荐使用strong
<i></i>和<em></em> 文字斜体标签,推荐使用em
<s></s>和<del></del> 文字加删除线显示,推荐del
<u></u>和<ins></ins> 文字加下划线显示,不赞成使用u
2. 图像标签
- img scr= 该语法中src属性用于指定图像文件的路径和文件名
scr ="" <img src="./" alt="">
<img src="../" alt="">
alt ="" 图像不能显示时的替换文本
title="" 鼠标悬停图片上时显示的内容
width="" 设置图像的宽度
height="" 设置像素的高度
高和宽只需要设置一个就可以,会等比例缩放
border="" 设置图片边框 后面会使用css来做,这里只要记住这个单词就好了
3. a 链接标签
<a href="跳转目标">文本或图像</a>
<a href="demo.html"内部链接 </a>
<a href="#"> 空连接</a> 点击链接 会回到顶部 有一个刷新的效果
<a href="javascript:;"> 空连接</a> 这样不会跳转刷新
<a href="网址"> <img src="文件名" /> </a> 图像链接
<a href="" target="_blank"> 文本或图像 </a>
//默认是_self,_blank是在新窗口打开
4. base 标签
2. base可以 设置整体链接的打开方式
3. base写到<head></head>之间`
4. 把所有的连接都默认添加target="_blank" (在新的链接打开)
<base target="_blank"> // 在新的链接打开
5. pre 标签 预格式化文本 (基本不用)
<pre>
不需要段落和换行标签了, 可以对空格和空行, 进行控制
</pre>
6. 特殊字符(理解)
- 空格符: 
- 大于号:>
- 小于号: <
----------------------- HTML 表格 table ---------------------
1. 创建表格
- table 用来定义一个表格标签
- caption 表格标题
- thead 用于定义表格的头部。用来放标题之类的东西
- tbody 用于定义表格的主体。放数据本体
- tfoot 放表格的脚注之类
- tr 标签用来定义表格中的行,必须嵌套在table标签中
- th 表头单元格标签
- td 用来定义表格中的单元格,必须嵌套在标签中
<table>
<caption>我是表格标题</caption>
<thead>表格的头部,标题之类</thead>:用于定义。用来放的东西。
<tbody>表格的主体。放数据本体</tbody>:
<tfoot>表格的底部</tfoot>
<tr> // tr 放在 thead tbody tfoot 里面
<th>表头单元格标签</th>
<td>单元格内的文字</td>
</tr>
</table>
2. title 表格属性
9. border:设置表格的边框,默认参数为0,这时不显示表格,可以改为1
10. height: 高
11. width: 宽
12. align: 水平对齐方式 三种方式:left左,center中,right右
13. cellspacting: 单元格与单元格之间的距离,一般设置为0
14. cellpadding: 内容与单元格边框的距离
经常有个说法,三参为0,border cellpadding cellspacing为0
3. 合并单元格(难点)
- 跨行合并:rowspan=“合并单元格的个数”
- 跨列合并:colspan="合并单元格的个数“
- 合并单元格顺序 (先上 后下 先左 后右的顺序)
- 合并单元格三部曲
1.先判断是跨行还是跨列合并
2.根据 先上 后下 先左 后右的原则找到目标单元格,然后写上合并方式 还有要合并的单元格数量
3.删除多余的单元格
---------- HTML 列表标签 不需要写table ----------
1. ul li 无序列表
2. ol li 有序列表
3. dl li 自定义列表
4. form 表单域
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
属性 值 用处
action url地址值 用于指定接收并处理表单数据的服务器程序的url地址
method get/post 用于设置表单数据的提交方式,其取值为get或者post
name 名称 用于指定表单的名称,以区分同一个页面中的多个表单
5. 表单域中的 input 控件(重点)
属性 属性值 描述
text 单行文本输入框 昵称,用户名
password 密码输入框 密码,输入内容不可见
radio 单选按钮 单选,性别 加入这个代码就可以了
checkbox 复选框 多选,爱好
type button 普通按钮 就是普通按钮,你给他什么提示,他就显示什么,请输入ID
submit 提交按钮 不需要value来提示,默认就是提交,提交注册,确认注册
reset 重置按钮 重置所填,重置已经输出的内容
image 图像形式的提交按钮 把文字替换成图片按钮,imsge是不带s的
file 文件域 上传文件按钮
hidden 隐藏域 可以当变量来用 不是给用户用的 是给程序员用的
accept(file的) "image/png,image/jpg" 可以指定 用户选择什么类型的文件
name 用户定义 控件的名称 自己定义控件的名称,除了单选和复选其他不能重复
value 用户定义 input控件中的默认文本值 value后面填写默认提示内容
size 正整数 input控件中在页面显示的宽度
checked 默认选择 表示那个单选或者复选按钮一开始就被选中了
- 补充几个属性:
placeholder 输入的内容不需要删除(submit 按钮没有该属性)
maxlength这个用于设置输入的最大个数,比如游戏ID名称 和设置的最大密码个数
**** 可以当变量来用 不是给用户用的 是给程序员用的
6. label 标签(理解)
1.绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会获得输入焦点
<label>
用户名: <input type="radio" name="username" value="请输入用户名"
</label>
2.第二种比较常用的 用法for属性规定label与哪个表单元素绑定
分两个步骤:看下面代码
<label for="nc">昵称:</label>
<input type="text或者其他都可以" id="nc" />
for=“x”,然后后面input也加上id=“x”
理解:当鼠标点击label标签里面的文字时,光标会定位到指定的表单里面点击文字,会直接和点到框框里时一样的效果
7. textarea控件(文本域)
- <textarea > 文本内容 </textarea>
ols=“每行中的字符数”
rows"显示行数"实际开发不用
8. select下拉列表
- option 里面的下拉选项
里面的属性 selected = "selected"时,当前选项即为默认选项
<select>
<option>选项1</option>
<option>选项2</option>
<option selected="selected">选项3</option>
</select>
----------------------- CSS 基础选择器---------------------
- 标签选择器 p、div
- 类选择器(class)以及多类名 .class
- ID选择器 #id
- 通配符选择器 *
----------------------- CSS 复合选择器 --------------------
- 后代选择器 ul li { 样式声明 }
- 子选择器 div > p { 样式声明 }
- 并集选择器 ul,div { 样式声明 }
- 伪类选择器—链接伪类选择器
1.未访问的链接 a:link 把没有点击过的{
访问过}链接选出来*/
a:link {
}
2.选择点击过的链接 a:visited */
a:visited {
}
3.选择鼠标进过的链接变成蓝色 a:hover */
a:hover {
}
4.选择鼠标正在按下还没松开的那个链接 a:active */
a:active {
}
/5.注意事项:必须要顺序书写,LVHA的顺序, 先 link visited hover active */