2.标签
- 每一个标签都有开头和结尾
- 每一个标签都是用<>括起来的
- 每一个标签的结尾都必须用"/"结尾
3.网页的标签结构
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body></body> </html>4.展示HTML的各类标签<html><head>
<title>常用元素标签</title> <style type="text/css"> /*CSS样式一般写在这儿,这是CSS注释*/ body{ color:red; } </style></head><body> <!-- html中的注释格式 --> <h1>1级标题</h1> <h2>2级标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>6级标题</h6> <br /><!-- 换行符(空标签) --> <strong>粗体文字(一般中果仁强调语义的字体)</strong> <p>段落</p> <blockquote>对长文本引用,左右会有缩进的效果</blockquote> <span>没有语义,用于表示特殊的样式</span> <!-- html代码忽略回车,以及1个以上的空格,多个空格应使用" ",例子如下 --> <p>没想到输入 空格 这么麻烦,23333</p> <!-- pre元素,保留语言代码段,保留空格,回车,例子如下 --> <pre> 1 +1--------- 2 </pre> <ul> <li>ul-li,无序的信息列表 </li> <li>ul-li,无序的信息列表 </li> </ul> <ol> <li>ol-li,有序的信息列表:1 </li> <li>ol-li,有序的信息列表:2 </li> </ol><table> <tr> <th>名字</th> <th>爱好</th> </tr> <tr> <td>彭彭</td> <td>吃</td> </tr> <tr> <td>丁满</td> <td>跳舞</td> </tr> </tbody> </table> <!-- target="_blank" 使用新页面打开 --> <a href="http://www.baidu.com"">打开百度</a> <!-- a标签超链接 --> <img src="图片http地址" alt="图片无法显示,用此文字替代" > <a name="maodian">对锚点的描述</a> <a href="#maodian">到锚点标记的位置</a>
</body></html>
5.input
<input type="text"/>文本输入框
type类型：
1. text 文本
2. password 密码
4. button 按钮
5. submit 带有提交功能的按钮
6. hidden 隐藏
7. image 图像
8. chaeckbox 多选框
9. radio 单选框
10. email 邮件
11. date 日期
12. number 数字
用户名<input type="text"/>
密码<input type="password"/>
邮件<input type="Emile"/>
网址链接<input type="url"/>
6.文本域、下拉框
用到的标签：select name option value
代码书写格式：
<select name="" id="">
<option value=""></option>
重置按钮
1. 用到的单词：reset（重置）
2. 代码书写格式：
<form action="">
<input type="reset"value="重置" />
<form/>
7.CSS的三种用法
<!-- 关于3种CSS写法，内联式 > 内嵌式 > 外联式。-->
<!-- 写法1"外联式CSS样式":href可修改,文件后缀.css,其他都是固定写法 -->
<link rel="stylesheet" href="url"/> <!-- 写法2"嵌入式CSS样式" --> <style type="text/css"> p{ font-size:20px;/*设置文字字号*/ } </style></head><body> <p>好好学习,天天开心</p> <br /> <!-- 写法3"内联式CSS样式" --> <p style="color:blue">好好学习,天天向上</p>
8.选择器
元素选择器
类选择器
ID选择器
属性选择器
包含选择器
通配选择器
元素选择器
所有的html元素都是可以作为元素选择器的
ID选择器
id相当于一个身份证每个人的身份证都是不同的
id就是唯一，是一个唯一的名称
类选择器
class类选择器
例：
< h1 class="left">一行< /h1>应用的时候名称应该是h1.left样式
< h1 class="right">二行< /h1>应用的时候名称应该是h1.right样式
伪类选择器
hoever
新建一个css格式文本
例：
p：hover{
文本样式
}
在html格式内输入：<link rel="stylesheet" href="css格式文本链接"/>
注意事项
多个声明必须用“；”隔开
多个声明用一个选择器用“，”隔开
属性与值之间用：隔开
每个选择器可以拥有多条声明
每个声明由一个属性和一个值组成
9.初生化样式
*{
morgin：0；
padding：0;
}