1 html的基本结构
页身和页头(! + tab快捷键)
页头:header标签
页身:body标签
<!-- win: ctrl + / --> <!-- mac: command + / --> <!-- ! + tab --> <!-- 文档声明: html文件 html5版本 --> <!DOCTYPE html> <!-- 告诉浏览器 html代码从这里开始 lang="en"声明英文--> <html lang="en"> <!-- 页头 属性的设置 引入css js 相关的资源--> <head> <meta charset="UTF-8"> <!-- 移动端自适应 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 网页标题 --> <title>老王</title> </head> <!-- 页身 --> <body> 123 </body> <!-- 告诉浏览器 html代码从这里结束 --> </html>
2 html常见标签
双标签:
div: 容器标签
h1~6: 字体标签
p: 段落标签
单标签:
br: 换行标签
hr:横线
a:链接标签
img:图片标签
<!-- 1 双标签 --> <!-- 字体标签 大小是从大到小的 --> <h1>itcast</h1> <h2>itcast</h2> <h3>itcast</h3> <h4>itcast</h4> <h5>itcast</h5> <h6>itcast</h6> <!-- 段落标签 --> <p>111</p> <p>111</p> <!-- 2 单标签 --> <!-- 换行标签 --> itcast <br> itcast <!-- 横线标签 --> <hr> <!-- 3 带有属性的标签 --> <!-- 图片标签 --> <img src="./images/002.jpg" alt="百度"> <!-- 链接标签 写链接的时候必须写上http --> <br> <a href="./images/百度一下,你就知道.htm">baidu</a> <!-- <a href="./images/百度一下,你就知道.htm">百度</a> --> <!-- 所有的双标签都可以嵌套 --> <a href="./images/百度一下,你就知道.htm"> <img src="./images/google.png" alt="123"> </a>
注意:标签不区分大小写,但是推荐使用小写。
3 表格标签
table:表格标签
th:表格头部
td:表格数据
tr:表格的行
<!-- table : 表格标签 (属性) border="1px" style="border-collapse:collapse" tr : 表格行标签 th : 表格头标签 td : 表格数据标签 --> <table border="1px" style="border-collapse: collapse;"> <!-- 第一行 --> <tr> <th>name</th> <th>age</th> <th>sex</th> </tr> <!-- 第二行 --> <tr> <td>老王</td> <td>18</td> <td>男</td> </tr> <!-- 第三行 --> <tr> <td>老李</td> <td>20</td> <td>男</td> </tr> </table>
4 列表标签
ol:有序列表标签
ul:无序列表标签
li:列表标签
<!-- 有序列表标签(ol标签) 无序列表标签(ul标签) 列表(li标签) --> <form action=""> </form> <!-- 有序列表标签(ol标签) --> <ol> <li>python</li> <li>java</li> <li>c++</li> </ol> <!-- 无序列表标签(ul标签) --> <ul> <li>python</li> <li>java</li> <li>c++</li> </ul>
5 表单标签
form:表单标签
属性:
action属性 设置表单数据提交地址
method属性 设置表单提交的方式,一般有“GET”方式和“POST”方式, 不区分大小写
<!-- form : 表单标签 label: 标记标签(通常和input标签一起使用) input: 输入标签 (type属性) text - 文本输入框 password - 密码输入框 radio - 单选框 checkbox - 复选框 file - 上传文件 submit - 提交按钮 reset - 重置按钮 (value属性) 设定value值,用于网络间传输 (name属性) 设定key值,用于网络间传输 textarea: 多行文本框 select: 下拉框 option: 选项框 --> <form action=""> <p> <label>姓名:</label> <input type="text"> </p> <p> <label>密码:</label> <input type="password"> </p> <p> <label>性别:</label> <input type="radio"> 男 <input type="radio"> 女 </p> <p> <label>爱好:</label> <input type="checkbox"> 唱歌 <input type="checkbox"> 跑步 <input type="checkbox"> 游泳 </p> <p> <label>照片:</label> <input type="file"> </p> <p> <label>个人描述:</label> <textarea></textarea> </p> <p> <label>籍贯:</label> <select> <option value="">北京</option> <option value="">上海</option> <option value="">深圳</option> <option value="">广州</option> </select> </p> <p> <input type="submit" value="提交"> <input type="reset" value="重置"> </p> </form>
6 css
导入方式(html的头部中导入)
1 外链式(最常用的)
<link rel="stylesheet" href="./css/main.css">
2 内嵌式
<!-- 2 内嵌式 --> <style> /* 在style里写css代码 */ /* 作用于整个页面的所有的div标签的 */ /* div{ background: chartreuse; } */ </style>
3 行内式(基本不用)
<div style="height: 50px; width: 50px; aqua;">itcast</div>
7 选择器
1 标签选择器
标签{
属性:值
}
根据标签来选择标签,以标签开头,此种选择器影响范围大,一般用来做一些通用设置
2 类选择器
需要给标签添加一个 class 属性,一个标签可以使用多个类,一个类选择器
可以作用于多个标签
.类名 {
属性: 值;
}
3 层级选择器
选择器1和选择器2可以是任意的一种选择器
选择器1 选择器2 {
属性=值;
}
4 id 选择器
在一个页面中,id 是唯一的,id 选择器只能作用域一个标签,不推荐使用
#id值 {
属性:值;
}
5 组选择器
将多个选择器放在一块进行设置
选择器1, 选择器2, 选择器3, ... {
}
6 伪类选择器
主要用在用户和网站的交互上, 比如说: 鼠标悬停,改变背景色
选择器:动作{
属性:值;
}