开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 第一次网页前端培训笔记（HTML常用标签） -> 正文阅读

[JavaScript知识库]第一次网页前端培训笔记（HTML常用标签）

1.安装编译器

HBuilderX官方下载地址：??????DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架

2.学习网址

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

3.基本框架

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

4.常用标签一

1. 标题

通过<h1> - <h6> 标签来定义，大小依次递减，为块级元素（会自动换行），尽量减少使用h1标签（因为h1标签经常会被搜索引擎捕获）


<h1>标题1</h1>

2. 段落

通过标签 来定义，为块级元素

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

3.换行

通过 或者 标签来定义，为单标签，因此它没有结束标签

Hello <br> World！
Hello <br/> World!

4.水平线

通过<hr>标签来定义，为单标签

常用属性:

color 颜色?

size 粗细?

width 长度：百分比或px(像素表示，例如：10px)

align 对齐:? ? ?left：左对齐? ? ?center：居中? ? right：右对齐

<hr color="red" size="5" width="50%" align="left">

5.列表（type类型可以换前面的数字或形状）

有序列表：

通过<ol>和<li>标签来定义

无序列表：

通过<ul>和<li>标签来定义

<ul type="square">
	<li>周杰伦</li>
	<li>陈奕迅</li>
	<li>林俊杰</li>
</ul>
<ol type="I"> 
	<li>周杰伦</li>
	<li>陈奕迅</li>
	<li>林俊杰</li>
</ol>

?6.<div>

块级元素，默认占全部宽度有多少内容高度占多少，可以设置div的宽（width）高（height），e通过align设置内容对齐方式

<div style="width: 500px;height: 100px;" align="center">div</div>

?7.

行内元素(不会自动换行)，不能设置宽高。及你有多少内容就占多少内容

8.格式化标签?

1.

color 字体颜色?

size 字体尺寸

face 字体风格

<font color="green" size="7" face="楷体">你好</font>

2.<pre>

预格式化标签，保留空格和换行（&nbsp：空格）

<pre>
			Hello world!
</pre>

3.

加粗
倾斜
 下划线
<del> 中划线</del>
上标
下标

5.常用标签二?

1.a标签

超链接标签，用于链接到一个新的URL

属性

值

描述

href

（需要跳转的地址）（必须属性）

URL

连接所要跳转的位置，可能是其他或当前页面。

target（窗口打开的方式）

_blank  

空白窗口

_parent

重新打开一个窗口

_self

当前窗口

_top 
Framename作为锚点的a标签的name值

规定在何处打开链接文档。 
_blank :开启新页面显示页面; 
_self :当前页面显示跳转到页面，默认值。 
_top:用于有frameset布局的页面，想要覆盖整个页面显示。 
Framename:这里framename与上边的值不同，具体以为frame起了什么样的名字为准，该值指示要连接的页面跳转后将在相应名称的框架中显示。

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

<a href="#">回到顶部</a>
<h1 id="bt2">标题2</h1>
<a href="#bt2">标题2</a>

?2.图片

img元素向网页中嵌入一幅图像

常用属性:
src 需要引入的图片的地址(必须属性)

alt 当图片破损或不存在时，显示文本的内容

title 当鼠标悬停在图片上时显示的文本

width 宽度

height 高度

border 边框

3.表格

table 表格
<tr>? ? ?行
<td>? ? 标准单元格
<th>? ? 表头（字体居中、加粗效果）
?? ??? ??? ??? ?
table的属性：
width ? 表格的宽度
border ?边框
align ? 对齐
style="border-collapse: collapse;" ? 合并边框