HTML&CSS快速入门知识

最新推荐文章于 2023-06-11 20:42:26 发布

Williams10

最新推荐文章于 2023-06-11 20:42:26 发布

阅读量239

点赞数 1

分类专栏： Javaweb

本文链接：https://blog.csdn.net/Williams10/article/details/110007594

版权

HTML CSS B/S架构表单样式控制

关键词由CSDN通过智能技术生成

Javaweb 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

web概念概述

一、JavaWeb：使用Java语言开发基于互联网的项目。

二、软件架构：

1.C/S：Client/Server 客户端/服务器端

在用户本地有一个客户端程序，在远程有一个服务器端程序
优点：用户体验感好。
缺点：开发、安装、部署和维护起来相对麻烦。

2.B/S：Browser/Server浏览器/服务器端

只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序。
优点：开发、安装、部署和维护起来相对简单。
缺点：
1）一旦应用太大，用户的体验感会受到影响。
2）对硬件要求太高。

三、B/S架构详解：

资源分类：

静态资源：使用静态网页开发技术发布的资源。

特点：

所有用户访问得到的结果相同。
eg: 文本，图片，音频、视频, HTML,CSS,JavaScript
如果客户要求的是静态资源，服务器将会直接把静态资源发送给浏览器；浏览器中内置有静态资源的解析引擎，可以展示静态资源。

动态资源：使用动态网页即是发布的资源。

特点：

所有用户访问得到的结果可能不同。
eg:jsp/servlet,php,asp…
如果用户请求的是动态资源，服务器会执行动态资源，并将其转换位静态资源，然后发至浏览器。

Tip:
需要先学习好动态资源，然后学习静态资源。

HTML

（Hyper Text Markup Language 超文本标记语言）

一、概念：最基础的网页开发语言。

超文本：用超链接的方法，将各种不同空间的文字信息组织于一起的网状文本。
标记语言：
1. 由标签构成的语言。<标签语言> eg:html,xml
2. 标签语言不是编程语言。

二、快速入门：

语法：
1. html文档后缀名.html 或.htm
2. 标签：
1）围堵标签：有开始标签和结束标签。eg：
2）自闭和标签：开始标签和结束标签一起。eg:

3. 标签可以嵌套：需要正确嵌套，不能你中有我，我中有你。eg:
4. 在开始标签中可以定义属性。属性由键值对构成，值要用引号(双引号或者单引号)引起来。
5. html的标签不区分大小写（建议使用小写）。

<html>

	<head>
		<title>title</title>
	</head>
	
	<body>
		<FONT color='red'>Hello World</font><br/>
		
		<font color='green'>Hello World</font>
	
	</body>

</html>

标签学习

文件标签：构成html最基本的标签。

html:html文档的根标签。
head：头标签。用于指定html文档的一些属性，引入外部资源。
title：标题标签。
body：体标签。
：html5中定义该文档是html文档。

文本标签：和文本有关的标签。

注释：
<h1>to<h6>：标题标签。【h1~h6:字体大小逐渐递减】
<p>：段落标签。
<br>：换行标签。
<hr>：展示一条水平线。

属性：
1）color:颜色
2）width：宽度
3）size：高度
4）align：对齐方式
（1）center：居中
（2）left：左对齐
（3）right：右对齐

<b>：字体加粗
<i>：字体斜体
<font>：字体标签
<center>:文本居中

属性：
1）color：颜色
2）size：大小
3）face：字体

属性定义：

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. 数值%：占比相对于父元素的比例。

图片标签

img：展示图片

属性：src：指定图片的位置。
示例：

 <!--展示一张图片 img-->

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

<!--
    相对路径
        * 以.开头的路径
            * ./：代表当前目录  ./image/1.jpg
            * ../:代表上一级目录
 -->

<img src="./image/jiangwai_1.jpg">

<img src="../image/jiangwai_1.jpg">

列表标签

有序列表：

ol：
li：

无序列表：

ul：
li：

链接标签

a：定义一个超链接。

属性：
1） href：指定访问资源的URL(统一资源定位符)。
2） target：指定打开资源的方式。
（1） _self:默认值，在当前页面打开。
（2） _blank：在空白页面打开。

div和span

div:每一个div占满一整行。块级标签。
span：文本信息在一行展示，行内标签内联标签。

语义化标签：html5为了提高程序的可读性所提供的标签

<header>：页眉
<footer>：页脚

表格标签

table：定义表格。

