我要学前端 - -＞＞HTML基础总结（一）

科技2024-11-06 7

文章目录

HTML基本结构标题标签基础标签<p>修饰标签特殊标签符号列表标签无序列表有序列表描述列表图片标签超链接标签name属性 <a>标签其它用法

HTML基本结构

仅声明文档类型非标签标签：尖括号包围关键字标签通常成对出现(<开始标签></结束标签>)–>”双标签”标签但也有单独成现的(比如：<br>,<hr>,<meta>...)–>”单标签/自闭合标签”元素：<开始标签>内容</结束标签>

标题标签

例如：

<!DOCTYPE html> <html> <head> <title>html</title> </head> <body> <h1>我是h1</h1> <h2>我是h2</h2> <h3>我是h3</h3> <h4>我是h4</h4> <h5>我是h5</h5> <h6>我是h6</h6> </body> </html>

基础标签

<p>

<p></p>

标签注意:

1.一个<p></p>标签代表一个段落 2.在<p></p>标签内，加上<br/>仅换行，但还是一个段落 3.空格不起作用 代表空格 4.<pre></pre>标签会保留空格和换行符

语法：

例如：

<!DOCTYPE html> <html> <head> <title>html</title> </head> <body>  <p align="left">我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。</p>  <hr>  <palign="justify">我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。</p>  <hr>  <p align="right">我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。</p> </body> </html>

修饰标签

水平线：<hr/> 单标签修饰标签：文字斜体<i></i><em></em> 加粗<b></b><strong></strong> 下标<sub> 上标<sup> 下划线<ins> 删除线<del>

例如：

<!DOCTYPE html> <html> <head> <title>html</title> </head> <body> <p><i>文字斜体</i></p> <p><em>文字斜体</em></p> <p><b>加粗</b></p> <p><strong>加粗</strong></p> <p>下标<sub>下标</sub></p> <p>上标<sup>上标</sup></p> <p><ins>下划线</ins></p> <p><del>删除线</del></p> </body> </html>

特殊标签符号

很多时候直接使用标签符号会无法在网页中显示出来，但是如果想要在网页中显示出来标签符号的话（例如

），就需要使用特殊标签

<< >> ®已注册 ©版权 ™商标  空格

例如：

<!DOCTYPE html> <html> <head> <title>html</title> </head> <body> <p><p></p> <p>®已注册</p> <p>©商标</p> <p>1  1</p> </body> </html>

列表标签

无序列表

语法：

例如：

<!DOCTYPE html> <html> <head> <title>html</title> </head> <body> <ul> <li>无序标签1</li> <li type="disc">无序标签2</li> <li type="square">无序标签3</li> <li type="cirle">无序标签4</li> </ul> </body> </html>

有序列表

语法：

例如：

<!DOCTYPE html> <html> <head> <title>html</title> </head> <body> <ol> <li type="1">1</li> <li type="a">2</li> <li type="A">3</li> <li type="i">4</li> <li type="I">5</li> </ol> </body> </html>

描述列表

语法：

<dl> <dt>定义列表项</dt> <dd>列表描述项</dd> <dd>列表描述项</dd> <dt>定义列表项</dt> <dd>列表描述项</dd> <dd>列表描述项</dd> </dl>

例如：

<!DOCTYPE html> <html> <head> <title>html</title> </head> <body> <dl> <dt>列表项1</dt> <dd>描述1</dd> <dd>描述2</dd> <dt>列表项2</dt> <dd>描述1</dd> <dd>描述2</dd> </dl> </body> </html>

图片标签

语法：

例如：

<!DOCTYPE html> <html> <head> <title>html</title> </head> <body>  <img src="C:\Users\18125\Desktop\html\sucai1.jpg" alt="">   <img src="sucai1.jpg" alt="">  <img src="..\sucai1.jpg" alt="">  <img src="sucai1.jpg" alt="" width="10%" height="10%"> </body> </html>

图片标签注意:

1.src属性必写(绝对路径：从盘符路径开始；相对路径-建议使用)

2.height以及width属性取值为百分比时是相对于父级元素取

超链接标签

语法：

例如：

<!DOCTYPE html> <html> <head> <title>html</title> </head> <body>   <a href="hello.html">点我一下，站内跳转</a> <hr>   <a href="https://www.baidu.com/?tn=44004473_2_oem_dg">点我一下百度搜索</a> <hr>  <a href="hello.html" target="_self">点我一下，窗口不跳转</a> <hr>   <a href="hello.html" target="_blank">点我一下，窗口跳转</a> <hr>  <a href="hello.html" target="_self" title="hello.html">点我一下</a> </body> </html>

name属性

同页面语法： <a href="#锚名">目录1</a> <a href="#锚名">目录2</a> <a href="..." name="锚名1">内容</a> <a href="..." name="锚名">内容</a>

例如：

<!DOCTYPE html> <html> <head> <title>html</title> </head> <body>  <a href="#sucai1">女神</a> <hr> <a href="#sucai2">猫猫</a> <hr> <a href="" name="sucai1"> <img src="sucai1.jpg" alt=""></a> <hr> <a href="" name="cucai2"> <img src="sucai2.jpg" alt=""></a> </body> </html>

不同页面

语法：网页1：<a href="网页名称#锚点">... 网页2：<a name="锚点">...</a>

例如：网页1：

<!DOCTYPE html> <html> <head> <title>html</title> </head> <body>  <a href="hello.html#sucai1">点击跳转女神图片</a> </body> </html>

网页2：

<!DOCTYPE html> <html> <head> <title>站内链接</title> </head> <body> <a href="" name="sucai1"> <img src="sucai1.jpg" alt=""></a> </body> </html>

<a>标签其它用法

电子邮件链接：

文件下载：

Processed: 0.051, SQL: 8