HTML基础学习

最新推荐文章于 2024-04-18 05:00:00 发布

Danny_hi

最新推荐文章于 2024-04-18 05:00:00 发布

阅读量1.4k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43024228/article/details/100750045

版权

前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

W3school链接：https://www.w3school.com.cn/html/index.asp

我的笔记：
1.声明html5格式和声明解码格式：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	
	</body>
</html>

2.标题标签h1~h6
一共有六级标题标签 h1~h6 ，
不关心字体大小，只关心语义，
重要性依次递减，h1标签最重要，
页面一般只能写一个h1，
一般页面标签只使用h1,h2,h3

<h1>这是一级内容标题</h1>
<h2>这是二级内容标题</h2>
<h3>这是三级内容标题</h3>
<h4>这是四级内容标题</h4>
<h5>这是五级内容标题</h5>
<h6>这是六级内容标题</h6>

这是一级内容标题

这是二级内容标题

这是三级内容标题

这是四级内容标题

这是五级内容标题

这是六级内容标题

3.段落标签p
用于表示内容中的一个自然段
p标签中的文字默认独占一行，并且段与段之间会有一个间距
注意：在html中，字符之间存在多个空格或换行，浏览器只会当一个空格解析

<p>我是一个p标签，我用来表示一个段落</p>
<p>我是一个p标签，我用来表示一个段落</p>

4.换行标签br和水平线标签hr
在页面中可以使用br标签来表示一个换行，br标签是一个自结束标签；
hr标签也是一个自结束标签，可以生成一条水平线

<p>
    	铁甲将军夜渡关，<br/>
    	朝臣待漏五更寒。<br/>
    	山寺日高僧未起，<br/>
    	看来名利不如闲。<br/>
</p>
<hr/>

5.实体

在html中，一些如< >这种特殊字符是不能直接使用，有歧义，比如：a<b>c (会把中间<b>当成标签)
    		需要使用一些特殊的符号来表示这些特殊字符，这些特殊字符我们称为实体（转义字符串）：
    		&实体的名字；
    		<	&lt;
    		>	&gt;
    		空格	&nbsp;
    		版权符号	&copy;
    		a&lt;b&gt;c
		<p>&copy;天气&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;很好</p>

a<b>c

©天气很好

6.图片标签img
img标签也是一个自结束标签
属性：src 设置一个外部图片的相对路径
alt 可以用来设置图片不能显示时的描述，搜索引擎可以通过alt属性来识别不同的图片
如果不写alt属性，则搜索引擎不会对img中的图片进行收录
width 可以用来修改图片的宽度，一般使用px作为单位
height可以用来修改图片的高度
当宽度和高度两个属性如果只设置一个，另一个也会等比例调整大小
src表示相对路径，eg： src=“abc/pic.jpg”(也可以使用绝对路径)
可以使用…/来返回上一级目录，返回几级目录就写几个…/
图片格式：
JPEG(JPG):JPEG图片支持的颜色比较多，图片可以压缩，但不支持透明，一般用来保存照片等颜色丰富的图片
GIF：支持的颜色少，只支持简单的透明，支持动态图，一般使用与颜色单一或者是动态图
PNG：支持的颜色多和复杂的透明
使用原则：效果不一致，使用效果好的；效果一致，使用占内存小的

<img src="pic.jpg" width="200px" height="150px" alt="这有一个图片"/>

7.链接标签a
target属性设置链接打开位置，_blank在新窗口打开链接
创建超链接时，如果此时地址不确定可以用一个#作为占位符,并且点击超链接会自动回到顶部
可以设置id属性，可以通过其他a标签的href属性中加#访问其所在的位置
href="mailto:邮件地址"发送电子邮件的超链接，点击链接后可以访问默认邮箱客户端

<a href="https://www.baidu.com">这是百度链接</a>
<a id="tips">提示部分</a>
<a href="#tips">访问提示部分</a>

这是百度链接
 提示部分
 访问提示部分

8.文本格式化
加粗，斜体，上标签，下标签

 <p>此例<b>演示</b><i>如何</i>在一个 HTML 文件中对文本进行格式化</p>
    <p>H<sub>2</sub>O</p>
    <p>x<sup>2</sup>+4x+1=0</p>

此例演示如何在一个 HTML 文件中对文本进行格式化

H₂O

x²+4x+1=0

9.表格标签

<table border="1">
			<tr>
				<th>IC分类</th>
				<th>Main执行速度</th>
				<th>代表型号</th>
			</tr>
			<tr>
				<td>单核</td>
				<td>系统时钟</td>
				<td>RTC</td>
			</tr>
			<tr>
				<td>多核</td>
				<td>系统时钟</td>
				<td>HTB</td>
			</tr>
		</table>

IC分类	Main执行速度	代表型号
单核	系统时钟	RTC
多核	系统时钟	HTB

10.无序列表和有序列表

<ul>
<li>Blue</li>
<li>Black</li>
</ul>
		
<ol>
<li>tiger</li>
<li>lion</li>
</ol>

Blue
Black

tiger
lion

11.文本域

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

First name:
Last name:

12.密码字段

<form>
Password: <input type="password" name="pwd">
</form>

13.单选按钮

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

14.复选框

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

15.提交按钮

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

16.设置背景颜色

<p Style="background-color:#007C8B">设置这段文字的背景</p>
<p Style="background-color:rgb(150,185,125)">设置这段文字的背景</p>
<p Style="background-color:yellow">设置这段文字的背景</p>

17.代码标签code

<code>void function(int value)</code>

18.容器标签canvas

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

19.pre标签
pre标签能保存内部所有格式

20.center标签
所有内容居中显示

21.源标签meta
1.声明解码格式
2.还可以用来设置网页的关键字
3.还可以用来指定网页的描述
搜索引擎在检索页面时，会同时检索页面中的关键字和描述
4.使用meta还可以用来做请求的重定向

<meta charset="utf-8"/>
<meta name="keywords" content="HTML5,JavaScript,CSS,前端"/>
<meta name="description" content="本网页会发布前端相关的信息" />
<meta http-equiv="refresh" content="8;url=https://www.baidu.com" />
<title>这是我的网页标题</title>

22.块元素div
div标签独占一行，是一个纯粹的块元素，并且不会为他里面的元素设置任何默认样式；
div标签主要用来对页面进行布局
（p,h1,h2,h3…都是块标签）

23.内联元素span，或称为行内元素
只占自身大小的元素，不会占用一行;
span没有任何语义，专门用来选中文字，然后为文字设置样式；
（a,img,iframe…都是内联标签）
注意：一般情况下只使用只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素；
块元素里可以包含块元素；
a元素可以包含任意元素，除了他本身；