Hello WEB ！ HTML来咯（一）--标签

最新推荐文章于 2024-07-25 11:26:35 发布

Padaz

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量92

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/weixin_45160152/article/details/119349653

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

网盘资料链接：https://pan.baidu.com/s/1qFRLUOS-d3Ns3_avzXRrhw
提取码：echo

什么是标签
1.超文本标记语言 HTML标签
2.又尖括号包括的内容（不区分大小写推荐小写）
3. 标签可以嵌套，但是不能交叉嵌套 ***

标签的基本语法
开始标签内容结束标签
<h1> 床前明月光 </h1>

标签可以嵌套，但是不能交叉嵌套（从左到右按顺序运行）
嵌套：【正确的】 <a><b><b><a>
交叉：【错误的】 <a><b><a><b>
<a><img></img>

双标签：
<h1><h2>......\<p>(段落标签)

自闭合标签：
<br>或者<br/> 都可以
<hr/>(文本线)
<img> （图片标签）

属性：
<标签名属性1=“属性值1” 属性2=“属性值2”....> 内容 </标签名>
属性是以键值对的形式出现
属性值，始终包括在引号里面，双引号比较常用

标签的详解：
1.块元素：当块元素显示的时候，通常会以新行开始
eg.<h1><h2>.....、<p>
独占一行，排斥其他元素跟其位于同一行
块元素的内部可以容纳块元素和内联元素

2.内联元素：当内联元素显示的时候，通常不会以新行开始
eg. <a><img>...
可以与其他内联元素位于同一行
内联元素内部可以容纳内联，但是不可以容纳块元素（<a>超链接除外）

块元素：
1.标题标签：<h1><h2>...(标题只有1~6，会有自动换行)
2.段落标签：<p> (用于定义一个段落，会另起一行，
浏览器辉自动在段落的前后添加空行，
段落行数是要参照浏览器的窗口大小自动换行)
3.文本线：<hr>
4.换行：<br>
5*.列表标签：
①有序：<ol> 【<ol>&<li>】
②无序：<ul> 【<ul>&<li>】
③自定义：<dl> 【<dl>&<dt>&<dd>】
④列表项：<li>

有序列表ol：
标签属性:
type默认数字列表:A,a，I,i
start:列表项的序列号从几开始
总结:
<ol>标签里面只能放<li>，不能放其他的标签
<1i>标签里面能使用其余标签

无序列表ul：
标签属性:
type: disc实心圆圈，type:circle空心圆圈，type : square实心方块
总结:
<ul>标签里面只能放<li>，不能放其他的标签
<li>标签里面能使用其余标签
默认嵌套列表，使用实心圆圈，空心圆圈，实心方块的顺序规则。

div标签：
分割分区

粗体/斜体标签：
描述标签用于xtml

粗体 <b></b>、 <strong></ strong>
斜体 <i></i>、 <em></em>
删除线 <s></s> <del></del>
下划线 <u</u> <ins></ins>
上标字 <sup></sup>
下标字 <sub></sub>
*预格式文本 <pre></pre>

超链接:<a></a>
href:跳转目标的地址
href="#" 没有链接目标，代表空链接
target: 目标弹窗方式
_self:默认。当前直接跳转
_blank:在新窗口打开

<span>重点，跨度，跨距
内联元素，作为文本的容器

特殊符号"："以&开头 ";"结尾（了解）
特殊符号:
描述字符实体
(空格）  
(空格【一个字节】) &emsp
<(小于号) <
(大于号） >
&（和） &
’’(引号） "
c（版权） &copy ;
×（乘） ×
÷（除） ÷

<!DOCTYPE html>

<html lang="en">    <!--语言=english-->

<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>  <!--网页的标题-->
    <!--样式（style）-->
    <style>
        h1{color: aqua}
        h2{color: blue}
        div{border: 1px solid rebeccapurple}
        span{color: aqua;font-size: 5px}
    </style>
</head>
<body>


<a url="www.baidu.com"><img src="微信图片_20200618170429.jpg"></a>


<!--正常平行关系-->
<h1>窗前明月光</h1>
<h2>疑是地上霜</h2>

<!--嵌套关系-->
<h1>嵌套→<h2>嵌套的内容</h2>←嵌套</h1>

<!--交叉关系-->
<h1>交叉1<h2>交叉2</h1>交叉3</h2>

<!--插入图片-->
<img src="http://pic1.16xx8.com/allimg/1shd33/16xx898907x0.png" width="200px" height="200px">

<!--属性-->
<p style="color: brown;font-size: 25px">段落标签</p>

<!--输入框-->
<input type="text" style="color: blue" value="这是文本框">

<!--有序列表order list type换样式；start开始值（数字）-->
<ol start="1">这是有序列表
    <li>列表项1(文字)</li>
    <li>列表项2(图片)<img src="C:\\Users\\Radish\\Pictures\\Camera Roll\\微信图片_20200618170429.jpg" width="50px" height="50px"></li>
    <li>列表项3(无序列表)
        <ul>
            <li>无序1</li>
            <li>无序2</li>
            <li>无序3</li>
        </ul>
    </li>
</ol>

<!--无序列表unorder list type:disc/circle/square-->
<ul type="disc">这是无序列表
    <li>列表项1
        <ul>
            <li>无序1</li>
            <li>无序2</li>
        </ul>
    </li>
    <li>列表项2</li>
</ul>

<!--自定义列表-->
<dl>这是自定义列表
    <dt>列表项</dt>
    <dd>列表项解释1</dd>
    <dd>列表项解释2</dd>

    <dt>笔记本电脑</dt>
    <dd>体积小</dd>
    <dd>便携</dd>
</dl>

<!--div标签-->
<div style="color: brown" align="center" >
    <pre>
          静夜诗
        床前明月光
        疑是地上霜
        举头望明月
        低头思故乡
    </pre>
</div>

<!--图片标签-->
<img src="C:\\Users\\Radish\\Pictures\\Camera Roll\\微信图片_20200618170429.jpg"
     alt="图片不显示的文字" title="鼠标悬停" border="30">

<!--粗体斜体标签-->

<!--超链接-->
<a href="https://www.baidu.com" target="_blank">百度超链接（_blank 弹新窗口）
<img src="http://pic1.16xx8.com/allimg/1shd33/16xx898907x0.png">
</a>

<!--跨度标签-->
<p>无关紧要<span>重点内容</span></p>

<!--特殊标记-->
用户名：<input type="text"><br>\
密&emsp;码:<input type="text">



</body>
</html>

Padaz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Hello WEB ！ HTML来咯（一）--标签

HTML 超文本标记语言什么是标签1.超文本标记语言 HTML标签2.又尖括号包括的内容（不区分大小写推荐小写）3. 标签可以嵌套，但是不能交叉嵌套 ***标签的基本语法开始标签内容结束标签<h1> 床前明月光 </h1>标签可以嵌套，但是不能交叉嵌套（从左到右按顺序运行）嵌套：【正确的】 <a><b><b><a>...
复制链接

扫一扫