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>
