文章目录
前言
0.1html&css简介:
HTML是超文本标记语言(Hyper Text Markup Language),一种纯文本类型的语言,用来设计网页的标记语言,用该语言编写的文件以.html或者.htm为后缀,由浏览器解释执行。
CSS是层叠样式表(Cascading Style Sheets),样式定义了如何显示HTML元素,样式通常储存在样式表中。
0.2html&css联系与区别:
在 html 文件的 head 标签中使用link可以引用css文件对html修饰,css可以说是html的化妆师。
一、html是什么?
1.1html定义:HTML 不是一种编程语言,而是一种标记语言。HTML(Hypertext Markup Language ) 超文本标记语言。HTML的源文件,称为“网页”,通常以.html或者.htm为结尾。
可以使用任意文本编辑器编辑,需要使用浏览器执行。
1.2实例解析:
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
1.3html标题:标题(Heading)是通过 <h1> - <h6> 标签进行定义的。<h1> 定义最大的标题。 <h6> 定义最小的标题。
示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习总结</title>
</head>
<body>
<h1>这是标题 1</h1>
<h6>这是标题 6</h6>
</body>
</html>
1.4html标签:HTML 标签是由尖括号包围的关键词,比如 <html>;通常是成对出现的,比如 <b> 和 </b>;第一个标签是开始标签,第二个标签是结束标签;
script标签:编写JavaScript代码或引入外部的script程序。
link标签:引入外部的css文件。
style标签:在html文件中编写css样式。
核心标签如下:
<html> <!-- HTML根标签 -->
<head> </head> <!-- head标签,用来描述网页的相关信息(编码、标题等等),里面的内 容不会显示在网页中 -->
<body> </body> <!-- body标签,所有需要显示在网页中的内容定义在body标签中 -->
</html> <!-- HTML结束标签 -->
二、html基础语法
2.1图像:
在 HTML 中,图像由<img> 标签定义。
<img src="图片地址" alt="图片名称" width="200" height="200">
标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
src指的是"source",原属性的值是图像的URL地址,但是地址值分为绝对路径和相对路径
绝对路径:文件从最高级目录下开始的完整路径,无论当前路径是什么,使用绝对路径后总能找到要连接的文件;相对路径:文件的位置是相对于当前的文件位置,包括目录名或指向一个可以从当前目录出发找到的文件
2.2链接:HTML使用标签 <a>来设置超文本链接。超链接可以是一个字,一个词,或者一组词,也可以是一幅图像。例如:<a href="url">链接文本</a>
2.3颜色:HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)设置网页背景颜色:
<style>
body
{
background-color: #bbded6;
}
</style>
2.4表格:表格是由<table>标签来定义的;
创建表格:**<table></table>;创建行:**<tr></tr>;创建列:**<td></td>
border 边框 width/height 宽/高;align 对齐方式;padding 边框与文字之间的距离,内边距
cellspacing:单元格之间的距离。
示例如下:
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>出生日期</th>
<th>别名</th>
</tr>
</table>
2.5html表单:用于收集用户的输入信息,表单元素是允许用户在表单中输入内容;
多数情况下被用到的表单标签是输入标签 <input>,输入类型是由 type 属性定义;
1.table标签常见属性。
1border: 边框大小px.
2bordercolor: 边框的颜色。
3cellspacing:各单元格之间的间隙。
4align :水平对齐方式。
5width:表格宽度,可以是像素px ,可以是百分比。
2. tr标签常见属性。
1align:水平对齐方式。
2valign:垂直对齐方式。
3bgcolor:设置背景颜色。
4height:高度px。
3. td标签常见属性。
1align:水平对齐方式。
2valign:垂直对齐方式。
3bgcolor:设置背景颜色。
4width | height:设置宽度|设置高度。
2.6html url:URL 是一个网页地址,URL可以由字母组成;互联网协议(IP)地址:http://127.0.0.1:5500/。URL=网站域名=IP+端口;
三、css是什么?
3.1css定义:是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS 文件扩展名为 .css。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
3.2实例解析:
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。CSS注释以 /* 开始, 以 */ 结束。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css实例解析</title>
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>我的网页!</h1>
<p>hello,world!css实例。</p>
/*这是个注释*/
</body>
</html>
3.3css特点与使用:多页面应用;丰富的样式定义;易于使用和修改;
内联样式:定义在单个HTML元素中;
<div style="background-color: blue;">我是一个div</div>
内部样式表 :定义在HTML的头元素中;
外部样式表:将样式定义在外部的CSS文件中(.css),由HTML页面引用样式表文件。
<link rel="stylesheet" type="text/css" href="文件的路径"/>
一个css文档一般是有一个或者是多个选择器
以及声明
组成,选择器是需要改变样式的HTML元素,每一个声明由一个属性
和一个值
组成。在HTML元素中设置CSS样式,需要在元素中设置"id" 和 "class"选择器。
四、css基础语法
4.1css链接与选择器:
链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。
a:link - 正常,未访问过的链接;a:visited - 用户已访问过的链接;a:hover - 当用户鼠标放在链接上时;a:active - 链接被点击的那一刻。
css的选择器一般为id和class选择器:根据指定的id名称找到对应的标签, 然后设置属性
格式: #id名称{ 属性:值; } ;根据指定的类名称找到对应的标签, 然后设置属性 ;
格式: .类名{ 属性:值; };
4.2css表格:使用 CSS 可以使 HTML 表格更美观。
1.表格边框:指定CSS表格边框,使用border属性。
示例如下:指定了一个表格的Th和TD元素的黑色边框;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css示例</title>
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>lili</td>
<td>fx</td>
</tr>
<tr>
<td>女</td>
<td>女</td>
</tr>
</table>
</body>
</html>
2.Width和height属性定义表格的宽度和高度;text-align属性设置水平对齐方式,向左,右,或中心。background-color 属性定义了元素的背景颜色。
body {background-color:#b0c4de;}
4.3css表单:
使用 CSS 来渲染 HTML 的表单元素。
1输入框(input) 样式:input[type=text]
- 选取文本输入框。input[type=password]
- 选择密码的输入框。input[type=number]
- 选择数字的输入框。
2输入框:使用 padding 属性可以在输入框中添加内边距。
3transition
属性:设置了输入框在获取焦点时会向右延展。使用 background-image
属性和用于定位的background-position
属性用于输入框中添加图标。
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
4.4css网页布局:
1一般情况下,网页布局分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域
头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的 logo;
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}
菜单导航条包含了一些链接,可以引导用户浏览其他页面;
.topnav {
overflow: hidden;
background-color: #333;
}
2在进行页面布局时主要考虑以下几方面:要有整体意识;从外向内,层层递进;模块化;命名规则。
总结
在 html 文件的 head 标签中使用link可以引用css文件对html修饰,css可以说是html的化妆师。通过学习已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框,并定义元素的填充和边距。同时掌握了如何定位元素、控制元素的可见性和尺寸、设置元素的形状。