开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> HTML&CSS -> 正文阅读

[移动开发]HTML&CSS

一、HTML

HTML（Hyper Text Markup Language 超文本标记语言）是最基础的网页开发语言。

超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。

标记语言：由标签构成的语言。<标签名称>如：html，xml。

注意：标记语言不是编程语言。

1.1、快速入门

1.1.1 语法

1.html文档后缀名 .html或者.htm。

2.标签分为：

围堵标签：有开始标签和结束标签。如<html> </html>。

自闭和标签：开始标签和结束标签在一起。如<br/>。

3.标签可以嵌套

需要正确的嵌套，不能你中有，我中有你。

错误示范：<a><b></a></b>。

正确：<a><b></b></a>。

4.在开始标签中可以定义属性，属性是由键值对构成，值需要用引号（单双都可以）引起来。

5.html的标签不区分大小写，但建议使用小写。

代码示例：

<html>
	<head>
		<title>title</title>
	</head>

		<body>
			<font color='blue'>Hello Word</font><br/>
			<font color='green'>Hello Word</font
		</body>

</html>

1.2、HTML标签

1.2.1 文件标签

是构成最基本的标签。

html：html文档的根标签

head：头标签。用于指定html文档的一些属性。引入外部资源

title：标题标签

body：体标签

<!DOCTYPE> ?? ?：html中定义该文档是html文档

1.2.2 文本标签

注释：

<h1> to <h6>：标题标签——h1~h6：字体大小逐渐递减

<p>：段落标签

<br>：换行标签

<hr>：展示一条水平线，其属性有：

color：颜色

width：宽度

size：高度

align：对其方式——center：居中、left：左对齐、right：右对齐

<b>：字体加粗

<i>：字体斜体

<font>：字体标签，其属性有：

color：颜色

size:大小

face：字体

<center>：文本居中

属性定义：

????????color：

1.英文单词：red，green，blue
2.rgb（值1，值2，值3）：值的范围（0~255）如： rgb（0，0，255）
3.#值1值2值3：值的范围：00~FF之间如：#FF00FF

????????width：

1.数值：width='20'，数值的单位，默认是px（像素）
2.数值%：占比相对于父元素的比例

1.2.3 图片标签

img：展示图片——src：指定图片的位置

代码示例：

<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>

注意：

?

1.2.4 列表标签

有序列表：

ol：定义有序列表

li：定义列表项

无序列表：

ul：定义无序列表

li：定义列表项

1.2.5 链接标签

a:定义一个超链接，其属性：

href：指定访问资源的URL(统一资源定位符)

target：指定打开资源的方式

? ? ? ? ——_self:默认值，在当前页面打开

? ? ? ? ——_blank：在空白页面打开

代码示例：

<!--超链接  a-->

		    <a href="http://www.itcast.cn">点我</a>
		    <br>
		
		    <a href="http://www.itcast.cn" target="_self">点我</a>
		    <br>
		    <a href="http://www.itcast.cn" target="_blank">点我</a>
		
		    <br>
		
		    <a href="./5_列表标签.html">列表标签</a><br>
		    <a href="mailto:itcast@itcast.cn">联系我们</a>
		
		    <br>
		    <a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg"></a>

1.2.6?div和span

div:每一个div占满一整行。块级标签

span：文本信息在一行展示，行内标签内联标签

1.2.7 语义化标签

html5中为了提高程序的可读性，提供了一些标签。

1. <header>：页眉
2. <footer>：页脚

1.2.8 表格标签

table：定义表格

? ? ? ? ——width：宽度

? ? ? ? ——border：边框

? ? ? ? ——cellpadding：定义内容和单元格的距离

? ? ? ? ——cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条

? ? ? ? ——bgcolor：背景色

? ? ? ? ——align：对齐方式

tr：定义行

? ? ? ? ——bgcolor：背景色

? ? ? ? ——align：对齐方式

td：定义单元格

? ? ? ? ——colspan：合并列

? ? ? ? ——rowspan：合并行

th：定义表头单元格

? ? ? ? ——<caption>：表格标题

? ? ? ? ——<thead>：表示表格的头部分

? ? ? ? ——<tbody>：表示表格的体部分

? ? ? ? ——<tfoot>：表示表格的脚部分

1.2.9?表单标签

?概念：用于采集用户输入的数据的。用于和服务器进行交互。

form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围，其属性：

action：指定提交数据的URL
method:指定提交方式：

