第一次网页前端培训笔记（Html基础语法和常用标签）

最新推荐文章于 2024-08-05 17:07:25 发布

我不是刘德华哇

最新推荐文章于 2024-08-05 17:07:25 发布

阅读量473

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/Amazing8848/article/details/122776623

版权

一.什么是HTML
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

二.安装编译器

HbuilderX

下载地址链接：HBuilderX-高效极客技巧 (dcloud.io)

三.基础操作和了解整体结构

新建普通项目，一般使用基本HTML项目（里面都已经添加好部件），点击创建，如下图所示

创建传建好之后便是如下图所示：

四.HTML学习（基础语法和常用标签）

首先推荐大家一个视频学习的网站（适合新手小白）：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

然后推荐大家一个网站去学习（里面有详细的语法讲解）：HTML 教程 | 菜鸟教程 (runoob.com)

1.1.单标签

单标签，不设置属性值。如：

<br\>,<hr\>

1.2.单标签属性

单标签（也叫空元素），设置属性值。如：

<hr width="800"\>

1.3.双标签

双标签，不设置属性值，如：

<title>...</title>

1.4.双标签属性

双标签，设置属性值。如：

<body bgcolor="red">...</body>

<font size="7">...</font>

2.1.标题和水平线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h1>标题1</h1>
		<h2>标题2</h2>
		<h3>标题3</h3>
		<h4>标题4</h4>
		<h5>标题5</h5>
		<h6>标题6</h6>
		<!--
		标题
		h1-h6字数大小逐渐减小
        块级元素，自动换行
		-->
		<hr>
		<!--
		换行
		常用属性：
				颜色
				粗细
				长度
		-->
	</body>
</html>

效果如图：

2.2.段落与换行

<p>虎头虎脑</p>
		<p>不会嘴瓢</p>
		<!--
		标题标签
				p
				块级元素，自动换行
		-->
		虎年<br>大吉
		<!--
		换行标签
				br
		-->

效果如图：

2.3.列表（有序列表和无序列表）

<ul>
			<li>刘德华</li>
			<li>张学友</li>
			<li>郭富城</li>
		</ul>
		<ol>
			<li>刘德华</li>
			<li>张学友</li>
			<li>郭富城</li>
			
		</ol>
		<!--
		有序列表<ol></ol>
		无需列表<ul></ul>
		type更换类型
		-->

效果如图：

2.4.div和span

        <div>这是一个div？</div>
		yes
		<!--
		块级元素
		默认占全部的宽度，有多少内容占多少高度
		可以设置div的高和宽
		通过align设置内容的对齐方式
		-->
		<span>这是一个span？</span>
		yes

效果如图：

2.5.格式化标签

<font color="aqua" size="7" face="楷体">你好</font>
		<pre>
		hello world
		</pre>
		<p><b>梅克尔</b><i>属实</i><u>永远</u><del>的神</del></p>
		H<sub>2</sub>O
		<hr>
		2<sup>3</sup>=8
		<!--
		格式化标签
				font标签
						color 颜色
						size 字体大小
						face 字体风格
				pre
				预格式化标签，保留空格和换行
				b 加粗
				i 倾斜
				u 下划线
				del 中划线
				sub 下标
				sup 上标
		-->

效果如图

3.1.a标签

<a href="http://www.baidu.com">百度</a>
		<!--
			a标签
				超链接性标签
				常用属性：
					href：需要跳转的地址（必须属性）
					target：窗口打开的方式
						_self：当前窗口（默认）
						_blank：在空白窗口
				作为锚点（回到顶部）
		-->

效果如图：

3.2.图片

<img src="img/PC_880906d2a4ad95f5fafb2e540c5cdad7.png" width="200" height="100" title="看赛事上百度"/>
		<!--
			img标签:
					向网页嵌入一张图片
					常用属性：
							src；需要引入的图片的的地址（必须属性）
							alt：当图片破损或不存在时，显示文本的内容
							title：当鼠标悬停在图片上时显示的内容
							width：图片的长度
							height：图片的高度
							border：图片边框
		-->

效果如图：

3.3.表格

<table width="400px" align="center" border="1" style="border-collapse: collapse;">
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
			<tr align="center">
				<td>1</td>
				<td>刘德华</td>
				<td>48</td>
			<tr align="center">
				<td>1</td>
				<td>张学友</td>
				<td>48</td>
			<tr align="center">
				<td>1</td>
				<td>郭富城</td>
				<td>48</td>
		<!--
			表格标签
					table 表格
					tr 行
					td 标准单元格
					th 表头（字体居中，加粗效果）
					table的属性
							width 长度
							border 边框
							align 对齐方式
							style="border-collapse: collapse;合并表格的边框
					tr的属性
						align 行内容的对齐方式
		-->

效果如图：