**超文本标记语言_ HTML入门 *

最新推荐文章于 2024-07-22 13:26:28 发布

暗余

最新推荐文章于 2024-07-22 13:26:28 发布

阅读量294

点赞数

分类专栏： # WEB核心文章标签： HTML HTML入门 HTML笔记 htm HTML5

文章为作者自己原创文章，转载请注明出处，附上文章地址。

本文链接：https://blog.csdn.net/qq_37128049/article/details/84567984

版权

WEB核心专栏收录该内容

27 篇文章 1 订阅

订阅专栏

HTML

HTML概述
HTML的概念和入门
HTML标签基础
HTML标签进阶

一. HTML概述

1.1 什么是javaWeb?

使用Java语言开发基于互联网的项目

1.2 软件的架构？

C/S: Client/Server
1. 解释：客户端/服务器端,在用户本地有一个客户端程序，在远程有一个服务器端程序
2. 例子：QQ，迅雷
3. 特点：
  - 优点：用户体验好。
  - 缺点：开发，安装，部署，维护都比较麻烦。
B/S: Browser/Server 浏览器/服务器端
1. 解释：只需要一个浏览器，用户通过不同的网址（URL），可以访问远程不同的服务器端程序。
2. 特点：
  - 优点：开发，安装，部署，维护都比较简单
  - 缺点：
    1. 如果应用过大，用户的体验可能会受到影响
    2. 对硬件要求过高
    3. 有些效果在网页上无法做出来

1.3 B/S架构详解：

资源分类
1. 静态资源
  - 使用静态网页开发技术发布的资源
  - 特点：
    1. 所有用户访问，得到的结果是一样的。
    2. 如：文本，图片，音频，视频，HTML，CSS,JavaScript
    3. 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器，浏览器中内置了静态资源的解析引擎，可以展示静态资源。
2. 动态资源（JAVA开发的重点）
  - 使用动态网页开发技术发布的资源
  - 特点：
    1.所有用户访问，得到的结果是不一样的。
    2.如：jsp/servlet，php，asp…
    3.如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源再发送给浏览器。
3. 注意：我们要学习动态资源，必须先学习静态资源！
4. 静态资源三元素：
  - HTNL：用于搭建基础网页，展示页面的内容
  - CSS：用于美化页面，布局页面。
  - JavaScript：控制页面的元素，让页面有一些动态的效果。

javascript的动态效果在所有用户登录所看到的都是一样的，所以它也是静态页面，只是能动而已。动态页面是指每个人看到的不一样的。

简单来说，动态页面，就是根据场景的区别会对数据进行动态的处理。

二. HTML的概念和入门

2.1 概念：

Hyper Text Markup Language：超文本标记语言
超文本：
- 超文本是用超链接的方法，将各种不同的文字信息组织在一起的网状文本
- 有的人也叫做超级文本，因为它里面可以放文字，放图片，放音频，视频等普通文本所完成不了的效果。
标记语言：
* 由标签构成的语言。<标签名> 如 html，xml
* 标记语言不是编程语言
HTML ：由一些特定的标签组成的语言，可以用来在网页上展示数据。因为老版本的CPU只能解析文件后面三个字符，所以只能解析到htm，实际上这两个没有任何区别。

2.2 快速入门：

语法：
1. html文档后缀名 .html 或者.htm
2. 标签分为两类：
  - 围堵标签：有开始标签，结束标签。如：根标签
  - 自闭合标签：开始标签和结束标签在一起。如
    反斜线在后面
3. 标签可以嵌套：
  - 需要正确嵌套，不能你中我有，我中有你。每个开始标签和结束标签需要一一对应。
4. 在开始标签中可以定义属性。属性时由键值对构成，值需要用引号引起来，单双引都可以，建议都用单引或者双引。
5. html的标签不区分大小写，但是建议使用小写。

常用标签：

		<html> </html>
		<head> </head>
		<body> </body>
		<title> </title>
		<font> </font>
		<br/>

注意： HTML语法不严谨，所以在使用过程中如果写错了不会报错，也可以运行，在运行解析中，错误的部分只是不会显示出来。

三. HTML标签基础：

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

html：html文档的根标签
head：头标签。用于指定html文档的一些属性。引入外部的资源
title：标题标签，指定网页页面的标题。

3.2 body：体标签

<!DOCTYPE html>: 定义文档类型
<meta charset='utf-8'>指定文档编码字符集
<p>: 段落标签相对于br标签，它的上下行间隔更大一点。
<hr>：水平线标签显示一条水平线
  ：空格

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

 ：此为html的注释方法,不会在浏览器上展示具体的内容。 ctrl+shift+/ 快捷键
<h1> to <h6>:标题标签

3.4 字体大小逐渐递减

<p>:
<br>:换行标签 <br/>或者<br>
<hr>:

3.5 属性：

color：颜色
width：宽度
*size：高度
align：对齐方式

3.6 方位：

center：居中
*left：左对齐
right：右对齐

3.7 文本:

<b>:让文本加粗显示
<i>: 让文本显示成斜体
<font>:字体标签，配置字体大小，字体，颜色等。
<center>:让文本居中显示

四. HTML标签进阶：

4.1 图片标签：

<img>: 指定图片的路径：相对路径 /url
相对路径：相对于当前的html页面，
如果下一级目录：下一级目录名/图片名
如果上一级目录： …/图片名
alt：如果图片不能正常显示，那么则会显示着串提示文字。
width：指定宽度
height：指定高度

4.2 列表标签：

<ol>有序列表
<type>指定样式
<li>
<ul>无序列表

4.3 链接标签：

a定义一个超链接

属性：

herf：统一资源定位符
target:指定打开资源的方式
target="_self":默认值，在当前页面打开
target="_black"：新建页面打开超链接窗口

4.4 块标签:

:文本信息默认情况下在一行展示，称为行内标签，内联标签。
:没有任何样式，默认换行，每一个div占满一行。
这两种是非常常用的标签，常与css结合使用。

4.5 语义化标签：html5中为了提高程序的可读性，提供了一些标签

<header>
<footer>

4.6 表格标签：

table:定义表格
- width：宽度
- border：边框
- cellpadding：定义内容和单元格之间的距离。
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条。
- bgcolor：背景色
- align：对齐方式
- tr：定义行
td：定义单元格[该行的某列]
tr: 定义行
扩展：
- th：定义表头单元格（会默认加粗，居中）
- caption：表格标题
- thead：表格的头部分
- tbody：表格的体部分
- tfoot：表格的脚部分
注意：
- 合并的时候从上往下第一个改变的设置属性。
- colspan：合并行，占列（colspan=“2” 这里代表合并行内的两列）
- rowspan：合并列，占两行，合并两行的同一列