HTML基础-基本标签

标题标签

HTML提供<hn>系统标签, 用于修饰标题.
包含: <h1>, <h2>,...,<h6>. 其中<h1>定义最大的标题,<h6>定义最小的标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo02-标题标签</title>
</head>
<body>
    <h1>我是h1修饰的一级标题</h1>
    <h2>我是h2修饰的二级标题</h2>
    <h3>我是h3修饰的三级标题</h3>
    <h4>我是h4修饰的四级标题</h4>
    <h5>我是h5修饰的五级标题</h5>
    <h6>我是h6修饰的六级标题</h6>
</body>
</html>

<!--

* 项目描述:  学习HTML标签 之 标题标签
* 作   者:  chain.xx.wdm
* 备   注:  
*   加了标题的文字会加粗,字号也会变大
*   一个标题独占一行
-->

段落标签

<p></p> p标签会自动在其前后创建一些空白.(是单词paragraph缩写, 意为段落)
标签语义: 可以把HTML文档分割为若干段落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo03-段落标签</title>
</head>
<body>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;田馥甄正式出道前曾参加中视《我猜我猜我猜猜猜》人不可貌相之无厘头美少女单元[3]，后又于2000年参加中视《电视大国民》之残酷舞台单元的歌唱比赛并获得一万元奖金.</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;不久之后，该节目制作单位再次询问田馥甄是否愿意再参加宇宙唱片（华研唱片前身）与节目《电视大国民》残酷舞台单元合办之《宇宙2000实力美少女争霸战》选秀比赛</p>
</body>
</html>

<!--

* 项目描述:  学习HTML标签 之 段落标签
* 作   者:  chain.xx.wdm
* 备   注:  
*   文本在一个段落中分根据浏览器窗口的大小自动换行
*   段落和段落之间保有空隙
*   &nbsp;表示空格. 手动在代码中加空格是不会在浏览器中生效的
-->

换行标签

在HTML中, 一个段落中的文字会从左到右依次排列, 直到浏览器窗口的右端, 然后才自动换行
如果希望某段文本强制换行显示, 就需要使用换行标签<br/>.(单词break的缩写,意为打断,换行).标签语义: 强制换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo03-段落标签</title>
</head>
<body>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;田馥甄正式出道前曾参加中视《我猜我猜我猜猜猜》人不可貌相之无厘头美少女单元[3]<br/>后又于2000年参加中视《电视大国民》之残酷舞台单元的歌唱比赛并获得一万元奖金.</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;不久之后，该节目制作单位再次询问田馥甄是否愿意再参加宇宙唱片（华研唱片前身）与节目《电视大国民》残酷舞台单元合办之《宇宙2000实力美少女争霸战》选秀比赛</p>
</body>
</html>

<!--

* 项目描述:  学习HTML标签 之 段落标签
* 作   者:  chain.xx.wdm
* 备   注:  
*   <br/>是个单标签
*   <br/>标签只是简单地开始新的一行.与段落标签<p></p>不一样, 段落标签会插入一些垂起码的间距
-->

字体标签

<font>标签使用color,size属性规定文本中字体的颜色, 大小

属性	值	描述
`color`	rgb(x,x,x) / colorname	规定文本的颜色
`size`	number	规定文本的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo04-字体标签</title>
</head>
<body>
    <font color="red">我的字体</font>
    <hr>

    <font color="green">Hebe</font>这名字有着“青春女神”的意义，在<font color="red">S.H.E</font>团体里代表着“自信”，代表颜色为绿色<br/>
    其后S.H.E成为华人地区具有<font size="5px">代表性、指标性、影响力、知名度、唱片销售量、演唱会票房</font>和销售(量)口碑的女子演唱团体之一。
</body>
</html>

<!--

* 项目描述:  学习HTML标签 之 字体标签
* 作   者:  chain.xx.wdm
* 备   注:  
-->

文本格式化标签

为文字设置粗体, 斜体,或下划线等效果, 使文字以特殊的方式显示

语义	标签
加粗	`<strong></strong>`
倾斜	`<em></em>`
删除线	`<del></del>`
下划线	`<ins></ins>`

图片标签

在HTML标签中, <img src="图片URL路径"/>标签用于定义HTML页面中的图像

