初识html---常用标签

最新推荐文章于 2024-06-14 08:20:46 发布

泸州月

最新推荐文章于 2024-06-14 08:20:46 发布

阅读量277

点赞数 2

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

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_17119267/article/details/79630311

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML

什么是HTML

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML 标签(元素)

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如  和 
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。
浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容.

注意：有时候我们也会把标签说成元素，比如p 标签说成p元素，其实说的就是同一个东西，指示说法不同而已。

`HTML`的模板

<!DOCTYPE html>                     <!--文档类型-->
<html lang="en">                    <!--根标签-->
<head>                              <!--网页的头部-->
    <meta charset="UTF-8" />        <!--国际编码 UTF-8-->
    <title>初识HTML</title>         <!--网页标题-->
</head>
<body>                               <!--可视化区域  网页的主体-->
  
</body>
</html>a

`HTML`标签

`H`标题标签

h1~h6
标题标签文字大小、粗细程度、单独占一行
一个页面通常只出现一个h1标签有利于搜索引擎搜索
每个页面出现哪些标签，根据自己的需求

`p`段落标签

独占一行
前后元素自动换行

粗体标签

/

斜体标签

/

特殊符号

代码	符号
`<`	`<` 小于号
`>`	`>` 大于号
` `	空格
`&emsp;`	空白位
`©`	版权符
`&`	`&`符号

换行

 换行符
<hr/>水平线

`a`标签（超链接标签）

<a href="#">#</a> 刷新当前页面

<a href="javascript: void(0);">死链接</a> 死链接，不会跳转

<a href="#name">锚点</a>

<a href="http://baidu.com">跳转到百度</a> 跳转到百度  需要注意的是 http 不能少

`HTML`的书写规范

HTML命名规范
- 名字用小写字母
- 以英文开头，可以包含（英文字母 _ - 数字），不能使用中文
- 见名知意
- 驼峰命名，第二个单词大写，例如：className(js中使用)
命名的2种方式
- id 只能有一个名字，且在页面中相同的名字只能出现一次，相当于身份证号码一样
- class相同的名字可以出现N次，并且可以有多个名字，相当于人名字一样

图片标签

语法：<img src="图片地址"/>

图片要素

src定义图片路径
alt图片描述，用于seo给搜索引擎抓取
width规定宽度不给值默认图片多宽就多宽
height规定图片高度不给值默认图片多高就多高
width height 只给一个值的时候，会等比例缩放

列表

无序列表

<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
</ul>  
无序列表就是所有的列表项没有先后顺序之分  默认小黑圆点（disc）
可以通过改变type 值来改变前面的小黑圆点(disc) 空心圆(circle) 小方框(square)

有序列表

<ol>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
</ol>
有序列表就是有先后顺序之分 默认是1 2 3
可以通过改变type 值来改变 A 大写字母排序 a小写字母排序 I大写罗马字母排序 i小写罗马字母排序。
H5新增的两个属性：
	reversed 降序排序
	start 有序列表的其实值

定义列表

<dl>
    <dt>列表标题</dt>	
    <dd>列表项目1</dd>
    <dd>列表项目2</dd>
    <dd>列表项目3</dd>
</dl>

`div` 和`span`标签

#####div是块级标签，可以包含任何块和行内元素，不会和其他元素同占一行

display:bock默认宽度100%，支持设置宽高，支持所有css命令

`span` 是内联（行内）标签，可以和其他行内元素位于同一行

display:inline 默认内容撑开宽度，不支持设置宽高

display:inline-block块级可以横排展示，行内支持设置宽高

display:none隐藏元素

代码练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>我是h1标签</h1>
    <!--一个页面通常只出现一个h1标签有利于搜索引擎搜索-->
    <h2 id="box">我是h2标签</h2>
    <h3>我是h3标签</h3>
    <h4>我是h4标签</h4>
    <h5>我是h5标签</h5>
    <h6>我是h6标签</h6>
    <h7>我是h7标签</h7>
    我是在外面的
    <h2>p段落标签</h2>
    <p class="li">
        &emsp;&emsp;万维网上的一个 超媒体文档称之为一个 页面（ 外语：page）。作为一个组织或者个人在 万维网上放置开始点的 页面称为 主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的 指针（ 超级链接），所谓 超级链接，就是一种 统一资源定位器（Uniform Resource Locator， 外语 缩写： URL）指针，通过激活（点击）它，可使 浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列 页面的有机集合称为 网站（ Website或Site）。超级文本标记语言（英文缩写：HTML）是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言。
    </p>
    <p class="li2">
        &emsp;&emsp;网页的本质就是超级文本标记语言，通过结合使用其他的 Web技术（如： 脚本语言、 公共网关接口、 组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（ Web）编程的基础，也就是说 万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记 语言，是因为文本中包含了所谓“ 超级链接”点。 [1]
    </p>
    <h2>粗体标签</h2>
    我是在外面的<hr/>
    <!--hr水平线标签-->
    <b>我是b加粗标签</b><hr/><!--只是物理加粗-->
    <strong>我是strong加粗标签</strong><hr/><!--不仅能加粗，还有利于搜索引擎搜索-->
    <h2>斜体标签</h2>
    <br>
    <!--br 换行标签-->
    我是在外面的<br/><br/>
    <em>我是em斜体标签</em><br/><br/><!--强调斜体，利于搜索引擎搜索-->
    <i>我是i斜体标签</i><br/><br/><!--斜体作用-->
    <strong><em>啦啦啦</em></strong>
    <img src="../第一节课html/images/a.png" alt="出错啦"> <br>
    <h2>特殊符号</h2>
    <p>
        小于号：             -- &lt;<br/>
        大于号：             -- &gt;<br/>
        空格符号：           -- lala&nbsp;haha<br/>
        空白位：             -- lala&emsp;haha<br/>
        &字符：              -- &amp;<br/>
        版权符号：           -- &copy;<br/>
    </p>

    <h2>a标签</h2>
    <a href="http://www.baidu.com" target="_blank">去百度</a><!--链接  跳转到百度-->
    <a href="#">#</a><!--刷新当前页面-->
    <a href="javascript:void(0);">死链接</a><!--死链接，不会跳-->
    <a href="#li">锚点</a>
    <!--
          只有拥有name属性的a标签才有锚点
          其他标签可以通过id属性实现锚点
          target属性
              _self 当前页面打开  默认
              _blank 在新窗口打开
          -->

    <!--
</body>
</html>

泸州月

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
初识html---常用标签

HTML什么是HTMLHTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 标签(元素)HTML 标记标签通常被称为 H...
复制链接

扫一扫