HTML学习笔记

最新推荐文章于 2022-07-20 13:19:57 发布

阳光丿洒脱

最新推荐文章于 2022-07-20 13:19:57 发布

阅读量509

点赞数

分类专栏：一些小项目

本文链接：https://blog.csdn.net/liuyuchen282828/article/details/102601387

版权

一些小项目专栏收录该内容

13 篇文章 1 订阅

订阅专栏

HTML简介

HTML，Hyper Texture Markup Language，超文本标记语言。
在计算机中以.html、.htm作为扩展名
可以被浏览器访问, 就是经常见到的网页

HTML特点

语法非常简洁、比较松散，以相应的英语单词关键字进行组合
html标签不区分大小写
大多数标签是成对出现的, 有开始, 有结束.<html></html>
不成对出现的称之为短标签.<br/><hr/>

标签中的属性和属性值

属性=“属性值”

	<font color = "red"> hello,world </font>
	属性值建议加引号,(双，单引号，不加都可以)

HTML组成部分

<!doctype html> 声明文档类型
<html>文档的头部好和主体内容 </html> 根标记
<head> 文档的头部信息</head> 头部标记只能有一对
<title>显示在浏览器窗口的标题栏中“网页名称”</title> 位于 <head>标记之内
<body></body> 主体标记位于<html>之内,<head>标记之后

例如

<!DOCTYPE html>
<html>
	<head>
		<title>我是一个标题</title>
	</head>
	<body>
		<!-- 标题 -->
		<h1>二叉搜索树 </h1>
		<h2>二叉搜索树</h2>
		<h3>二叉搜索树</h3>
		<h4>二叉搜索树</h4>
		<h5>二叉搜索树</h5>
		<h6>二叉搜索树</h6>
	</body>
</html>

在这里插入图片描述

文字和标题标签

标题标签

`<h1></h1>`//最大

只有一个
搜索引擎优化:seo

<h2></h2>
…

`<h6></h6>`//最小

1–6依次变小，自动换行

文本标签

属性

color:文字颜色

表示方式:
	1. 英文单词:red green blue....
	2. 使用16进制的形式表示颜色:#ffffff -- (rgb)
	3. 使用rgb(255,255,0)

size:文字大小

范围 1 -- 7
1. 7最大，最大就是7
2. 1最小，最小就是1

文本格式化标签

文本加粗标签

尽量使用strong

文本倾斜标签

尽量使用em

删除线标签

尽量使用del

段落

特点:
上下文自动生成空白行

块容器

<div>This is div element. </div>
用于没有语义含义的块级容器(或网页的“划分”)
属性:对齐方式
align
1. left
2. center
3. right

换行

<br/>

水平线

<hr/>

属性

color：3种表示方法
size: 1 —7
<hr color = "red" size = "3"/>

示例

<!DOCTYPE html>
<html>
	<head>
		<title>我是一个标题</title>
	</head>
	<body>
		<!-- 标题 -->
		<h1>二叉搜索树 </h1>
		<h2>二叉搜索树</h2>
		<h3>二叉搜索树</h3>
		<h4>二叉搜索树</h4>
		<h5>二叉搜索树</h5>
		<h6>二叉搜索树</h6>
		
		
		<font color="red" size="2">2019/10/17</font>
		<!-- 正文 -->
		<p>
		
		   <strong>	文本加粗<em>标签</em> </strong>
			文本加粗标签 <!-- 往后不会换行 -->
			<ins>文本加粗标签</ins> 
			<del>文本加粗标签</del> 
		</p>
		<br/>
		
		<hr color="green" size = "7"/>
		
		<strong><font color="red">hello world</font></strong>
		
		我也不知道我该怎么放
		我也不知道我该怎么放
		我也不知道我该怎么放
		<div align="left">我也不知道我该怎么放</div>
		<div align="center">我也不知道我该怎么放</div>
		<div align="right">我也不知道我该怎么放</div>
		
	</body>
</html>

列表标签

无序标签

标签

<ul>
	<li></li>列表项
	<li></li>
</ul>

属性:type
1. 实心圈圈:disc – 默认
2. 空心圈圈:circle
3. 小方块:square

有序列表

标签

	<ol>
		<li></li> 列表项
		<li></li>
	</ol>

属性
1. type – 序号
  - l — 默认
  - a
  - A
  - i ----- 罗马数字(小)
  - I ----- 罗马数字(大)
2. start
  从序号的什么位置开始表示

在这里插入图片描述

自定义标签

标签

	<dl>
		<dt></dt> 小标题
			<dd></dd>解释标题
			<dd></dd>解释标题
	</dl>

在这里插入图片描述

图片标签

<img src="3.gif" alt="小岳岳" title="我的天呐！" width="300" height="200" />•

属性
* src :图片的来源必写属性
* alt: 替换文本图片不显示的时候显示文字
* title: 提示文本鼠标放到图片显示的文字
* width : 图片宽度
* height: 图片高度
注意
- 图片没有定义高的时候，图片按照百分之百比例显示
- 如果只更改图片的宽度或者高度，图片等比例缩放

<img src="E:\图片\1.jpg" alt="图片加载失败" title="我是一张图片" width ="200" height="200"/>

在这里插入图片描述

超链接标签

<a href="http://jd.com" title="A dog" target="_blank">超链接</a>

属性:
* href: 去往的路径(跳转的页面)必写属性
* title:提示文本，鼠标放到链接上显示的文字
* target
1. _self: 默认值在自身页面打开(关闭自身页面，打开链接页面)
2. _blank: 打开新页面 (自身页面不关闭，打开一个新的链接页面)
示例

<a href="http://www.baidu.com">百度一下</a>

<p>
点后面跳转到百度<a href="http://www.baidu.com" title= "我是百度" target="_blank"> 点我点我</a>
	</p>

在这里插入图片描述

锚链接

先定义一个锚点:<p id = "sd">
超链接到锚点:<a herf = "#sd">回到顶点</a>

表格标签

* 属性 1. border --- 表格线，宽度1-7 2. bordercolor -- 表格线颜色 3. width 4. height
-- 行 * 属性 1. align -- 对齐方式 1. center 2. left 3. right
-- 单元格(列) * 对其属性设置tr
示例:

<table border =>
	<tr>
		<td></td>第一列
		<td></td>第二列
	</tr>
	<tr>
	  	<td></td>
	  	<td></td>
	 </tr>
	 	<td></td>
	 	<td></td>
	 </tr>
	</table>

<table border="3" bordercolor = "blue" width="500" height="500" background="E:\图片\1.jpg">
		<tr align="center">
			<td align="center">姓名</td>
			<td>年龄</td>
			<td>性别</td>
		</tr>
		<tr>
			<td>张三</td>
			<td>23</td>
			<td>男</td>
		</tr>
		<tr>
			<td>李四</td>
			<td>24</td>
			<td>女</td>
		</tr>
		<tr>
			<td>老王</td>
			<td>56</td>
			<td>不知道</td>
		</tr>
	</table>