文章目录
相关知识: https://blog.csdn.net/mokexfdgh/article/category/8092196
HTML
html:HyperText Markup Language->超文本标记语言->网页语言
超文本->超出文本的范畴,可以对文本实现更多的操作
标记->html所有的操作都是通过标记实现,标记就是标签,<标签名称>
例如:
<font size="S" color="red">这是我的第一个html程序!</font>
html的规范:
<html>
<head>
<title>这是一个标题</title>
</head>
<body>
<font size="S" color="red">这是我的第一个html程序!</font> <br/>
<hr/>
</body>
</html>
(1)一个html文件具备开始的标签和结束的标签<html>…</html>
(2)html包含两部分内容
<head>设置相关信息</head>
<body>显示在页面上的内容都写在body里面</body>
(3)html的标签有开始标签,也要有结束标签
<head></head>
(4)html的代码不区分大小写
(5)有的标签,没有结束标签
换行:<br/> 分割线:<hr/>
html的操作思想:
网页中有很多数据,不用的而数据可能需要不同的显示效果,这个时候需要使用标签把要操作的数据封装起来。通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当于一个容器,想要修改容器内数据的样式,只需要改变容器的属性值,就可以容器内数据样式的变化
html中常用的标签
1.文字标签和注释标签
文字标签:修改文字样式
<font></font>
属性:
size->文字的大小,取值范围1-7,超过7还是7
color->文字的颜色,两种表示方式:英文单词,red,green,blue,black,white,yellow/十六进制数表示,RGB
注释标签:
<!--这是一个注释-->
2.标题标签,水平线标签和特殊字符
标题标签:
<h1></h1> <h2></h2> <h3></h3>...<h6></h6>
<!-- 从h1到h6,大小依次变小,同时会自动换行 -->
水平线标签
<hr size="S" color="bule"/>
<!-- 属性:size:1-7 color:颜色 -->
特殊字符(转义)
< : <
> : >
:
& : &
3.列表标签
<dl>
<dt> 上层内容 </dt>
<dd> 下层内容 </dd>
<dd> 下层内容 </dd>
</dl>
显示效果如下:
上层内容
下层内容
下层内容
有序列表
<ol>
<li> 内容1 </li>
<li> 内容2 </li>
<li> 内容3 </li>
</ol>
<!-- 属性 type:设置排列方式,1(默认数字) a i -->
显示效果如下:
1.内容1
2.内容2
3.内容3
无序列表
<ul type="disc">
<li> 内容1 </li>
<li> 内容2 </li>
<ul>
<!-- 属性 type:设置特殊符号,空心圆circle,实心源disc(默认),实心方块square -->
显示效果如下:
·内容1
·内容2
4.图像标签
<img src="图片的路径" width="宽度" height="长度" alt="图片上的文字"/>
补:路径
绝对路径:**
相对路径(三种情况):
图片在同一路径下,直接用过名称使用:“name.jpg”
图片在html的下层目录(img文件夹中):“img\name.jpg”
图片在html的上层层目录(img文件夹中):"…/name.jpg"
5.超链接标签
链接资源
<a href="链接到资源的路径"> 显示在页面上的内容 </a>
<!--
属性:href:路径,target:设置打开方式(_blank:在一个新窗口打开,_self:在当前页打开 默认)
当超链接不需要到任何地址时,href设置为"#",为空会跳出文件选择框
-->
定位资源
<!-- 定义一个位置 -->
<a name="top"> 顶部 </a>
<!-- 回到这个位置 -->
<a href="#top"> 回到顶部 </a>
原样输出标签:<pre></pre>
6.表格标签:可以对数据进行格式化,使数据显示更加清晰
<table border="1" bordercolor="blue" cellspacing="0" whidth="200" height="150">
<!--
属性: border-表格线粗细 bordercolor-表格线颜色 cellspacing-单元格之间的距离
width-表格的宽度 height-表格的高度
-->
<caption> 表格的标题 </caption>
<tr align="center"><!-- 表示一行,属性: align-对齐方式(left center right) -->
<td> </td> <!-- td表示单元格 -->
<td> </td>
<td> </td>
</tr>
<tr>
<th> </th> <!-- th单元格实现剧中和加粗 -->
<th> </th>
<th> </th>
</tr>
</table>
上面表示为两行,每行三个单元格的表格
合并单元格:跨行合并(rowspan)/跨列合并(colspan)
<td rowspan="3"> </td>
<td colspan="3"> </td>
<!-- 注意:跨行跨列时,其他相应的列或行应该相应的减少单元格 -->
7.表单标签:将数据提交到服务器
<form action="out.html" method="post">
<!-- form属性
action:提交到的out.html地址,默认提交到当前页面的地址栏
method:表单提交方式,常用方式-get和post,默认是get
get:请求提交地址栏会携带提交的数据(不安全,且数据大小有限制)
post:不会携带提交的数据,而是存在*请求体??*里(数据大小没有限制)
enctype:做文件上传时才需要设置这个属性,详见后文
-->
<!-- 输入项:输入内容或选择内容,必须有name属性 -->
<input type="text" name="phone"/><br/> <!-- 普通输入项 -->
<input type="radio" name="sex" value="female" checked="checked"/>女 <input type="radio" name="sex" value="male"/>男<br/>
<input type="submit" value="注册"/><br/>
<input type="image" src="图片路径"/>
<!--
input输入项的type属性
text:普通输入项
password:密码输入项
radio:单选输入项(里面需要属性name,属性值必须要相同,还有value值,checked="checked"默认选择)
checkbox:复选输入项(可以多选)(里面需要属性name,属性值必须要相同,还有value值)
file:文件输入项(可以实现文件上传)
hidden:隐藏项
submit:提交按钮//当在各种输入项写入内容并提交后,数据会以键值对(name=输入的值)提交到action的地址
image:按钮变为图片来进行提交(需要设置图片路径src)
reset:重置按钮,使各个输入项变为初始状态(可带value属性)
button:普通按钮,和js一起使用,能执行按钮事件
-->
<!-- 下拉输入项 -->
<select name="birth">
<option value="0">请选择</option>
<option value="1997" selected="selected">1997</option> <!-- 默认选择1997 -->
<option value="1998">1998</option>
</select>
<!-- 文本域 -->
<textaread cols="20" rows="5"></textaread>
</form>
其他常用标签
字体加粗:<b></b>
下划线:<u></u>
斜体:<i></i>
删除线:<s></s>
原样输出:<pre></pre>
段落标签:<p></p>//比br标签多空一行
下标:<sub></sub>
上标:<sup></sup>
自动换行:<div></div>
在一行显示:<span></span>
html的头标签的使用
title:浏览器标签页上显示的内容
meta:提供有关页面的基本信息
<!-- 当前页面3秒后自动跳转至01-hello.html -->
<meta http-equiv="refresh" content="3;ur1=01-hello.html" />
base:设置超链接的基本设置
<!-- body中的超链接都被设置了target属性,即打开方式 -->
<base target="_blank" />
link:引入外部文件(CSS)
框架标签
<frameset></frameset>
属性:rows->按照行进行划分 cols:按照列进行划分
<frameset rows="80,*">
<frameset cols="80,*">
<frame>
引入具体显示的页面
<frame name="lower_left" src="b.html">
注:使用框架标签时,不能写在body里,且需要把body去掉
<frameset rows="80,*">//把页面划分成上下两部分
<frame name="top" src="a.html">上面页面
<frameset cols="150,*">//把下面部分再划分长左右两部分
<frame name="lower_left" src="b.html">//左页面
<frame name="lower_right" src="c.html">//右页面
</frameset>
</frameset>
实现点击左页面的超链接后,使其在右页面显示,则需在b.html设置超链接属性target=“lower_right”
CSS
CSS:层叠样式表用来定义网页的显示效果(解决html代码对样式定义的重复)
将网页内容和显示样式进行分离,提高了显示功能
CSS和html的四种结合方式
1.每个html标签上都有一个style属性
<div style="background-color:red;color:green;">这是演示语句</div>
2.使用html的<style>标签,写在head里面
<head>
<style type="text/css">
div{<!-- 对body当中的所有div中的数据设置样式,就是一个选择器 -->
background-color:blue;<!-- 格式 属性名:属性值; -->
color:red;
}
</style>
</head>
3.在style标签里使用语句 @import url(css文件的路径)
<style type="text/css">
@import url(div.css);
</style>
<!--
div.css文件中可以写
div{
background-color:green;
color:red;
}
-->
4.使用头标签link,引入外部css文件
<link rel="stylesheet" type="text/css" href="css文件路径" />
第三种结合方式,在某些浏览器不起作用,我们一般采用第四种方式
结合方式之间的优先级:由上到下,由内到外,优先级由低到高(即后加载优先级高)
CSS的选择器
1.三种基本选择器
(1)使用标签名作为选择器的名称
div{
background-color:blue;
color:red;
}
(2)class选择器(每个标签都有一个class属性)
<div class="haha">演示1!</div>
<p class="haha">演示2!</p>
<!-- 选择器 -->
div.haha{
backgrond-color:yellow;
}
.haha{<!-- 作用于所有class为haha的标签 -->
backgrond-color:yellow;
}
(3)id选择器(每个标签都有一个属性id)
<div id="hehe">演示!</div>
div#hehe{
background-color:green;
}
#hehe{}<!-- 作用于所有id为hehe的标签 -->
三个选择器的优先级:style > id选择器 > class选择器 > 标签选择器
2.三种扩展选择器
(1)关联选择器(单独改变嵌套标签的样式)
<div><p>演示!</p></div>
div p{
background-color:green;
}
(2)组合选择器(不同标签设置相同的样式)
<div>演示1</div>
<p>演示2</p>
div,p{
background-color:orenge;
}
(3)伪元素选择器(css里面提供了定义好的样式,可以直接使用,详见CSS文档)
例如:超链接的状态(原始状态link,鼠标悬停状态hover,点击状态active,点击后状态visted)
<style type="text/css">
a:link{
background-color:red;
}
a:hover{
background-color:green;
}
a:active{
background-color:blue;
}
a:visted{
background-color:orenge;
}
</style>
<a href="超链接地址">超链接</a>
CSS的盒子模型
在进行布局前需要把数据封装到一块一块的区域内
1.边框:文本内容的边框,border(可以统一设置,也可以分别设置border-top,border-bottom,border-left,boder-right)
div{
width:200px;
height:150px;
border:2px solid blue;<!-- 粗细 样式 颜色 -->
}
2.内边距:文本距边框的距离,padding(padding-top,padding-bottom,padding-left,padding-right)
#div32{
border:2px solid blue;
padding:20px;
}
3.外边距:边框距外边框的距离,margin(margin-top,margin-bottom,margin-left,margin-right)
#div33{
margin:30px;
}
CSS的布局
1.布局的漂浮,属性float(属性值:left,right)
<!-- div都是盒子封装过的数据 -->
#div34{
float:left;<!-- 文本(div35)流向对象的右边 -->
}
2.布局的定位,属性position(属性值:static,absolute,relative)
#div36{
position:absolute;<!-- 将对象(div36)从文本流中脱出,div36叠在div37上面 -->
top:300px;
left:300px;
right:300px;
bottom:400px;<!-- 可以通过这些进行div36的定位 -->
}
#div36{
position:relative;<!-- 不会将对象从文本流中脱出(区别) -->
top:300px;
left:300px;
right:300px;
bottom:400px;<!-- 可以通过这些进行div36的定位 -->
}