html基础
1. 基本概念
<!DOCTYPE html>
<!-- h5文档头：告诉浏览器，用哪一种方式编译 -->
<html>
<!-- head放置配置文件 -->
<head>
<!-- 字符集：编码方式 -->
<meta charset="utf-8">
<!-- 优化搜索引擎索引页面-->
<title>网站标题</title>
<!--引入缩略图 rel类型 href路径 ico图标制作(http://www.bitbug.net/) -->
<link rel="shortcut icon" href="images/favicon.ico"/>
</head>
<body>
<!-- body书写内容 -->
</body>
</html>
ps:
（1）、标签：标记、元素。
标签结构：双标签：<标签名></标签名> 单标签：<标签名>或者</标签名>
一般标签是可以任意嵌套的，一层嵌套就是一层父子关系（一般父子标签空格tab换行）
(2)、 查看网站图标
网站地址+/favicon.ico
2. 基本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本标签</title>
</head>
<body>
<img src="images/bd_logo1.png" alt="这是百度logo" title="这是图片">
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>
引入一段话一段文字
</p>
<!--
a:超链接：实现页面跳转 href:跳转路径。target="_blank"在新页面中打开，不加默认当前页面
-->
<a href="https://www.vip.com/" target="_blank">唯品会</a>
<a href="https://www.vip.com/favicon.ico" target=""><img src="images/vip_favicon .ico" alt="唯品会logo"></a>
<!-- div一般用来实现大区域排版 -->
<div></div>
<!-- span一般用来实现小元素 -->
<span></span>
<!-- 用来实现结果类似 -->
<ul type="square">
<li></li>
<li></li>
<li></li>
</ul>
<ol type="i">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<!-- <br>换行 空格 -->
我<br><br><br>喜欢 打 代码
转义符: ¥（ 人民币）、©（版权)、<（<)、>（>）
<a href="03锚点.html#first">跳转到其他页面指定位置</a>
</body>
</html>
ps:
-
<标签 k=“v” k=“v”></标签>k属于标签属性。属性不分先后顺序，只要加就会有效果
-
img在页面中引入图片
src:标签属性：图片地址
alt:图片不能正常显示提示文字，一般都要加（seo:优化搜索引擎，增加关键词搜索）
title:鼠标移入提示文字（seo:优化搜索引擎，增加关键词搜索） -
绝对路径：D:\项目\images
相对路径: 相对当前文件寻找 -
标题文字(h1-h6)
不是因为样式，是因为语义
因此：“h1是加粗，加黑”这句加是错的，任何样式都是由css实现的，h1只是自身带有加粗，加黑了 -
无序列表
ul:unordered list
li:list item
ul的子级只能是li ，li的父级只能是ul或者ol
type:修改提示类型 ： circle圆圈 square正方形 -
浏览器有空白折叠现象，不管输入多少空格，都只能识别一个
-
有序列表
ol:ordered list
li:list item 列表项
type修改提示类型 a A I i
3.锚点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>锚点</title>
</head>
<body>
<h2>杨幂</h2>
<p>
杨幂，1986年9月12日出生于北京市，毕业于北京电影学院表演系05级本科班，华语影视女演员、流行乐歌手、影视制片人。2006年，因出演金庸武侠剧《神雕侠侣》而崭露头角；2011年凭借《宫》走红，2011年获第17届上海电视节白玉兰奖最具人气女演员奖；2012年获第9届中国金鹰电视艺术节最具人气女演员奖；2013年获第二届亚洲青春派偶像盛典“年度实力制作人”奖，第十三届华语电影传媒大奖“最受瞩目女演员奖；2014年1月8日，与香港演员刘恺威登记结婚；2017年获第50届休斯顿国际电影节最佳女主角奖，2017年腾讯娱乐白皮书年度之星奖。<a href="#first"><sup>[1]</sup></a>2018年10月22日，凭借《扶摇》入围第24届华鼎奖中国古装题材电视剧最佳女演员奖。11月21日，杨幂入选中国文娱指数盛典2018年度艺人商业影响力榜，排名第6。12月4日，获第十五届MAHB年度先生年度最受欢迎女艺人奖。12月28日，获得第五届中国电视好演员表彰盛典“绿宝石”女演员奖和优秀演员奖。2019年2月5日，参加北京卫视春节晚。
</p>
<p>
杨幂出生于北京市宣武区（已并入新的北京市西城区），父亲杨晓林是民警，母亲杨春玲是专职的家庭主妇，因为一家三口都姓杨，也就是“杨”的3次方，所以给她起名杨幂 。杨幂是地道的北京南城胡同小妞，擅长打乒乓球、打羽毛球、游泳、滑冰 。当时中国儿童电影制片厂召开儿童影视表演培训班，杨幂父母抱带着杨幂去报名，结果年龄不足的杨幂却被招生老师破格录取 。杨幂的小学时期是在北京宣武实验小学度过的。小时候的杨幂很厉害，在邻居、朋友之间获得了“小厉害”的外号，喜欢玩游戏的她很叛逆 。上初中时，还有“整治”欺负女生的男同学的经历<a href="#second"><sup>[2]</sup></a> 。
</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<ol>
<li><a href="" name="first">《我是大侦探》杨幂首亮相！身份成谜引猜想新浪 2018-05-02 [引用日期2018-05-02]</a>
</li>
<li>
<a href="" name="second">北京卫视春晚官宣:春晚代言人为杨幂蔡徐坤|蔡徐坤|杨幂|春晚_新浪娱...新浪娱乐 2018-12-18 [引用日期2018-12-18]</a>
</li>
</ol>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--<br>换行 相当后面有内容，使ol li 的内容顶上去，在上面 -->
</body>
</html>
- sup 上标 、 sub 下标
- br换行 做锚点分屏才有意义，要不然同一屏就不用做锚点就可以看到了
- 锚点（标记）：
第一步：找到所有点击的内容 用a 包裹 内容
第二步：找到所要跳转内容用a包裹 取name属性
<a href="" name=“锚点名字” </a 此处省略a 的“闭合符号因为会响应html就会隐藏不显示这句话
4.基本样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本样式</title>
<style>
/* 书写css */
/*
选择标签{}
*/
p{
color:#f2a918;
/*
文字颜色：值可以是十六进制也可以是英文
*/
font-size:14px;
/*
文字大小，默认16px,不能小于12px
*/
font-family:"KaiTi","SimSun";
/*
文字字体。多个字体用逗号隔开，默认识别字体从前向后
*/
font-style:italic;
/* 倾斜 */
font-weight:bold;
/* 加粗 */
text-decoration:underline;
/*
增加下划线
*/
line-height:20px;
text-indent:2em;
}
i{
font-style:normal;
/* 不倾斜 */
}
b{
font-weight:normal;
/* 不加粗 */
}
u{
text-decoration:none;
/* 去除下划线 */
}
div{
width:100px;
height:100px;
border:1px solid #65cc33;
/* border:三个值：第一个值：线条粗细
第二个值：类型 solid 实线 dashed 虚线 dotted:点线;第三个值：颜色
*/
text-align:center;
/* 文本类（文字、图片）元素水平居中 */
line-height:100px;
/*
行高等于容器高度，文字垂直居中
*/
}
</style>
</head>
<body>
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<p>
1992年，杨幂与六小龄童合作主演了戏曲题材儿童剧《猴娃》，此剧在播出后则获得了第十四届“飞天奖”少儿电视连续剧二等奖[7]，而只有6岁的杨幂也给该剧的制片人李小婉留下了深刻的印象[8]。
1993年，杨幂在李丹阳的《穿军装的川妹子》MV中饰演小李丹阳[9]，而该作品则荣获了首届中国音乐电视大赛金奖[10]。1996年，杨幂还在何晴、李亚鹏出演的青春电影《歌手》中饰演了小夏表妹的角色[11]。
</p>
<div>
文字
</div>
</body>
</html>
ps:
-
行高：从文字中心基线开始向上取留白的一半，向下取留白的一半，中间就是行高
测量：第一行文字开始到第二行文字开始，中间就是行高
所以margin:图片和文字的距离要剪去文字下面部分的行高才是margin与图片的margin=空白-(（文字行高-文字）/2); -
text-indent: 首行缩进,可以用px,也可以用em（相对当前文字大小，1em=16px 不懂的查 w3c官网（https://www.w3cschool.cn）（.cn代表中文）在搜索中输入 em）
-
text-align:center;
文本类（文字、图片）元素水平居中 -
标签只负责页面结构，所有与样式有关的，都是css负责
因此：“h1是加粗、加黑”这句话是错误的，只是自身带有加粗加黑而已 -
b u i 和span 用法一模一样
-
行高等于容器高度，文字垂直居中
-
写样式之前要先有内容才有效果，所以先写body部分的内容，
5.盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style>
div{
/* 宽高：内容宽高 */
width:100px;
/* 宽度 */
height:100px;
/* 高度 */
border:10px dashed #f26091;
/* 边框 ：
值与值之间空格隔开
第一个值：线的粗细
第二个值：线的类型 solid 实线 dashed 虚线 dotted:点线
第三个值：颜色
*/
margin:10px;
/* 外边距 */
padding:10px;
/* 内边距：边距和内容的留白 */
}
</style>
</head>
<body>
<div>
我追求我喜欢的生活所以要坚持，不给自己设限
</div>
<div>
我追求我喜欢的生活所以要坚持,不给自己设限
</div>
</body>
</html>
ps:
6.值的书写问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>值的书写问题</title>
<style>
div{
/*
同一个选择器：同样的样式，后写的生效
*/
/* 宽高：内容宽高 */
width:100px;
/* 宽度 */
height:100px;
/* 高度 */
border:10px solid #2852a5;
/* 分开书写 */
border-color:red;
/* 修改边框颜色 */
/* border-style:dotted;
*/
/*修改边框类型 */
border-width:20px;
/* 修改边框粗细 */
padding:10px;
/* 四个方向都为该值 */
padding:10px 20px;
/*
第一个值：上下，第二个值：左右。高度设置固定，padding-bottom没有明显效果
*/
padding:10px 20px 30px;
/* 第一个值：上
第二个值：左右
第三个值：下
*/
padding:10px 20px 30px 40px;
/* 上下左右 */
padding-top:20px;
/*
padding-top:;
padding-right:;
padding-bottom:;
padding-left:;
*/
/*
margin与padding一样
*/
margin:20px;
}
</style>
</head>
<body>
<div>
开心开心开心开心开心开心开心开心
</div>
<div>
开心开心开心开心开心开心开心开心
</div>
</body>
</html>
7.边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框</title>
<!--
盒子模型：盒子占位con(width height) margin padding border
-->
<style>
.border1{
/*
同一个选择器内：
同样的样式，后写的生效
*/
/*
宽高：内容宽高
宽高设置为0，边框粗细一样就可以做成形状了,相邻部分两边各占一半颜色
*/
width:0px;
/* 宽度 */
height:0px;
/* 高度 */
/* 边框可以只写一个方向
但也要写完属性对应的三个值
*/
border-top:20px solid red;
border-left:20px solid blue;
border-right:20px solid lime;
border-bottom:20px solid #151515;
}
.trilateral{
/*
同一个选择器内：
同样的样式，后写的生效
*/
/*
宽高：内容宽高
宽高设置为0，边框粗细一样就可以做成形状了,相邻两边各占一半颜色
*/
width:0px;
/* 宽度 */
height:0px;
/* 高度 */
/* 边框可以只写一个方向
但也要写完属性对应的三个值
*/
/*
border-top:20px solid red;
*/
border-left:20px solid white;
border-right:20px solid white;
border-bottom:20px solid #65cc33;
margin:20px;
}
</style>
</head>
<body>
<div class="border1"></div>
<div class="trilateral"></div>
</body>
</html>
ps:
8.背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景</title>
<style>
div{
width:800px;
height:400px;
border:1px solid #f26091;
background:red;
/* 设置背景颜色 */
background:url('images/background.jpg')
no-repeat right 0px lime ;
/*
第一个值：图片地址
第二个值：图片平铺方式，默认平铺repeate no-repeat
repeate-x repeate-y
第三个值：水平位置，可以书写具体的数值，也可以left center right
第四个值：垂直位置，可以书写具体数值，也可以top center bottom
第五个值：填充颜色
*/
background-size:50%;
/*
背景尺寸：
第一个值：图片宽度，第二个值：图片高度
如果只设置一个值：代表宽度为该值，高度自适应
auto 100px宽度自适应，高度固定
可以设置百分比，参照物是父级的宽度和高度
*/
}
</style>
</head>
<body>
<div>
2001年，15岁的杨幂在北京市第十四中学读初二，她在同学的建议下把自己的照片寄给了《瑞丽》时尚杂志社，在被编辑选中后开始做起了平面模特的工作[12][13]。
2002年，杨幂签约李小婉、李少红共同创办的北京荣信达影视艺术有限公司[14]。2003年9月，17岁的杨幂拿到了她人生中真正意义上的第一部剧本，她与佟大为、孙俪等人合作出演了年代爱情剧《红粉世家》[15]，并在剧中饰演了一心想成为歌舞团演员的李小桃[12]，而杨幂也由此正式拉开了个人演艺生涯的序幕；同年，杨幂还出演了电视电影《北京童话》，并饰演了白血病女孩朱珠[16][17]。
</div>
</body>
</html>
ps:
- background和img的区别
background:不占位，引入装饰图片。不能被搜索引擎抓取
img：占位，引入重要图片。能被搜索引擎抓取
9.总结
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
