HTML&CSS学习总结

文章目录

  • 前言
  • 一、html是什么?
    • 1.1html定义
    • 1.2html实例解析
    • 1.3html标题
    • 1.4html标签
  • 二、html基础语法
    • 2.1图像
    • 2.2链接
    • 2.3颜色
    • 2.4表格
  • 三、css是什么?
    • 3.1css定义
    • 3.2实例解析
    • 3.3特点与使用
  • 四、css基础语法
    • 4.1链接与选择器
    • 4.2表格
    • 4.3表单
    • 4.4网页布局
  • 总结


前言

        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 来添加背景、格式化文本、以及格式化边框,并定义元素的填充和边距。同时掌握了如何定位元素、控制元素的可见性和尺寸、设置元素的形状。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值