1. html文字标签
1)标题标签:自带加粗、自带换行(h1~h6)
<h1>我是一级标签</h1>
<h2>我是二级标签</h2>
<h3>我是三级标签</h3>
<h4>我是四级标签</h4>
<h5>我是五级标签</h5>
<h6>我是六级标签</h6>
2)段落标签:p:自带换行
<p>大熊猫(学名:Ailuropoda melanoleuca):属于食肉目、熊科、大熊猫亚科、大熊猫属唯一的哺乳动物。
仅有二个亚种。雄性个体稍大于雌性。
体型肥硕似熊、丰腴富态,头圆尾短,头躯长1.2-1.8米,尾长10-12厘米。
体重80-120千克,最重可达180千克,体色为黑白两色,脸颊圆,有很大的黑眼圈,标志性的内八字的行走方式,也有解剖刀般锋利的爪子。
大熊猫皮肤厚,最厚处可达10毫米。黑白相间的外表,
有利于隐蔽在密林的树上和积雪的地面而不易被天敌发现。</p>
3)行内标签:span标签:多个span标签可显示在一行
<span>请登录</span>|
<span>我的快递</span>|
<span>京东快递</span>
4)文字倾斜:i、em;文字加粗:b、strong
<i>文字既加粗又倾斜</i>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>XXX的HTML页面</title>
</head>
<body>
<!-- 标题标签:自带加粗、自带换行(h1~h6) -->
<h1>我是一级标签</h1>
<h2>我是二级标签</h2>
<h3>我是三级标签</h3>
<h4>我是四级标签</h4>
<h5>我是五级标签</h5>
<h6>我是六级标签</h6>
<!-- 段落标签:p:自带换行 -->
<p>大熊猫(学名:Ailuropoda melanoleuca):属于食肉目、熊科、大熊猫亚科、大熊猫属唯一的哺乳动物。
仅有二个亚种。雄性个体稍大于雌性。
体型肥硕似熊、丰腴富态,头圆尾短,头躯长1.2-1.8米,尾长10-12厘米。
体重80-120千克,最重可达180千克,体色为黑白两色,脸颊圆,有很大的黑眼圈,标志性的内八字的行走方式,也有解剖刀般锋利的爪子。
大熊猫皮肤厚,最厚处可达10毫米。黑白相间的外表,
有利于隐蔽在密林的树上和积雪的地面而不易被天敌发现。</p>
<p>生活在海拔2600-3500米的茂密竹林里,那里常年空气稀薄,云雾缭绕,气温低于20℃。
有充足的竹子,地形和水源的分布利于该物种建巢藏身和哺育幼仔。大熊猫善于爬树,也爱嬉戏。
爬树的行为一般是临近求婚期,或逃避危险,或彼此相遇时弱者借以回避强者的一种方式。
大熊猫每天除去一半进食的时间,剩下的一半时间多数便是在睡梦中度过。
在野外,大熊猫在每两次进食的中间睡2-4个小时。
大熊猫99%的食物都是竹子,可供大熊猫食用的竹类植物共有12属、60多种。野外大熊猫的寿命为18-20岁,圈养状态下可以超过30岁。</p>
<!-- 行内标签:span标签:多个span标签可显示在一行 -->
<span>请登录</span>|
<span>我的快递</span>|
<span>京东快递</span>
<!--
文字倾斜:i、em
文字加粗:b、strong
-->
<b>
<i>文字既加粗又倾斜</i>
</b>
</body>
</html>
2. 图片音频视频和超链接
1)超链接标签
<!-- target=“_blank”:在新的标签页打开超链接指定的链接 -->
<a href="http://www.baidu.com" target="_blank">百度</a>
2) 换行标签:br -->
<br>
3)iframe:内联框架
<!-- px:像素 -->
<iframe src="http://www.bilibili.com" frameborder="0" width="100%" height="500px"></iframe>
4)水平线标签:hr
<hr>
5)图片标签:img
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png1" alt="百度logo">
<img src="./img/2.jpg" alt="" width="100px" height="80px">
6)音频标签:audio
<audio controls src="./img/qinghuaci.mp3"></audio>
7)视频标签:video
<video controls src="./img/大熊猫.mp4"></video>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 超链接标签:a -->
<!-- target="_blank":在新的标签页打开超链接指定的链接 -->
<a href="http://www.baidu.com" target="_blank">百度</a>
<!-- 换行标签:br -->
<br>
<br>
<!-- iframe:内联框架 -->
<!-- px:像素 -->
<iframe src="http://www.bilibili.com" frameborder="0" width="100%" height="500px"></iframe>
<!-- 水平线标签:hr -->
<hr>
<!-- 图片标签:img -->
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png1" alt="百度logo">
<img src="./img/2.jpg" alt="" width="100px" height="80px">
<!-- 音频标签:audio -->
<audio controls src="./img/qinghuaci.mp3"></audio>
<!-- 视频标签:video -->
<video controls src="./img/大熊猫.mp4"></video>
</body>
</html>
3. 列表
1)无序列表ul
<p>小说</p>
<ul>
<li>
<a href="https://book.qidian.com/info/1023912499/">霸道总裁</a>
</li>
<li>斗破苍穹</li>
<li>斗罗大陆</li>
</ul>
2)有序列表ol
<p>游戏:王者荣耀</p>
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
3)列表中的内容li
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 无序列表ul、有序列表ol -->
<!-- 列表中的内容li -->
<!-- 无序列表:ul -->
<p>小说</p>
<ul>
<li>
<a href="https://book.qidian.com/info/1023912499/">霸道总裁</a>
</li>
<li>斗破苍穹</li>
<li>斗罗大陆</li>
</ul>
<!-- 有序列表 -->
<p>游戏:王者荣耀</p>
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
</body>
</html>
4. input标签
1)form表单标签
<form method="POST">
</form>
2)input标签:
可以实现输入框、可以实现按钮。
修改type属性值可以实现不同的功能。
placeholder:提示文字
a. input type=“tel”:表示这个输入框要输入的是手机号。
b. value:在input标签中设置默认值
<span>手机号:</span>
<input type="tel" placeholder="请输入手机号:" value="1234567">
<br>
<span>密码:</span>
<input type="password" placeholder="请输入密码:">
<br>
<!-- value:在input标签中设置默认值 -->
<input type="submit" value="登录">
<input type="reset" value="重置">
</form>
c. 上传文件:type=“file”
<input type="file">
d. 选择颜色:color
<input type="color">
e. 选择日期和时间
<input type="date">
<input type="time">
3)input标签的单选和多选中,input标签是提供选择按钮,label标签提供选择的内容,id属性和for属性相关联,提供的是input和label一一对应。
a. 单选:
调用id属性使用#
单选框中name和id属性值要一致
<input type="radio" name="性别" id="gender1"><label for="gender1">男</label>
<input type="radio" name="性别" id="gender2"><label for="gender2">女</label>
b. 多选
<input type="checkbox" name="兴趣" id="interest1"><label for="interest1">篮球</label>
<input type="checkbox" name="兴趣" id="interest2"><label for="interest2">足球</label>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- form表单标签 -->
<form method="POST">
<!-- input标签:
可以实现输入框、可以实现按钮。
修改type属性值可以实现不同的功能。
placeholder:提示文字
-->
<!-- <input type="tel":表示这个输入框要输入的是手机号 -->
<span>手机号:</span>
<input type="tel" placeholder="请输入手机号:" value="1234567">
<br>
<span>密码:</span>
<input type="password" placeholder="请输入密码:">
<br>
<!-- value:在input标签中设置默认值 -->
<input type="submit" value="登录">
<input type="reset" value="重置">
</form>
<!-- 上传文件:type="file" -->
<input type="file">
<!-- 选择颜色:color -->
<input type="color">
<!-- 选择日期和时间 -->
<input type="date">
<input type="time">
<br>
<!-- input标签的单选和多选中,input标签是提供选择按钮,label标签提供选择的内容
id属性和for属性相关联,提供的是input和label一一对应-->
<!-- 单选 -->
<!-- 调用id属性使用# -->
<!-- 单选框中name和id属性值要一致 -->
<input type="radio" name="性别" id="gender1"><label for="gender1">男</label>
<input type="radio" name="性别" id="gender2"><label for="gender2">女</label>
<!-- 多选 -->
<input type="checkbox" name="兴趣" id="interest1"><label for="interest1">篮球</label>
<input type="checkbox" name="兴趣" id="interest2"><label for="interest2">足球</label>
</body>
</html>
5. CSS
CSS:层叠样式表。CSS层叠样式表修改页面中的元素可以精确到像素点。
5.1 CSS的使用
1)行内式。
2)内嵌式。
3)外链式。
5.2 CSS常用属性
1)color:修改文字颜色。
2)text-align:修改文字的位置(左对齐、右对齐、居中对齐)。
3)text-size:字体尺寸。
4)border:边框。
5)margin:外边距。
6)padding:内边距。
7)font-family:修改字体样式(宋体、楷体、隶书等)。
8)background:背景。
9)width:宽度。
10)height:高度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- CSS内嵌式 -->
<style>
/* 所有的标签自带边距 */
/* 通配符选择器:"*" */
*{
margin: 0;
padding: 0;
}
/* CSS选择器: */
/* 标签选择器 */
/* 页面中存在几个X标签,如果使用标签选择器,所有的X标签都会变成一种样式。 */
div {
width: 250px;
height: 250px;
background-color: green;
}
/* 类选择器:class,类选择器使用"."调用 */
/* 在body标签中查找类名是one的标签 */
.one{
border: 5px solid red;
}
/* id选择器:使用 # 调用 */
/* id选择器在body标签中查找id是one的标签 */
#one{border-bottom: 10px solid black;
}
</style>
</head>
<body>
<!-- div标签:盒子模型。 -->
<div class="one">
</div>
<hr />
<div id="one">
</div>
</body>
</html>
6. CSS选择器
6.1 父子选择器
父子选择器:父子选择器使用 > 连接,左边是父标签,右边是子标签。
6.2 后代选择器
后代选择器:使用空格 连接,左边是祖先,右边是后代。
6.3 兄弟选择器
兄弟选择器::使用 ~连接。
6.4 属性选择器
6.5 nth-child选择器
nth-child选择器:pythn3.7以上版本才有这个选择器。
nth-child选择器不看标签名,只找某个标签是所有(同层次)标签下的第几个。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 父子选择器:父子选择器使用 > 连接,左边是父标签,右边是子标签 */
/* 找类名是one的标签下的所有子标签h1 */
.one > h1{
color: red;
}
.two > ul > li{
color: blue;
text-align: center;
}
/* 后代选择器:使用空格 连接,左边是祖先,右边是后代 */
.one h2{
color: green;
font-family: "仿宋";
text-align: right;
}
/* 兄弟选择器::使用 ~连接 */
/* 将类名是one的标签下的子代h1标签的所有比h1标签小的h2标签兄弟改成黄色 */
.one > h1 ~ h2{
color: yellow;
}
/* 相邻兄弟选择器 + */
/* 将类名是one的标签下的子代h1标签的所有比h1标签小的相邻的h2标签兄弟改成粉色 */
.one > h1 + h2{
color: pink;
text-align: left;
}
/* 属性选择器: */
input[type=submit]{
background-color: blue;
color: white;
border: none;
}
/* nth-child选择器:pythn3.7以上版本才有这个选择器 */
/* nth-child选择器不看标签名,只找某个标签是所有(同层次)标签下的第几个 */
body > div:nth-child(4){
border: 5px solid blue;
}
</style>
</head>
<body>
<h1>我是h1标签</h1>
<div class="one">
<h1>我是一级标签</h1>
<h2>我是二级标签</h2>
<h2>我是二级标签</h2>
</div>
<div class="two">
<p>游戏</p>
<ul>
<li>王者荣耀</li>
<li>英雄联盟</li>
<li>pubg</li>
<li>CS:GO</li>
</ul>
</div>
<div id="one">
<input type="submit" value="登录">
<br>
<input type="reset" value="重置">
</div>
</body>
</html>
7. 前端基本了解
7.1 前端三大技术:
- HTML:提供(文字、图片、音频、视频、按钮、输入框等内容)的展示。
- CSS:将HTML显示的内容进行布局和样式渲染。
- JavaScript:提供了页面内容的变化。
7.2 HTML
1)HTML:超文本标记语言(HyperText Markup language)
2)后缀名:.html、.htm、.shtml、.shtm 。
.shtml、.shtm:内置了ssi命令,可以和服务器通信,更新页面内容。
DOS操作系统:兼容的文件只能是后缀名长度<=3的。
所以html和htm是一类文件,shtml和shtm是一类文件。
3)HTML是通过标签将文字、图片等内容显示到页面中的。
a. 双标签(一般标签)
<标签名 属性名1=属性值1 属性名2=属性值2 . …>内容</标签名>
b. 单标签(自闭合标签)
<标签名 属性名1=属性值1 属性名2=属性值2 …>或者
<标签名 属性名1=属性值1 属性名2=属性值2 … />