HTML学习笔记

最新推荐文章于 2024-06-13 06:21:17 发布

_Yucen

最新推荐文章于 2024-06-13 06:21:17 发布

阅读量771

点赞数

文章标签： html web

本文链接：https://blog.csdn.net/qq_14997473/article/details/108263037

版权

HTML的概念

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

作用

将java在后台根据用户请求处理的请求结果在浏览器中显示给用户

使用

HTML标准文档规范和标签

互联网三大基石

URL 统一资源定位符（唯一定位一个网络资源）
HTTP 超文本传输协议（规范浏览器和服务器间数据交互格式）
HTML 超文本标记语言（有效组织数据在浏览器端的显示）

HTML文档声明

文件名.html 或文件名.htm

标准文档结构

<!--顶层标签-->
<html>
    <!--头标签-->
    <head>
        <!--主要是配置浏览器显示的配置信息-->
    </head>
    <!--主体标签-->
    <body>
        <!--显示给用户看的信息-->
    </body>
</html>

HTML标签语法

双标签：<标签名></标签名>

单标签：<标签名/>

Head标签

1、网页标题标签

<title>标题</title>

2、编码格式标签

<meta charset="utf-8"/>

3、网页搜索优化标签

<meta name="keywords" content="关键词1,关键词2,关键词3">
<meta name="description" content="这是网页描述……">
<meta name="author" content="作者yucen">

4、网页指定跳转标签

<meta http-equiv="refresh" content="5;url=http://baidu.com"/>

5、其他标签

Body标签

文本标签

1、标题标签

<h1>这是标题</h1> <!--h1~h6字体逐步减小-->
<h1 align="center">这是标题</h1>  <!--通过标签属性对标签功能进一步补充-->

2、水平线标签

<hr>
<hr width="2000px"> <!--px:像素单位 %:浏览器中百分比-->
<hr width="60%" size="20px" color="red">

3、段落标签

<p>
    <!--使用段落标签，段间距比较大-->
</p>

4、换行符

<br>
<!--源代码中的换行、空格等格式不影响显示-->

5、空格符

&nbsp

6、权重标签

<b>内容</b> <!--加黑加粗-->
<i>内容</i> <!--斜体-->
<u>内容</u> <!--下划线-->
<del>内容</del> <!--中划线-->

列表标签

1、无序列表

<ul>列表名</ul> <!--数据前有个· -->
    <li>第一行内容</li>
    <li>第二行内容</li>
    <li>第三行内容</li>

2、有序列表

<ol>列表名</ol>
    <li>第一行内容</li>
    <li>第二行内容</li>
    <li>第三行内容</li>
<ol type="A">列表名</ol> <!--行前缀连续，type可以有"1","A","a","I","i"默认="1"-->

3、自定义列表

<dt>列表名</dt> <!--每一行无前缀-->
    <dd>第一行内容</dd>
    <dd>第二行内容</dd>
    <dd>第三行内容</dd>

图片标签

<img src="1.jpg"> <!--本地资源路径，或者网络资源url-->
<img src="https://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=3107041919,588307722&fm=85&app=79&f=JPEG?w=121&h=75&s=76F73C72C8B47E82097D87C40200F026">
<img src="1.jpg" width="200px"> <!--单独设置width、height，锁定横纵比-->
<img src="1.jpg" width="200px" height="200px"> <!--改变图片大小，改变横纵比-->
<img src="1.jpg" title="图片标题" alt="图片说明"> <!--鼠标放在图片上显示标题title，加载失败显示说明alt-->

超链接标签

<a href="1.html">说明文字</a> <!--这里说明文字必须要有，作为访问方式，可以是文字也可是图片-->
<a href="1.html" target="_blank">说明文字</a> <!--"_blank"在新标签页打开,"_self"当前页,"_top"在顶端页面,"_parent"在父级页面-->

<a id="top"></a> <!--设置锚点，可用作超链接访问-->
<a href="#top"></a>

常见的其他标签小汇总

<div></div> <!--标签定义HTML文档中的一个分隔区块或一个区域部分，常用于组合块级元素，以便CSS格式化-->
<span></span> <!--对文档中的行内元素进行组合，配合应用样式可突出显示-->
<code></code> <!--短语标签，定义计算机代码文本，格式化显示-->
<pre></pre> <!--标签定义预格式化的文本，被包围在其中的文本会保留空格和换行符-->
<script type="text/JavaScript"></script> <!--在HTML中插入一段JS脚本-->

_Yucen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

HTML的概念HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。作用将java在后台根据用户请求处理的请求结果在浏览器中显示给用户使用HTML标准文档规范和标签互联网三大基石URL 统一资源定位符（唯一定位一个网络资源） HTTP 超文本传输协议（规范浏览器和服务器间数据交互格式） HTML 超文本标记语言（有效组织数据在浏览器端的显示）HTML文档声明文件名.htm
复制链接

扫一扫