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

1.学习网址：

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

---

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

2.使用软件：

HBuilder X

官网地址： 

https://ask.dcloud.net.cn

下载：

HBuilderX-高效极客技巧

下载后，将压缩包复制到适当位置，解压压缩包，找到HBuilder X可执行程序，双击即可启动程序：

简单使用：

点击“文件”→“新建”→“html文件”，即可创建一个新的html文件

（详细操作：(10条消息) HBuilderX安装使用教程_cnds123的专栏-CSDN博客_hbuilderx安装教程）

---

3.常用标签：

（1）标题标签：

            h1~h6 大小依次递减，尽量减少使用h1标签

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

演示结果：

 （2）段落标签：

            p，会自动换行（与标题标签合称“块级元素”）

<p>这是第一段</p>
<p>这是第二段</p>

演示结果：

 （3）换行标签：

            br 单标签

Hellow<br/>
Word

演示结果：

（4）水平线：

           hr 单标签

               常用属性：

                   color  颜色

                   size   粗细

                   width 长度（百分比 或 px）

                    align 对齐方式

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

演示结果：

 （5）列表：

           有序列表

                  <ol><li><li></ol>

            无序列表

                  <ul><li><li></ul>

<ul>
	<li>王俊凯</li>
	<li>王源</li>
	<li>易烊千玺</li>
</ul>
<ol>
	<li>王俊凯</li>
	<li>王源</li>
	<li>易烊千玺</li>
</ol>

演示效果：

 （6）div标签：

            块级元素

             默认占全部的宽度，有多少内容高度占多少，

              可以设置div的宽（width）高（height）；

             通过align设置内容的对齐方式（左 中 右）；

<div style="width: 100px;height: 100px;">这是一个div</div>
1111

演示效果：（默认可以占据一整行）

  （7）span标签：

             行内元素（不会自动换行）

<span>111</span>---23

演示效果：

（8）格式化标签 ：

• font 标签：

               color ：字体颜色

                size ：字体尺寸

                face ：字体格式

<font size="5" color="red" face="楷体">你好</font>

演示效果：

• pre 标签：

              预格式化标签：保留空格和换行

<pre>
Hellow Word
/pre>

演示效果：

• b  加粗
• i    倾斜
• u   下划线
• del 中划线
• sup 上标
• sub 下标

• <p><b>以后</b>的<strong>你</strong>会<i>感谢</i>现在<u>努力</u>的<del>自己</del></p>
  H<sub>2</sub>O
  

  演示效果：

 （9）a标签：

•             超链接标签，用于连接到一个新的URL
•             常用属性：

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

百度<a href="https://www.baidu.com" target="_blank">百度</a>

演示效果：

                                    target：窗口打开的方式

                                            _self：当前窗口（默认值）

                                            _blank：在空白窗口

•                 作为锚点：

                                   a标签的name属性值： <a name="top"></a>

                                   其他的id属性值：<div id="top"></div>

                                    锚点的使用：<a href="#top"></a>

（10）图片：

                       img标签

                               向网页中嵌入一张图标

                        常用属性：

                                    src：需要引入的图片的地址（必须属性）

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

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

                                     width：图片的宽度

                                     border：图片边框

<img src="img/xxxxx.jpg"width="500"height="400" border="2" title="中国">

    演示效果：  

（11）表格：