HTML&CSS学习（第一天）

最新推荐文章于 2023-07-12 22:33:49 发布

weixin_42831114

最新推荐文章于 2023-07-12 22:33:49 发布

阅读量77

点赞数

分类专栏： JAVA前端开发文章标签： HTML5基础 WEB前端

本文链接：https://blog.csdn.net/weixin_42831114/article/details/95996970

版权

JAVA前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一些简介

软件架构分为：

C/S（客户端/服务端）：一般我们使用的软件都是C/S架构。特点是：软件使用前需要安装；软件更新时服务器客户端都要同时跟新；不能跨平台使用；客户端和服务器采用自有协议，相对来说比较安全。
B/S（浏览器/服务端）：本质上也是C/S，等于就是将浏览器作为软件客户端。特点是:通过浏览器访问网页的形式来使用软件，软件不需要安装，不需要更新（指的是客户端），软件可以跨平台使用；B/S中浏览器和客户端通信采用HTTP协议，相对C/S来说安全度低一些。

W3C标准

W3C（万维网联盟）标准分为三部分，结构、表现以及行为。我们学习的前端基础主要也是学习下面三个项目。
结构（HTML）：用于描述页面的结构。
表现（CSS）：用于控制页面中元素的样式。
行为（JavaScript）：用于相应用户的操作。

HTML超文本标记语言

html的标准格式

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

注释：

<html></html>是一对跟标签，每个html文件都有且只有一个跟标签，其他的内容都必须被包含在根标签中
根标签下分为两个部分，<head>和<body>,<head>里面的内容不会被显示，主要作用是帮助浏览器解析文件内容的，<body>里面的内容是显示给用户的。
<title>标签是网页的标题，默认显示在网页标题中，搜索引擎在检索时首先会检索title标签中的内容。
注释的格式：<!- - 这里是注释的内容 - ->
属性：通过属性来设置标签如何处理标签中的内容。在开始标签里面添加当前标签的属性。

<!--将标签包含的内容设置为红色-->
<font color="red">
	Hello word！
</font>

文档声明：
html有多种标准，常见的有html4,html5,xhtml等，浏览器在解析问件时我们需要做一个文档声明，告知浏览器我们使用的哪一种标准。如果不注明的话可能会导致某些浏览器解析异常。导致进入异常模式。我们一般用html5的标准。其文档声明如下：

<!DOCTYPE html>

常见字符集以及特殊字符的写法

浏览器在解析时候会有默认的字符集来解码，但是如果我们编码的字符集与浏览器解码的字符集不同就会造成乱码的情况。我们可以在meta标签中去声明，后面会提到如何设置。
常见的字符集有：ASCII,ISO-8859-1,GBK,GB2312(中文系统默认编码)，UTF-8(万国码)等。
注意字符（又称实体）:

<  用&lt;表示
>  用&gt；表示
空格  用&nbsp；表示
版权声明  用&copy；表示
其他的可以参见w3School离线手册

meta标签

meta标签是一个自结束标签（不需要成对的标签），用来设置网页的一些元数据，例如字符集，关键字，描述等。可以再head的子标签中声明。

<!--
	声明字符集,关键字以及描述。
	当name为keywords时，content的内容就是关键字，
	name是description时content的内容就是网页的描述。
	这两种类型搜索引擎都会搜索，但不会影响搜索排名
-->
<meta charset="utf-8" 
	name="keywords"  content="这里是关键字，关键字之间逗号隔开"
	name="description content="这里添加对网页的描述"
	/>

meta还可以做请求的重定向

<meta http-equiv="refresh" content="5";url=http://www.baidu.com" />
<!--content是秒数，url的内容是目标路径-->

三个格式标签

标题标签：h1~h6：使用html标签关心的是标签的语义，譬如我们一般用h1来修饰重要的内容，h1修饰内容的重要性仅次于标题标签的内容。搜索引擎在检索完title之后会立即查看h1标签包含的内容。一般页面标题标签只用h1，h2，h3，再往后就不用了。
段落标签<p> </p>：标签中的文字会默认独占一行，并且段与段之间也会有一些距离。html中多个连续空格只会被浏览器当成一个空格。换行符也只会当成一个空格。
换行标签<br/>：换行标签是一个自结束标签。另外还有一个<hr/>可以再页面生成一条水平线。

图片标签：

<img
	src='这里填写一个外部图片的路径'
	alt="这里用来设置在图片无法加载时对图片的描述"
	width="设置图片宽度"
	heigth="设置图片高度"
	<!--搜索引擎会通过alt描述来识别不同的图片，不设置alt搜索引擎就不会对img中的图片进行收录-->
	<!--宽度和高度的设置如果只设置其中一个的话另外一个参数也会同时按照比例缩放-->
/>

常见的图片格式有：JEPG（JPG）、GIF、PNG。其中JEPG支持颜色比较多，可以压缩，但是不支持透明。一般用来保存照片等颜色丰富的图片；GIF支持颜色比较少，支持简单的直线透明，支持动态图。一般颜色单一的图片或者动图用GIF；PNG支持颜色多，并且支持复杂透明。

内联框架：在页面中引入其他的网页

<iframe 
	src='这里填写一个外部网页的路径' 
	name="填写内联框架的属性"
	width="xxx"
	height="xxx"
	></iframe>

超链接

<a></a>

常见属性有：

  href:指向链接跳转的目标地址，可以使相对路径也可以是一个完整的地址。

  target：当值为_self时表示在当前窗口打开，不填写该属性默认就是这个值。当值为_blank表示在新的窗口打开。

xhtml的语法规范（因为xhtml规范最严格）：

html标签不区分大小写，一般用小写。
html注释不支持嵌套。
html标签必须结构完整，要么成对开始，要么自行结束。
html标签可以嵌套，但不能交叉嵌套。
html标签中的属性必须设置，且值必须加引号（单双都行）。

weixin_42831114

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML&CSS学习（第一天）

一些简介软件架构分为：C/S（客户端/服务端）：一般我们使用的软件都是C/S架构。特点是：软件使用前需要安装；软件更新时服务器客户端都要同时跟新；不能跨平台使用；客户端和服务器采用自有协议，相对来说比较安全。B/S（浏览器/服务端）：本质上也是C/S，等于就是将浏览器作为软件客户端。特点是:通过浏览器访问网页的形式来使用软件，软件不需要安装，不需要更新（指的是客户端），软件可以跨平台使...
复制链接

扫一扫