HTML简单学习（二）-常用标签

最新推荐文章于 2024-03-06 11:56:36 发布

zhang___gang

最新推荐文章于 2024-03-06 11:56:36 发布

阅读量148

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/zhang___gang/article/details/84852261

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

常用标签

常用块级标签（内容独占一行，会自动换行）：
1. h1~h6：标题，一到六级
2. p：段落
3. hr：水平线（如果标签没有内容，可以快速结束）
4. 列表
  1. ul，li：无序列表
  2. ol，li：有序列表
  3. li：列表项
  4. 定义描述列表：
    1. dl：定义列表
    2. dt：描述标题
    3. dd：具体描述
5. div：可以理解为没有具体含义的块级元素，页面布局经常用到，div+css
常用行级标签（按行逐一显示，前后不会自动换行，一行没有摆满，接着摆，一行满了再换行）：
1. a：超链接
 1. href属性：
 1. 资源地址，可以外部资源也可以是本网站资源
 外部资源：URL
 内部资源：
 可以直接从项目路径开始写
 相对路径，相对于当前页面（同级直接访问）（若写的正确，按Ctrl可以跳转过去）
 ../：切换到上一级路径
 ./：当前页面所在的路径，默认就是，可以不写
 和当前页面在同一个路径下，可以直接往下写，不同路径下需要切换
 如
 假设html01项目结构如下：
 dir1：
 first_page.html
 second_page.html
 dir3:
 third_page.html
 dir2:
 tt.html
 在first_page.html中访问second_page.html
 直接访问：second_page.html
 在first_page.html中访问third_page.html
 dir3/third_page.html
 在first_page.html中访问tt.html
 ../dir2/tt.html
 在third_page.html中访问tt.html
 ../../dir2/tt.html
 2. target属性（常用_self和_blank）：
 1. _self：当前页面(默认）
 2. _blank：新建一个标签页
 3. _top：顶层框架
 4. _parent：父框架
2. img：图片标签
 1. src：图片的路径（与超链接路径一样）
 2. alt：提示文字，如果图片无法显示，则用文字替代（建议加上）
 3. 可以使用width和height调整高度和宽度
3. span：没有具体语义的行级标签
 1. 意义：方便CSS修饰样式
4. br：换行
5. 文本格式元素（了解）
 1. ：定义粗体文本
 2. ：定义斜体文本
 3. ：定义强调文本，实际效果与斜体文本差不多
 4. ：定义粗体文本，与的作用基本相同
 5. ：定义小号文本
 6. ：定义下标文本
 7. ：定义上标文本
 8. <bdo>：定义文本显示方向，内有dir属性，只能取值ltr或rtl

上述标签示例为：

first_page.html

<!DOCTYPE html>
<html lang="en">  <!-- lang设置语言，可以不设置 -->
<head>
    <meta charset="UTF-8">   <!--charset设置编码格式-->
    <title>第一个页面</title>
</head>
<body>
    正文部分
    不会换行
    <!--常用块级标签-->
    <h1>一级标题</h1>  <!--块级标签自动换行-->
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <p>这是段落</p>
    <p>春天，终究还是来了，比我想象中的还要早，节令立春刚过，气温骤然回升，而后便是一场绵绵的细雨。
    这如梦般的雨彻底的打破了冬天的宁静，闲暇的人们，不约而同的忙碌了起来。 春天，和风细雨、万物复苏。</p>
    <hr/>  <!--水平线，如果标签没有内容，可以快速结束-->
    <h3>喜欢的水果</h3>
    <ul>   <!-- 无序列表展示-->
        <li>苹果</li>
        <li>桃子</li>
        <li>橘子</li>
    </ul>
    <hr/>   <!-- 有序列表展示-->
    <h3>完成一个Java程序的步骤</h3>
    <ol>
        <li>编写源程序</li>
        <li>编译</li>
        <li>运行</li>
    </ol>
    <hr/>
    <h3>喜欢的水果</h3>
    <dl>     <!-- 描述列表展示-->
        <dt>桃子</dt>
        <dd>甜的</dd>
        <dd>很便宜</dd>
        <dt>苹果</dt>
        <dd>甜的</dd>
        <dd>稍微有点贵</dd>
    </dl>
    <!-- div -->
    <div>块级元素</div>
    <div>块级元素</div>
    <hr/>

    <br/><br/><br/>
    <!--常用的行级标签-->
    <a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a> <!--超链接-->
    <!--不加http:协议，只写域名可能找不到
    属性：href：资源地址，可以访问外网外部资源，也可以是本网站资源-->
    <a href="second_page.html" target="_blank">第二个页面</a>
    <hr/>
    <!--图片-->
    <img src="imgs/卫庄&赤练.jpg" alt="卫庄&赤练" width="683" height="384"><br/><!--br换行-->
    <!--使用图片作为超链接-->
    <hr/>
    <a href="second_page.html" target="_blank"><img src="imgs/卫庄&赤练.jpg" alt="卫庄&赤练" width="342" height="192"></a>
    <br/>
    <!--文本元素和特殊符号展示，strong表示强调，&nbsp;表示空格-->
    今天是星期一，星期一&nbsp;&nbsp;&nbsp;<strong>很累</strong>
</body>
</html>

second_page.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二个页面</title>
</head>
<body>
    这是第二个页面
</body>
</html>

常用的特殊符号

空格
大于（>）	>
小于（<）	<
引号（“）	"
版权号	©

zhang___gang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML简单学习（二）-常用标签

常用标签常用块级标签（内容独占一行，会自动换行）： h1~h6：标题，一到六级 p：段落 hr：水平线（如果标签没有内容，可以快速结束）列表 ul，li：无序列表 ol，li：有序列表 li：列表项定义描述列表： dl：定义列表 dt：描述标题 dd：具体描述 div：可以理解为没有具体含义的块级元素，页面布局经常...
复制链接

扫一扫