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

最新推荐文章于 2024-04-18 12:07:41 发布

Rrxiaobaijiu

最新推荐文章于 2024-04-18 12:07:41 发布

阅读量639

点赞数

分类专栏： HTML 文章标签：前端

本文链接：https://blog.csdn.net/Rrxiaobaijiu/article/details/122778183

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

学习网址：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

1.安装HBuilder

直接在浏览器中搜索

2.安装好以后选择自己喜欢的操作页面以及快捷方式根据自己的喜好即可

3.基础操作

3.1创建一个项目

3.2选择新建的项目

项目创建成功后就是自由创作时间

4.学习笔记

本次主要学习常用的各类标签

4.1实例

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

4.2

（1）标题标签:h1到h6大小依次递减，减少使用h1标签,可能被搜索引擎拉黑

实例：

        <h1>标题1</h1>
		<h2>标题2</h2>
		<h3>标题3</h3>
		<h4>标题4</h4>
		<h5>标题5</h5>
		<h6>标题5</h6>

（2）段落标签：p标签，会自动换行，为快捷元素

实例：

<p>这是一个段落</p>

（3）换行标签： br 单标签
<br>/<br/>

（4）水平线标签： hr 单标签
常用属性： color 颜色 size 粗细 width 长度（百分比，px） aline 对齐方式

<hr color="black" size="3"width="90%" aline="left">

（5）列表：有序列表:<ol><li><li></ol>
无序列表:<ul><li><li></ul>

实例：

<ul type="disc">
					<li>路之遥</li>
					<li>谢渊</li>
					<li>李弱水</li>
			</ul>
			<ol type="I">
					<li>路之遥</li>
					<li>谢渊</li>
					<li>李弱水</li>
			</ol>

运行：

（6）div标签
               块级元素，默认占全部的宽度
               有多少内容高度占多少，可以设置div的宽高（width /height）
               对齐方式：aline
span标签
           行内元素（不会自动换行）

实例及运行截图

<div style="width:500px;height:100px;"aline="center">这是一个div</div>
			小鹿yyds
			<span>这是一个span</span><br>

（7）格式化标签
font标签：color 字体颜色 size 字体大小 face 字体风格
pre预格式化标签（保留空格和换行）
b 加粗
i倾斜
u下划线
del中划线
sup上标
sub下标

<font color="orangered" size="2" face="arial">大家新年快乐，虎虎生威</font>
		<pre>
			嘿嘿
		</pre>
		<p><b>冬日</b>下雪天才更<del>寒冷</del><i>浪漫</i></p>

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

<a href="http://www.baidu.com"target="_blank">百度</a>
<br><a href="#">回到顶部</a><br>
			<a href="#yyjl">演艺经历</a>

（9）img标签
               向网页中嵌入一张图标
               常用属性：
                   src：需要引入的图片的地址（必须属性）
                   alt：当图片破损或不存在时，显示文本的内容
                   title：当鼠标悬停在图片上时显示的文本
                   width：图片的宽度
                   height：图片的高度
                   border：图片边框-

实例：

<img src="img/xienian.png"wudth="200"height="200"border="2"title="谢怜"/>

（9）表格标签
table 表格
tr 行
td 标准单元格
th 表头（字体居中，加粗效果）
table的属性
       width 宽度
  border边框
       align 对齐方式
       style="border-collapse:collaose;" 合并表格的边框
       tr的属性
       laign 行的内容的对齐方式
       bgcolor 背景颜色

实例及运行效果

<table width="50%" border="1" cellspacing="0" cellpadding="0" align="left">
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr align="center" bgcolor="antiquewhite">
				<th>001</th>
				<th>小月</th>
				<th>19</th>
			</tr>
			<tr>
				<th  align="center">002</th>
				<th>小葵</th>
				<th>21</th>
			</tr>
			<tr>
				<th  align="center">002</th>
				<th>小王</th>
				<th>22</th>
			</tr>
		</table>

Rrxiaobaijiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一次网页前端培训笔记（html常用标签）

学习网址：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili1.安装HBuilder直接在浏览器中搜索2.安装好以后选择自己喜欢的操作页面以及快捷方式根据自己的喜好即可3.基础操作3.1创建一个项目3.2选择新建的项目项目创建成功后就是自由创作时间4.学习笔记本次主要学习常用的各类标签4.1实例注意：对于中文网页需要使用<meta charset="utf-8"&..
复制链接

扫一扫