HTML 快速入门_冯晓如-CSDN博客

本文链接：https://blog.csdn.net/z714405489/article/details/104938860

概念

全称Hyper Text Markup Language 超文本标记语言，是最基础的网页开发语言。

超文本:
超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
标记语言:
由标签构成的语言。如 html，xml。标记语言不是编程语言。

快速入门

语法

html文档后缀名 .html 或者 .htm
标签分为
1. 围堵标签：有开始标签和结束标签。如 <html></html>
2. 自闭合标签：开始标签和结束标签在一起。如
标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：<a></a>
正确：<a></a>
在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来。
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标签及其功能。

1. 文件标签

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

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

2. 文本标签

也就是和文本有关的标签。

注释：
<h1> to <h6>：标题标签， h1~h6:字体大小逐渐递减。
：段落标签
 ：换行标签
<hr>：展示一条水平线
：字体加粗
：字体斜体
：字体标签
<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. 数值%：占比相对于父元素的比例
size：高度
align：对齐方式
|–center：居中
|–left：左对齐
|–right：右对齐

小示例：

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>比特大陆简介</title>
</head>
<body>
<header>
    <div id="header">
    <h1>
        公司简介
    </h1>

    </div>

</header>
<hr color="#ffd700">

<p>
<font color="#FF0000">比特大陆科技控股公司</font>（以下简称比特大陆，英文BITMAIN）成立于2013年，是一家<b><i>全球领先的科技公司</i></b>，其产品包括算力芯片、算力服务器、算力云，主要应用于区块链和人工智能领域。
</p>

<p>
    比特大陆总部位于北京市海淀区，在香港、新加坡、美国等地设有研发中心。
</p>

<p>

    本着聚焦主业，有序横向发展，成为一家世界顶尖的科技公司的企业愿景，比特大陆积极拓展算力中心的全球布局，不断提高区块链云计算的资源利用率，探索发现环境友好型区块链云计算技术。
</p>



<hr color="#ffd700">
<footer>

    <div id="footer">
    <font color="gray" size="2">
        <center>
            Copyright © 2020 BitMain Technologies Holding Company. All Rights Reserved.比特大陆科技控股公司<br>
            京公网安备 11010802022514号 京ICP备15028173号-2
        </center>
    </font>
    </div>
</footer>

</body>
</html>

页面展示：
在这里插入图片描述

3. 图片标签

img：展示图片

属性：
* src：指定图片的位置
*alt：图片的默认文字（如图片加载失败时，将会显示）
代码：

 <!--展示一张图片 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">

4. 列表标签

有序列表：
- ol 定义一个有序列表，可指定type、start等属性
- li 列表的每一项
无序列表：
- ul 定义一个无序列表
- li 列表的每一项

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>

    <!--有序列表 ol-->
    早上起床干的事情
    <ol type="A" start="5">
        <li>睁眼</li>
        <li> 看手机</li>
        <li> 穿衣服</li>
        <li> 洗漱</li>
    </ol>
   <!-- 无序列表  ul-->

    早上起床干的事情
    <ul type="disc">
        <li>睁眼</li>
        <li> 看手机