HTML
html的书写规范
- html文件是以.html或.htm结尾的文件
- html文件是由浏览器解释运行
- html代码的基本结构
- html文件的第一行必须是,用来声明当前文档所遵循的html规范
- 声明规范后,必须写上html文件的根目录
- html标签中必须包含
<head></head>
、<body></body>
- head标签用于配置当前页面
- body标签的用于显示页面内容
- 标记:也叫标签,都是预定义的
- 单标签:只有开始标签,没有结束标签
<br/>换行 <hr/> <input> <img>等
- 双标签:由开始和结束标签组成,等等…
常用标签
用来显示页面内容
显示标签
1、标题标签h
,h1~h6
,自动加粗,块级(单独占一行)标签,双标签
<!-- 标题标签 h -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
2、字体标签:font
属性:(不推荐)
- size:大小,单位是像素(px),取值范围1~7(从小到大)
- color:颜色
1、颜色单词
2、#rrggbb
<!--字体标签 font -->
<font size="1px" color="red">字体标签</font>
<font size="2" color="#59E189">字体标签2</font>
推荐
<font style="color: blue;">你好</font>
3、图片标签img
属性:
1、src 图片地址
2、width 宽度
3、height 高度
4、alt 图片加载失败显示的提示内容
5、title 鼠标移动到图片上的提示内容
<img src="https://iconfont.alicdn.com/p/illus_3d/preview_image/gOUqAFa0J5Zz/51bab137-ad27-4f11-b309-13552b504420.png" title="任万万...." width="50">
<img src="img/fd14fdfaaf51f3de97ec743f83eef01f3a297915.jpg" alt="路径错误" title="任万万...." width="100">
4、段落标签:p
,块级标签
5、div标签:div
,块级标签
6、span标签:span
,行内标签
7、文本域标签,多行标签:textarea
属性:cols:列数、rows:行数
功能标签
1、超链接标签:a
,行内标签
属性:
1、herf:指定跳转目标地址
2、target:新页面的打开方式,取值:_blank
:空白页、_self
:本页面
3、页面内的跳转:href="#"表示回到页面顶部,不写#
也表示回到页面顶部
实现步骤:1、在目标地,添加标签,增加id属性值
2、在起始地,使用超链接标签href的值为#id属性值
<h6><a href="#hh">六级标签</a></h6>
<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 /><br /><br /><br /><br /><br /><br />
<div id="hh">到这里</div>
2、下拉标签:select
需要配合子标签使用option
属性:
size:表示可见的数量
multiple:设置下拉菜单可以多选。注意:不需要赋值,写了就代表有这个属性
3、列表标签:ol
(order)有序、ul
无序,必须结合li
(list item)子标签使用
属性:
1、type:
ol:取值:1、a、A、i、I
ul:取值:circle、square、disc(默认)2、start:只有ol有,表示从几开始
3、嵌套标签:将列表作为另一个列表的列表项中的内容
<ol type="1">
<li>秦
<ul>
<li>复苏</li>
<li>子良</li>
<li>小河</li>
</ul>
</li>
<li>汉</li>
<li>唐</li>
<li>明</li>
</ol>
有趣
<style>
/* visibility=hidden visibility: visible; 隐藏但是存在*/
/* display=none display=inline行级 / block块级*/
.l > ul{
display: none;
}
.l:hover > ul{
display: block;
}
</style>
<body>
<ul>
<li class="l">鞋子
<ul>
<li>运动鞋</li>
<li>板鞋</li>
<li>直筒鞋</li>
</ul>
</li>
<li class="l">衣服
<ul>
<li>短袖</li>
<li>卫衣</li>
<li>外套</li>
<li>比基尼</li>
</ul>
</li>
<li class="l">裤子
<ul>
<li>连衣裙</li>
<li>直通库</li>
<li>休闲库</li>
<li>工作库</li>
<li>牛仔库</li>
</ul>
</li>
</ul>
</body>
4、表格标签:table
快捷键:4行3列(table>tr4>td3)
不规则表格:colspan:跨列、rowspan:跨行
属性:
border:边框粗细
width:宽度
height:高度
cellspacing:单元格的距离
cellpadding:单元格的内边距
结合子标签tr
、td
使用
属性:
align:水平,取值:left、right、center
valign:垂直,取值:top、bottom、center
5、表单标签:form
用于接收用户数据并将内容提交到服务器中的标签
属性:
- action:用来设置当前表单数据中的数据提交到哪里
- method:设置当前表单的提交方式
get(默认):提交的数据会拼接到请求的地址中,请求是可以缓存,请求页面后退时不产生影响
post:提交的数据不会拼接在地址,会放在请求体中,请求不可以缓存,post请求页面后退时会重新提交请求
子标签:input
,表单标签要结合input标签接收用户输入的内容,再提交给服务器。
属性:
- type:
取值:
text
password
radio(单元框)
checkbox(复选框)
button(普通按钮)
submit(提交按钮)
reset(重置按钮)
- name和value(类似键值对):name属性方便后端开发获取value值(getparameter/getparameterValues)
1、在text和password中,value是输入框中用户输入的内容
2、在radio和checkout中,name属性值和value属性值会形成键值对,此外,name属性在radio中,可以让多个radio归于一个组中,达到非此即彼的效果
3、在button、reset、submit中,value属性值是按钮中的文字 - placeholder:框中的提示内容
- maxlength:框中内容的最大字符数
- checked:单选、复选框的默认选中状态,注意:不需要赋值,写了就代表有这个属性
补充:
1、关联效果(id-for),点击“女”可以选中框
<form>
<input type="radio" name="sex"/>男
<input type="radio" name="sex" id="a"/><label for="a">女</label>
<input type="radio" name="sex">其他
</form>
2、button在表单外是普通按钮,在表单中是提交按钮
注意: border(边框)、padding(内边距)、margin(外边距)
CSS
用来美化页面,统一所有标签的样式设置方式
语法
内联样式: 将样式属性写在标签中
<img src="..." style="样式名:样式值;样式名:样式值;样式名:样式值;">
<a href="..." style="样式名:样式值;样式名:样式值;样式名:样式值;"></a>
内部样式表:在head中写style标签,在style中通过选择器找到指定的标签对样式进行设置
<head>
<meta charset="utf-8" />
<title>常用标签</title>
<style>
选择器{
width: 80px;
...
}
</style>
</head>
外部样式表:
创建css文件,在css文件中定义标签的样式,再将这个css文件引入需要使用这些样式的html页面中
外部样式表中css语法与内部样式表一模一样link
<head>
<meta charset="utf-8" />
<title>常用标签</title>
<link rel="stylesheet" href="..."/>
<style>...</style>
</head>
三种写法的优先级:就近原则
选择器
用于定位到指定的标签
1、元素(标签)选择器
标签名{
样式名:样式值;
样式名:样式值;
...
}
2、类选择器
为指定的标签添加class属性值
.class值{
样式名:样式值;
样式名:样式值;
...
}
3、id选择器
为指定的标签添加id属性值
#id值{
样式名:样式值;
样式名:样式值;
...
}
4、通配符选择器(页面全部)
作用:清除内外边距、字体设置、查看页面布局(通过设置边框,另border有三个值:颜色 虚实线 粗细,不分先后)
*{
样式名:样式值;
样式名:样式值;
...
}
5、子代、后代选择器
子代:
选择器1 > 选择器2 >...{
样式名:样式值;
样式名:样式值;
...
}
后代:
选择器1 选择器2{
样式名:样式值;
样式名:样式值;
...
}
<head>
<style>
/* 子代 */
div > p{
color: red;
}
/* 后代 */
#d li{
font-size: 10px;
}
</style>
</head>
<body>
<div id="d">
<ul>
<li>曹贼</li>
<li>孙权</li>
</ul>
</div>
<div>
<input type="text" value="子代">
<p>Lorem, ipsum.</p>
</div>
</body>
6、相邻兄弟选择器
(往后查找)
选择器1+选择器2{
样式名:样式值;
样式名:样式值;
...
}
<head>
<style>
#d+p{
color: red;
}
</style>
</head>
<body>
<p>Lorem, ipsum.</p>
<div id="d">
<span>你好</span>
</div>
<p>Lorem ipsum dolor sit amet.</p>
</body>
7、分组选择器
可以将多个选择器结合在一起
选择器1,选择器2,选择器3,...{
样式名:样式值;
样式名:样式值;
...
}
<head>
<style>
div,span,input{
color: red;
}
</style>
</head>
<body>
<div>哈哈哈</div>
<p>嘻嘻嘻</p>
<span>Lorem, ipsum.</span>
<br >
<input type="text" value="最后一个">
</body>
8、属性选择器
选择指定属性或者指定属性值的标签
选择器[属性名]{
样式名:样式值;
样式名:样式值;
...
}
选择器[属性名='属性值']{
样式名:样式值;
样式名:样式值;
...
}
选择器[属性名][属性名='属性值'][属性名='属性值']{
样式名:样式值;
样式名:样式值;
...
}
9、伪类选择器
选择器:模式{
样式名:样式值;
样式名:样式值;
...
}
模式:
1、link:超链接的默认状态
2、visited:超链接被访问过的状态
3、hover:鼠标悬浮在标签上的状态
4、active:鼠标按住标签的状态
<style>
a:link{
color: yellow;
}
a:visited{
color: red;
}
a:hover{
color: blue;
}
a:active{
color: pink;
}
p:hover{
color: blue;
}
p:active{
color: pink;
}
</style>
<body>
<p>哈哈哈</p>
<a href="#">点我</a>
</body>
10、nth-of-type(An+B) 选择器(了解)
A表示每隔(A-1)个开始变化 B表示从第几行开始 正负表示从上到下(+)还是从下到上(-)
An和B的顺序不能变化
<head>
<style>
li{
background: lightgray;
border: 1px solid red;
height: 50px;
}
li:nth-of-type(-2n+8){
/* nth-of-type(An+B) */
/* A表示每隔(A-1)个开始变化 B表示从第几行开始 正负表示从上到下(+)还是从下到上(-)*/
background: red;
}
</style>
</head>
<body>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</body>
盒子模型
1、内边距
指边框和边框内容之间的距离padding
padding:npx:指四周内边距都为n像素
padding-left/right/top/bottom :表指定方向的内边距是n像素
padding:apx bpx:上下内边距为a像素,左右内边距为b像素
padding:apx bpx cpx dpx:上右下左的像素
注意
- 内边距会影响整个标签的大小
2、外边距
指标签与标签之间的距离margin
margin:npx:指四周外边距都为n像素
margin-left/right/top/bottom :表指定方向的外边距是n像素
margin:apx bpx:上下内边距为a像素,左右外边距为b像素
margin:apx bpx cpx dpx:上右下左的像素
注意
- 上下外边距取最大值
- 左右外边距取两者之和
3、边框border
颜色、粗细、样式(顺序任意)
样式取值:solid
实线、dashed
虚线、double
双实线、dot
点划线
<head>
<style>
#q{
width: 100px;
height: 100px;
border: solid red 1px;
}
#a{
width: 20px;
height: 20px;
border: dashed blue 1px;
margin-left: 40px;
margin-top: 40px;
}
</style>
</head>
<body>
<div id="q">
<div id="a">
</div>
</div>
</body>
定位
属性:position
结合属性:left、right、top、bottom
取值:
1、statis:默认定位
2、absolute:绝对定位,相对于body
3、relative:相对定位,相对于默认位置
4、fixed:固定定位
<head>
<style>
*{
margin: 0;
padding: 0;
}
#p2{
/* position: static;
top: 10px; */
/* position: absolute;
top: 10px; */
position: relative;
top: 10px;
}
#d{
width: 100px;
height: 100px;
background: pink;
position: fixed;
right: 0;
top: 200px;
}
</style>
</head>
<body>
<p id="p1">Lorem ipsum dolor sit amet.</p>
<p id="p2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<div id="d"></div>
<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><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>1</p>
</body>