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.总结