????????分类：一共7种，2种比较常用。

?????????get和post

get和post的区别（面试题）?

get：

①请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。

② 请求参数大小是有限制的。

③不太安全。

post：

①请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)。

②请求参数的大小没有限制。

③较为安全。

二、CSS

2.1 概念

CSS：?Cascading Style Sheets 层叠样式表。

层叠：多个样式可以作用在同一个html的元素上，同时生效。

2.2 好处

功能强大。
将内容展示和样式控制分离。

? ? ? ? ——?降低耦合度。解耦

? ? ? ? ——让分工协作更容易

? ? ? ? ——提高开发效率

2.3 CSS的使用：CSS与html结合方式

2.3.1 内联样式

?在标签内使用style属性指定css代码。

代码示例：

<div style="color:red;">hello css</div>

2.3.2 内部样式

在head标签内，定义style标签，style标签的标签体内容就是css代码。

代码示例：


			<style>
		        div{
		            color:blue;
		        }
		
		    </style>
			<div>hello css</div>

2.3.3 外部样式

①定义css资源文件。

②在head标签内，定义link标签，引入外部的资源文件。

代码示例：

* a.css文件：
				div{
				    color:green;
				}



			<link rel="stylesheet" href="css/a.css">
			<div>hello css</div>
			<div>hello css</div>

注意：
?? ??? ?* 1,2,3种方式 css作用范围越来越大
?? ??? ?* 1方式不常用，后期常用2,3
?? ??? ?* 3种格式可以写为：
?? ??? ??? ?<style>
?? ??? ? ? ? ? ?@import "css/a.css";
?? ??? ? ? ?</style>?

2.3.4 css语法：

格式：

选择器 {
?? ??? ??? ?属性名1:属性值1;
?? ??? ??? ?属性名2:属性值2;
?? ??? ??? ?...
?? ??? ?}

选择器:筛选具有相似特征的元素。

注意：
? ? ? ? ?每一对属性需要使用；隔开，最后一对属性可以不加；。

2.3.5 选择器：筛选具有相似特征的元素

基础选择器

①id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
?? ??? ? ? ? ? ?* 语法：#id属性值{}

②元素选择器：选择具有相同标签名称的元素
?? ??? ? ? ? ? ?* 语法：标签名称{}
?? ??? ? ? ? ? ?* 注意：id选择器优先级高于元素选择器

③类选择器：选择具有相同的class属性值的元素。
?? ??? ? ? ? ? ?* 语法：.class属性值{}
?? ??? ? ? ? ? ?* 注意：类选择器选择器优先级高于元素选择器

扩展选择器

①选择所有元素：
?? ??? ??? ??? ?* 语法： *{}

②并集选择器：
?? ??? ??? ??? ?* 选择器1,选择器2{}

③子选择器：筛选选择器1元素下的选择器2元素
?? ??? ??? ??? ?* 语法： ?选择器1 选择器2{}

④父选择器：筛选选择器2的父元素选择器1
?? ??? ??? ??? ?* 语法： ?选择器1 > 选择器2{}

⑤属性选择器：选择元素名称，属性名=属性值的元素
?? ??? ??? ??? ?* 语法： ?元素名称[属性名="属性值"]{}

⑥伪类选择器：选择一些元素具有的状态

????????* 语法：元素:状态{}
?? ??? ??? ??? ?????????* 如： <a>
?? ??? ??? ??? ??? ?????????* 状态：
?? ??? ??? ??? ??? ??? ?????????* link：初始化的状态
?? ??? ??? ??? ??? ??? ?????????* visited：被访问过的状态
?? ??? ??? ??? ??? ??? ?????????* active：正在访问状态
?? ??? ??? ??? ??? ??? ?????????* hover：鼠标悬浮状态

2.3.6 属性

字体、文本

?? ??? ?* font-size：字体大小
?? ??? ?* color：文本颜色
?? ??? ?* text-align：对其方式
?? ??? ?* line-height：行高?

背景

????????* background

边框

????????* border：设置边框，符合属性

尺寸

????????* width：宽度
????????* height：高度

盒子模型：控制布局

????????* margin：外边距
????????* padding：内边距
?? ??? ??? ?????????* 默认情况下内边距会影响整个盒子的大小
?? ??? ??? ?????????* box-sizing: border-box; ?设置盒子的属性，让width和height就是最终盒子的大小

????????* float：浮动
?? ??? ??? ?????????* left
?? ??? ??? ?????????* right