width：宽度。
border：边框。
cellpadding：定义内容和单元格的距离。
cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条。
bgcolor：背景色。
align：对齐方式。

tr：定义行。

bgcolor：背景色。
align：对齐方式。

td：定义单元格。

colspan：合并列。
rowspan：合并行。

th：定义表头单元格。
<caption>：表格标题。
<thead>：表示表格的头部分。
<tbody>：表示表格的体部分。
<tfoot>：表示表格的脚部分。

表单标签

表单：

概念：用于采集用户输入的数据，用于和服务器进行交互。
form：用于定义表单。可以定义出一个范围，范围代表采集用户数据的范围。
属性：

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

分类：一共7种，2种比较常用的两种如下：
get：

请求参数会在地址栏中显示。会封装到请求行中。
请求参数大小是有限制。
不太安全。

post：

请求参数不会再地址栏中显示。会封装在请求体中。
请求参数的大小没有限制。
较为安全。

表单项中的数据要想被提交：必须指定其name属性。

表单项标签

input：可以通过type属性值，改变元素展示的样式。

type属性：
1）text：文本输入框，默认值。
（1） placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息。
2） password：密码输入框。
3）radio:单选框。

注意：

要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
一般会给每一个单选框提供value属性，指定其被选中后提交的值。
checked属性，可以指定默认值。

4） checkbox：复选框。

注意：

一般会给每一个单选框提供value属性，指定其被选中后提交的值。
checked属性，可以指定默认值。

5） file：文件选择框。
6） hidden：隐藏域，用于提交一些信息。
7）按钮：
（1）submit：提交按钮。可以提交表单。
（2） button：普通按钮。
（3） image：图片提交按钮。

src属性指定图片的路径。

label：指定输入项的文字描述信息。

注意：label的for属性一般会和 input 的 id属性值对应。一旦对应成功，则点击label区域，令input输入框获取焦点。

select: 下拉列表。

子元素：option，指定列表项。

textarea：文本域。

cols：指定列数，每一行有多少个字符。
rows：默认多少行。

CSS：页面美化和步具控制。

概念： Cascading Style Sheets 层叠样式表。

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

优点：

功能强大。
将内容展示和样式控制分离。
1）降低耦合度。解耦。
2）让分工协作更容易。
3）提高开发效率。

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

内联样式：在标签内使用style属性指定css代码。
* eg：<div style="color:red;">hello css</div>
内部样式：在head标签内，定义style标签，style标签的标签体内容就是css代码。

eg：

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

外部样式：
1）定义css资源文件。
2）在head标签内，定义link标签，引入外部的资源文件

eg：
a.css文件：

	div{
	    color:green;
	}
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>

注意：
1） 1,2,3种方式 css作用范围越来越大。
2） 1方式不常用，后期常用2,3。
3） 3种格式可以写为：

<style>
@import "css/a.css";
</style>

css语法：

格式：

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

选择器:筛选具有相似特征的元素
注意：每一对属性需要使用；进行隔开处理，最后一对属性可以不加；。

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

分类：

基础选择器：
1） id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一。

语法：#id属性值{}
2）元素选择器：选择具有相同标签名称的元素。
语法：标签名称{}
注意：id选择器优先级高于元素选择器。
3）类选择器：选择具有相同的class属性值的元素。
语法：.class属性值{}
注意：类选择器选择器优先级高于元素选择器。

扩展选择器：
1）选择所有元素：

语法： *{}
2）并集选择器：
语法：选择器1,选择器2{}
3）子选择器：筛选选择器1元素下的选择器2元素。
语法：选择器1 选择器2{}
4）父选择器：筛选选择器2的父元素选择器1。
语法：选择器1 > 选择器2{}
5）属性选择器：选择元素名称，属性名=属性值的元素。
语法：元素名称[属性名=“属性值”]{}
6）伪类选择器：选择一些元素具有的状态。
语法：元素:状态{}
eg：
状态：
（1） link：初始化的状态。
（2） visited：被访问过的状态。
（3） active：正在访问状态。
（4） hover：鼠标悬浮状态。

属性

字体、文本：

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

背景：background：设置背景图片。
边框：border：设置边框，符合属性。
尺寸：

width：宽度
height：高度

盒子模型：控制布局

margin：外边距
padding：内边距
1）默认情况下内边距会影响整个盒子的大小。
2） box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小。
float：浮动
1） left
2） right

HTML&CSS快速入门思维导图

在这里插入图片描述