Html边学边记——初级入门
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”方式, 不区分大小写
表单元素属性:
- name属性 设置表单元素的名称,该名称是提交数据时的参数名
- value属性 设置表单元素的值,该值是提交数据时参数名所对应的值
<!-- form : 表单标签 定义整体的表单区域 常用的表单元素标签有以下几种: label: 标记标签 表示表单元素的文字标注标签,定义文字标注(通常和input标签一起使用) input: 输入标签 (type属性) text - 文本输入框 password - 密码输入框 radio - 单选框 checkbox - 复选框 file - 上传文件 submit - 提交按钮 reset - 重置按钮 textarea: 多行文本框
button:定义可点击的按钮 select: 下拉框 option: 选项框 与<select>
标签配合,定义下拉列表中的选项 --> <form action="" method= ""> <p> <label>姓名:</label> <input type="text"> </p> <p> <label>密码:</label> <input type="password"> </p> <p> <label>性别:</label> <input type="radio" name="name"> 男 <input type="radio" name="name"> 女 </p> <p> <label>爱好:</label> <input type="checkbox"> 唱歌 <input type="checkbox" checked="checked"> 跑步 <!--设置默认勾选跑步 --!> <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 selected>广州</option> <!--默认选广州--> </select> </p> <p> <input type="submit" value="提交"> <input type="reset" value="重置"> </p>
<p> <button type="button" onclick="alert('Hello World!')">Click Me!</button> </p>
</form>
6 css
定义
(Cascading Style Sheet)层叠样式表,它是用来美化页面的一种语言。
基本语法
选择器{
样式规则
}
样式规则格式:
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
...
选择器:是用来选择标签的,选出来以后给标签加样式。如给所有的div标签内容设置宽200 高150 背景 红色
div{ width:200px; height:150px; background:red; }
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 标签选择器
标签{
属性:值
}
根据标签来选择标签,以标签开头,此种选择器影响范围大,一般用来做一些通用设置
<style type="text/css"> p{ color: red; } </style> <div>hello</div> <p>hello</p>
2 类选择器
需要给标签添加一个 class 属性,一个标签可以使用多个类,一个类选择器
可以作用于多个标签
.类名 {
属性: 值;
}
<style type="text/css"> .blue{color:blue} .big{font-size:20px} .box{width:100px;height:100px;background:gold} </style> <div class="blue">这是一个div</div> <h3 class="blue big box">这是一个标题</h3> <p class="blue box">这是一个段落</p>
3 层级选择器
选择器1和选择器2可以是任意的一种选择器
选择器1 选择器2 {
属性=值;
}
<style type="text/css"> div p{ color: red; } .con{width:300px;height:80px;background:green} .con span{color:red} .con .pink{color:pink} .con .gold{color:gold} </style> <div> <p>hello</p> </div> <div class="con"> <span>哈哈</span> <a href="#" class="pink">百度</a> <a href="#" class="gold">谷歌</a> </div> <span>你好</span> <a href="#" class="pink">新浪</a>
注意点: 这个层级关系不一定是父子关系,也有可能是祖孙关系,只要有后代关系都适用于这个层级选择器
4 id 选择器
在一个页面中,id 是唯一的,id 选择器只能作用域一个标签
#id值 {
属性:值;
}
#nonono {color: yellowgreen;}
5 组选择器
将多个选择器放在一块进行设置,以 , 分割开, 如果有公共的样式设置,可以使用组选择器。
选择器1, 选择器2, 选择器3, ... {
}
<style type="text/css"> .box1,.box2,.box3{width:100px;height:100px} .box1{background:red} .box2{background:pink} .box2{background:gold} </style> <div class="box1">这是第一个div</div> <div class="box2">这是第二个div</div> <div class="box3">这是第三个div</div>
6 伪类选择器
用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器, 比如说: 鼠标悬停,改变背景色
选择器:动作{
属性:值;
}
<style type="text/css"> .box1{width:100px;height:100px;background:gold;} .box1:hover{width:300px;} </style> <div class="box1">这是第一个div</div>
所有 CSS 伪类
选择器 | 例子 | 例子描述 |
---|---|---|
:active | a:active | 选择活动的链接。 |
:checked | input:checked | 选择每个被选中的 <input> 元素。 |
:disabled | input:disabled | 选择每个被禁用的 <input> 元素。 |
:empty | p:empty | 选择没有子元素的每个 <p> 元素。 |
:enabled | input:enabled | 选择每个已启用的 <input> 元素。 |
:first-child | p:first-child | 选择作为其父的首个子元素的每个 <p> 元素。 |
:first-of-type | p:first-of-type | 选择作为其父的首个 <p> 元素的每个 <p> 元素。 |
:focus | input:focus | 选择获得焦点的 <input> 元素。 |
:hover | a:hover | 选择鼠标悬停其上的链接。 |
:in-range | input:in-range | 选择具有指定范围内的值的 <input> 元素。 |
:invalid | input:invalid | 选择所有具有无效值的 <input> 元素。 |
:lang(language) | p:lang(it) | 选择每个 lang 属性值以 "it" 开头的 <p> 元素。 |
:last-child | p:last-child | 选择作为其父的最后一个子元素的每个 <p> 元素。 |
:last-of-type | p:last-of-type | 选择作为其父的最后一个 <p> 元素的每个 <p> 元素。 |
:link | a:link | 选择所有未被访问的链接。 |
:not(selector) | :not(p) | 选择每个非 <p> 元素的元素。 |
:nth-child(n) | p:nth-child(2) | 选择作为其父的第二个子元素的每个 <p> 元素。 |
:nth-last-child(n) | p:nth-last-child(2) | 选择作为父的第二个子元素的每个<p>元素,从最后一个子元素计数。 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 选择作为父的第二个<p>元素的每个<p>元素,从最后一个子元素计数 |
:nth-of-type(n) | p:nth-of-type(2) | 选择作为其父的第二个 <p> 元素的每个 <p> 元素。 |
:only-of-type | p:only-of-type | 选择作为其父的唯一 <p> 元素的每个 <p> 元素。 |
:only-child | p:only-child | 选择作为其父的唯一子元素的 <p> 元素。 |
:optional | input:optional | 选择不带 "required" 属性的 <input> 元素。 |
:out-of-range | input:out-of-range | 选择值在指定范围之外的 <input> 元素。 |
:read-only | input:read-only | 选择指定了 "readonly" 属性的 <input> 元素。 |
:read-write | input:read-write | 选择不带 "readonly" 属性的 <input> 元素。 |
:required | input:required | 选择指定了 "required" 属性的 <input> 元素。 |
:root | root | 选择元素的根元素。 |
:target | #news:target | 选择当前活动的 #news 元素(单击包含该锚名称的 URL)。 |
:valid | input:valid | 选择所有具有有效值的 <input> 元素。 |
:visited | a:visited | 选择所有已访问的链接。 |
所有 CSS 伪元素
选择器 | 例子 | 例子描述 |
---|---|---|
::after | p::after | 在每个 <p> 元素之后插入内容。 |
::before | p::before | 在每个 <p> 元素之前插入内容。 |
::first-letter | p::first-letter | 选择每个 <p> 元素的首字母。 |
::first-line | p::first-line | 选择每个 <p> 元素的首行。 |
::selection | p::selection | 选择用户选择的元素部分。 |
8.css 属性
1. 布局常用样式属性
- width 设置元素(标签)的宽度,如:width:100px;
- height 设置元素(标签)的高度,如:height:200px;
- background 设置元素背景色或者背景图片,如:background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。
- border 设置元素四周的边框,如:border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
- 以上也可以拆分成四个边的写法,分别设置四个边的:
- border-top 设置顶边边框,如:border-top:10px solid red;
- border-left 设置左边边框,如:border-left:10px solid blue;
- border-right 设置右边边框,如:border-right:10px solid green;
- border-bottom 设置底边边框,如:border-bottom:10px solid pink;
<style> .box1{ width: 200px; height: 200px; background:yellow; border: 1px solid black; } .box2{ /* 这里是注释内容 */ /* 设置宽度 */ width: 100px; /* 设置高度 */ height: 100px; /* 设置背景色 */ background: red; /* 设置四边边框 */ /* border: 10px solid black; */ border-top: 10px solid black; border-left: 10px solid black; border-right: 10px solid black; border-bottom: 10px solid black; /* 设置内边距, 内容到边框的距离,如果设置四边是上右下左 */ /* padding: 10px; */ padding-left: 10px; padding-top: 10px; /* 设置外边距,设置元素边框到外界元素边框的距离 */ margin: 10px; /* margin-top: 10px; margin-left: 10px; */ float: left; } .box3{ width: 48px; height: 48px; background:pink; border: 1px solid black; float: left; } </style> <div class="box1"> <div class="box2"> padding 设置元素包含的内容和元素边框的距离 </div> <div class="box3"> </div> </div>
2. 文本常用样式属性
- color 设置文字的颜色,如: color:red;
- font-size 设置文字的大小,如:font-size:12px;
- font-family 设置文字的字体,如:font-family:'微软雅黑';为了避免中文字不兼容,一般写成:font-family:'Microsoft Yahei';
- font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
- line-height 设置文字的行高,如:line-height:24px; 表示文字高度加上文字上下的间距是24px,也就是每一行占有的高度是24px
- text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉
- text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中
- text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px
<style> p{ /* 设置字体大小 浏览器默认是 16px */ font-size:20px; /* 设置字体 */ font-family: "Microsoft YaHei"; /* 设置字体加粗 */ font-weight: bold; /* 设置字体颜色 */ color: red; /* 增加掉下划线 */ text-decoration: underline; /* 设置行高 */ line-height: 100px; /* 设置背景色 */ background: green; /* 设置文字居中 */ /* text-align: center; */ text-indent: 40px; } a{ /* 去掉下划线 */ text-decoration: none; } </style> <a href="#">连接标签</a> <p> 你好,世界! </p>