第一次网页前端培训笔记（HTML常用标签）

wewqeqwwq1

已于 2022-02-05 19:01:27 修改

阅读量102

点赞数

文章标签：前端 html

于 2022-02-05 13:13:55 首次发布

本文链接：https://blog.csdn.net/wewqeqwwq1/article/details/122789673

版权

一，安装编译器

HBuilder X

二，基础操作

（1）新建项目

（2）管理文件夹

三，基础

（1）基本框架

    <!--html语言中的注释-->
    <!doctype html><!--html文档的文档类型声明：这是一个html的文档，版本是5-->
    <html><!--html标签：html文档正式开始-->
    <head><!--html文档的头部区域开始，主要是用来说明html文档的一些相关属性或者设置-->
    	<meta charset="utf-8"><!--meta标签：元信息标签，用来给网页添加一些相关信息或设置。charset:字符集。指定此网页的编码为UTF-8-->
    	<!--常见的编码：国际化——utf-8,中文编码——GBK-->
    	<title>无标题文档</title><!--title标签：设定此网页的标题-->
    </head><!--html文档的头部区域结束-->
     
    <body><!--body标签：表示html文档的主体区域开始，对应浏览器的对应呈现窗口-->
    </body><!--body标签：表示html文档的主体区域结束-->
    </html><!--html标签：html文档正式结束-->

（2）标题标签

<!--标题标签
		    <h><h/>
		    h1~h6 大小依次减
			尽量减少使用h1标签
			块级元素
			-->
		<h1>标题1</h1>
		<h2>标题2</h2>
		<h3>标题3</h3>
		<h4>标题4</h4>
		<h5>标题5</h5>

（3）段落标签

<!--段落标签
		     p标签，会自动换行
			 <p><p/>
			 块级元素
		-->
		<p>这是一个段落1</p>
		<p>这是一个段落1</p>

（4）换行标签

<!--换行标签
		    br 单标签
			<br><br/>
		-->
		Hello<br>
		World

（5）水平线标签

<!--水平线标签
		    <hr><hr/>
			hr 单标签
			常用属性
			   color 颜色
			   size 粗细
			   width 长度（百分比 或 px）
		-->
		<hr>
		<hr color="red" size="3" width="50%">

（6）列表

<!--列表
		       有序列表
			   <ol><li></li></ol>
			   无序列表
			    <ul><li></li></ul>
		-->
		<ol type="I">
			<li>周杰伦</li>
			<li>陈奕迅</li>
			<li>林俊杰</li>
			</ol>
		<ul type="square">
			<li>周杰伦</li>
			<li>陈奕迅</li>
			<li>林俊杰</li>
			</ul>

（7）块状标签

<!--div标签
		    块级标签
			默认占全部的宽度，有多少内容高度占多少
			可以设置div的宽（width）稿(height)
			通过align设置内容对齐方式
			-->
		<div style="width: 100px;height: 100px;">这是一个div</div>
		1111

（8）span标签

<!--span标签
		    行内元素（不会自动换行）
		-->
		<span>这是一个span</span>
		<hr>

（9）格式化标签

<!--格式化标签
		    font标签
			    color 字体颜色
			    size 字体尺寸
				face 字体风格
				pre
				预格式化标签，保留空格与换行
				b 加粗
				i 倾斜
				u 下划线
				del 中划线
				sup 上标
				sub 下标
		-->
		<font color="aqua" size="5" face="楷体">你好</font><br>
		<pre>
		Hello
		wrold
		</pre>
		<p><b>Hello</b>World</p>
		H<sub>2</sub>O

(10)a标签

<!--
		a标签
			超链接标签，用于链接到一个新的URL
			常用属性：
				href：需要跳转的地址（必须属性）
				target：窗口打开的方式
					_self：当前窗口（默认）
					_blank：在空白窗口
			作为锚点：
				a标签的name属性值：
					<a name="top"></a>
				其他的id属性值：
					<div id="top"></div>
				锚点的使用
					<a href="#top"></a>
		-->

（11）img标签

<!--
		    img标签
			   向网页中嵌入一张图标
			   
			   常用属性：
			      src: 需要引入的图片地址 （必须属性）
				  alt：当图片破损或不存在时，显示文本内容
				  title: 当鼠标悬停在图片上时的文字
				  width: 图片的宽度
				  height: 图片的高度
				  border: 图片边款
		-->
		<img src="img/bd.png" width="500" height="200" border="2" title="baidu" alt="baidu"/>

（12）表格

<!--table 表格
		    tr    行
			td    标准单元格
			th    表头（字体居中，加粗效果）
			
			table 表格的属性
			   width表格的宽度
			   border边款
			   align多起方式
			tr    行的属性
			   align行的内容的对齐方式
		-->
		<table width="400px" align="center" border="1" style="border-collapse: ;">
			<tr>
				<tr>编号</tr>
				<tr>姓名</tr>
				<tr>年龄</tr>
			</tr>
			<tr align="center" bgcolor="bisque">
				<td>1</td>
				<td>张三</td>
				<td>18</td>
			</tr>
		</table>