1.HTML介绍
知识点:
html是什么?: 开发网页的超文本标记语言
html含义: 超文本标记语言
html作用: 用来开发网页
html特点: 大多数都是双标签组成的
双标签格式: <标签名> </标签名>
双标签特点: 可以嵌套其他标签和承载内容
单标签格式: <标签名>
html页面结构:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
示例:
<!--这是文档声明,声明是H5文档--> <!DOCTYPE html> <!--页面的开始--> <html lang="en"> <!--head:页面的头 放编码,标题等--> <head> <meta charset="UTF-8"> <title>斌子网页</title> </head> <!--body:页面的身体 放页面要展示的内容--> <body> 欢迎来到我的第一个网页 </body> <!--页面的结束--> </html>
2.常见的双标签
知识点:
标题标签: <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> 块标签: <div> </div> 段落标签: <p></p> 超链接标签:<a></a> 属性href:跳转的网址
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双标签</title> </head> <body> <!--常见的双标签: h1-h6标题标签 div块标签 p段落标签--> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <!--width:宽 height:高 background-color:背景颜色--> <div style="width: 100px; height: 100px ;background-color:green">我是一个div标签</div> <!--text-indent:设置首行缩进--> <p style="text-indent: 30px"> 5月26日，关于人民教育出版社（以下简称“人教社”）出版的小学数学教材中插画人物长相引人不适的话题， 多次冲上热搜，引发广泛关注。红星新闻注意到，该教材自2012年教育部审定以来，已经使用近10年。 </p> <p style="text-indent: 30px"> 面对网友质疑，26日下午，人教社发布《关于人民教育出版社小学数学教材插图的说明》称， “针对社会各界好的意见建议虚心采纳，已着手重新绘制有关册次数学教材封面和部分插图， 改进画法画风，提高艺术水平。同时，举一反三，全面评估所有教程，提高设计质量。 ”此外，教育部教材局也回应称，已关注到此事，已介入调查。 </p> <a href="http://www.itheima.com">超链接a标签</a> </body> </html>
3.常见的单标签
知识点:
图片标签: <img> 属性src:图片的路径 属性alt:图片加载失败的提示语 换行标签: <br> 横线标签: <hr>
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单标签</title> </head> <body> <!-- src:图片的路径 alt:图片加载失败的提示语--> <img src="1.png" alt="图片加载失败"> <!--换行标签:br--> <br> <!-- href:网址--> <a href="http://www.itheima.com">超链接a标签</a> <!--横线标签:hr--> <hr> </body> </html>
4.标签的嵌套
知识点:
双标签特点: 可以嵌套其他标签和承载内容
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签嵌套</title> </head> <body> <div style="width: 800px;height: 800px;background-color:pink"> <!-- img:图片标签 src:图片的路径 alt:图片加载失败的提示语--> <img src="1.png" alt="图片加载失败"> <!-- a: 超链接标签 href:网址--> <a href="http://www.itheima.com">超链接a标签</a> </div> </body> </html>
5.列表标签
知识点:
无序列表标签: <ul> <li>子标签</li> </ul> 有序列表标签: <ol> <li>子标签</li> </ol>
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表标签</title> </head> <body> <!--列表标签: 无序列表标签:<ul></ul> 有序列表标签:<ol></ol> 都要配合子标签<li>内容</li> --> <ul> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> </ul> <ol> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol> </body> </html>
6.列表标签练习
需求:
要求用网页列表标签来完成以下格式:
-
常见的双标签
-
常见的单标签
-
标签的嵌套
-
常见的双标签
-
常见的单标签
-
标签的嵌套
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表标签</title> </head> <body> <!--列表标签: 无序列表标签:<ul></ul> 有序列表标签:<ol></ol> 都要配合子标签<li>内容</li> --> <ul> <li>常见的双标签</li> <ul> <li>div</li> <li>h1_h6</li> <li>p</li> <li>a</li> </ul> <li>常见的单标签</li> <ol> <li>img</li> <li>br</li> <li>hr</li> </ol> <li>标签的嵌套</li> </ul> <ol> <li>常见的双标签</li> <ul> <li>div</li> <li>h1_h6</li> <li>p</li> <li>a</li> </ul> <li>常见的单标签</li> <ol> <li>img</li> <li>br</li> <li>hr</li> </ol> <li>标签的嵌套</li> </ol> </body> </html>
7.表格标签
知识点:
表格标签: <table></table> 属性: 黑色实线边框: border="1px solid black" css样式里合班边框: border-collapse: collapse css样式里文本居中: text-align: center" 行标签: <tr></tr> 列标签: <td></td> 标题标签: <th></th>
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签</title> </head> <body> <!--table:表格 tr:行 td:列 th:标题--> <!--边框border="1px" 合班边框style="border-collapse: collapse ; 文本居中text-align: center"--> <table border="1px" style="border-collapse: collapse ;text-align: center"> <tr> <th>姓名</th> <th>年龄</th> <th>手机号</th> </tr> <tr> <td>张三</td> <td>18</td> <td>18989897898</td> </tr> <tr> <td>李四</td> <td>28</td> <td>18976266666</td> </tr> </table> </body> </html>
8.表单标签
知识点:
<label>标签:表单元素的文字标注标签，定义文字标注 <textarea>标签:表单元素的多行文本输入框标签 定义多行文本输入框 <select>标签: 表单元素的下拉列表标签 定义下拉列表<option>标签 与<select>标签配合，定义下拉列表中的选项 <input>标签:表单元素的用户输入标签，定义不同类型的用户输入数据方式type属性 1.type="text" 定义单行文本输入框 2.type="password" 定义密码输入框 3.type="radio" 定义单选框 4.type="checkbox" 定义复选框 5.type="file" 定义上传文件 6.type="submit" 定义提交按钮 7.type="reset" 定义重置按钮 8.type="button" 定义一个普通按钮
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签</title> </head> <body> <!--表单标签: <form></form> action:提交到哪儿默认#当前页面 method:提交方式 get不安全或者post安全--> <form action="#" method="get"> <label>姓名:</label> <input type="text" placeholder="请输入姓名"> <br> <label>密码:</label> <input type="password" placeholder="请输入密码"> <br> <label>性别:</label> <input type="radio" name="gender">男 <input type="radio" name="gender">女 <br> <label>爱好:</label> <input type="checkbox" name="hobby">唱歌 <input type="checkbox" name="hobby">游泳 <input type="checkbox" name="hobby">跑步 <br> <label>照片:</label> <input type="file"> <br> <label>个人描述:</label> <textarea></textarea> <br> <lable>籍贯:</lable> <select> <option>北京</option> <option>天津</option> <option>唐山</option> </select> <br> <input type="submit" value="提交"> <input type="reset" value="重置"> <input type="button" value="普通按钮"> </form> </body> </html>
9.css
知识点:
css是什么?: 是美化网页的层叠样式表
css含义: 层叠样式表
css作用: 美化网页
css组成: 选择器和样式
css格式: 选择器{ 属性名1:属性值1 ; 属性名2:属性值2 ; ... }
10.css的引入方式
知识点:
行内式: 优点: 快速使用 缺点:不能重复使用 内嵌式: 优点: 当前页面重复使用 缺点: 其他页面不能使用 外链式: 优点: 多个页面都能使用 缺点: 因为css和html分离,容易混乱
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 3.外链式: <link>标签引入单独的css文件 -->
<link rel="stylesheet" type="text/css" href="main.css">
<!-- 2.内嵌式: <style>选择器{样式规则}</style> 弊端:其他页面用不了-->
<style>
div{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<!-- 1.行内式:style="样式规则" 弊端:不能重复使用-->
<div style="background-color:red;">hello</div>
<div style="background-color:green;">hello</div>
</body>
</html>
11_css选择器
知识点:
选择分类:
1.标签选择器: 标签名{样式规则}
2.层级选择器: 选择器1 选择器2{样式规则}
3.类选择器: .类名{样式规则}
4.id选择器: #id名{样式规则}
5.组选择器: 选择器1,选择器2{样式规则}
6.伪类选择器: 选择器:动作{样式规则}
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 标签选择器: 标签名{样式规则} */
p{
color: red;
}
/* 层级选择器: 选择器1 选择器2...{样式规则} */
div p{
color:yellow
}
/* 类选择器: .类名{样式规则} */
.c1{
color: green;
}
/* id选择器: #id名{样式规则} */
#id1{
color: blue
}
/* 组选择器: 选择器1,选择器2...{样式规则} */
.c2 , .c3{
width: 200px;
height: 200px;
}
/* 伪类选择器: 选择器:动作{样式规则} hover:鼠标移上 active:鼠标点击 */
.c4:hover{
width: 400px;
color: red;
background-color:blueviolet
}
.c4:active{
width: 800px;
color: brown;
background-color:lightblue
}
</style>
</head>
<body>
<p>hello</p>
<p class="c1">python</p>
<p>大数据</p>
<div class="c2" style="background-color: pink;">
<p class="c1">div中的p标签</p>
</div>
<div class="c3" style="background-color: chartreuse;">
<p id="id1">id选择器名必须唯一</p>
</div>
<div class="c4">鼠标移上我会自动改变</div>
</body>
</html>
3469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