属性	属性值	说明
`src`	URL路径	(必有属性)指定需要显示图片的URL(路径)
`alt`	文本	图片无法显示时的替代文本
`title`	文本	提示文本.鼠标放到图像上时提示的文字
`width`	像素	设置图像的宽度,单位是像素px
`height`	像素	设置图像的高度,单位是像素px
`border`	像素	设置图像的边框,单位是像素px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo06-图片标签</title>
</head>
<body>
    <img src="img/xix.jpg" width="200px" title="我希宝" border="5px" alt="看不到希宝了"/>
</body>
</html>

<!--
* 项目描述:  学习HTML标签 之 图片标签
* 作   者:  chain.xx.wdm
* 备   注:  
*       <img/>是个单标签
-->

列表标签

描述	标签	属性	属性取值
有序列表	`ol`	type	1 / A / a / I / i
无序列表	`ul`	type	circle空心圆 / square方块 / disc实心圆
列表项	`li`	type	与上面两个一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo07-列表标签</title>
</head>
<body>
    <ol type="a">        <!-- 有序列表 -->
        <li>选项一</li>
        <li>选项二</li>
        <li>选项三</li>
    </ol>

    <hr>

    <ul type="disc">    <!-- 无序列表 -->
        <li type="circle">希宝</li>
        <li>乌冬面</li>
        <li>毛毛</li>
    </ul>
</body>
</html>

<!--
* 项目描述:  学习HTML标签 之 列表标签
* 作   者:  chain.xx.wdm
* 备   注:  
*       
-->

超链接标签

HTML标签中, <a></a>标签用于定义超链接,作用是从一个页面链接到另一个页面

超链接标签语法

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

超链接标签属性

属性	描述
`href`	用于确定需要跳转到的的页面的路径
`target`	打开页面的方式

target: blank- 在新窗口中打开href确定的页面; self-使用href确定的页面替换当前的页面(默认方式)

超链接分类

分类	举例
外部链接	百度
内部链接	网站内部页面之间的相互链接.例如首页
空链接	如果当时没有确定链接的目标时,首页
下载链接	如果href里面的地址是一个文件或压缩包,会下载这个文件
网页元素链接	在网页中的各种网页元素,如文本,图像等都可以添加超链接
锚点链接	当我们点击链接时,可以快速定位到页面中的某个位置(

表格标签

HTML表格由<table>标签以及一个或多个<tr>,<th>或<td>标签组成

<table>
    <tr>
        <td>单元格内数据</td>
    </tr>
</table>

<table></table>: 用于定义表格的标签
<tr></tr>: 用于定义表格中的行,必须嵌套在<table></table>标签中
<td></td>: 用于定义表格中的单元格,必须嵌套在<tr></tr>标签中
td指表格数据(table data),即数据单元格的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo10-表格标签</title>
</head>
<body>
    <table border="2px" width="30%" bgcolor="yellow" cellspacing="2" align="center">
        <tr bgcolor="red">
            <th>姓名</th>
            <th>年龄</th>
            <th>地址</th>
        </tr>
        <tr align="center">
            <td>4</td>
            <td>5</td>
            <td rowspan="2">6</td>
        </tr>
        <tr>
            <td colspan="2" align="center">7</td>
            

        </tr>
    </table>

    <hr/>
    <table bgcolor="skyblue" border="2px" cellspacing="0" width="40%" height="200px" algin="center">
        <tr bgcolor="orange">
            <th>姓名</th>
            <th>年龄</th>
            <th>地址</th>
        </tr>
        <tr align="center">
            <td>乔峰</td>
            <td>30</td>
            <td>丐帮</td>
        </tr>
        <tr align="center">
            <td align="right">段誉</td>
            <td>25</td>
            <td>大理</td>
        </tr>
    </table>
</body>
</html>

<!--
* 项目描述:  学习HTML标签 之 表格标签
* 作   者:  chain.xx.wdm
* 备   注:  
-->

HTML基础-基本标签

标题标签

段落标签

段落标签

换行标签

字体标签

文本格式化标签

图片标签

列表标签

超链接标签

超链接标签语法

超链接标签属性

超链接分类

表格标签

chain_xx_wdm

引用和评论

[解决]ssh: connect to host xxx port 22: Network is unreachable

前端开发工具

Jerry和您聊聊Chrome开发者工具

面向企业级前端应用的开发框架 UI5 的发展简史介绍

html如何实现跳转到锚点

这些年

Thymeleaf的使用