《常用HTML笔记总结》

TT_技术中心

于 2024-09-30 16:59:22 发布

阅读量488

点赞数 14

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

本文链接：https://blog.csdn.net/qq_40421206/article/details/142603413

版权

一、HTML基本骨架

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个包含脚本标签的基本HTML页面。</p>
</body>
</html>

各部分详细解释：

<!DOCTYPE html>：这是文档类型声明，用于告知浏览器使用HTML5标准来解析页面。
<html>：这是根元素，包裹整个HTML文档，通常包括lang属性来指定语言，lang="zh"，表示文档主要使用中文，这样做有助于浏览器和屏幕阅读器正确处理文本。
<head>：包含文档的元数据。常见元素有：
- <title>：定义页面标题，显示在浏览器标签上。
- <meta>：提供关于文档的信息，如字符集（<meta charset="UTF-8">）和视口设置。
- <link>：用于链接外部资源，比如CSS样式表。
- <script>：用于引入JavaScript文件。
<body>：包含页面的可视内容，如文本、图片、链接、表单等。

二、常用标签

1、标题标签：h1 - h6 <h1></h1>

2、段落标签：p <p></p>

3、水平线标签：<hr />

4、换行标签：<br />

5、盒子标签：<div></div> <span></span>

6、图像标签：<img src="路径" title="提示" alt="这是一张图" border="10" />

7、链接标签：<a href="地址" target="">链接</a>

target="_blank" 链接在新窗口打开
target="_self" 链接在当前窗口打开

8、base标签：批量设置所有链接在新窗口打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <base target="_blank" />
</head>
<body>
    <a href="www.baidu.com">百度</a>
    <a href="www.sinlag.com">新浪</a>
    <a href="www.souhu.com">搜狐</a>
</body>
</html>

9、锚点定位：适用于较长的页面，通过点击关键词迅速到达页面中的指定位置

使用<a href="#id名">链接文本</a>创建链接文本
使用id名标注跳转的目标位置

<div class="container">
   <h3>热搜榜</h3>
   <ul>
       <li><a href="#ding">斯诺克界的传奇人物</a></li>
       <li><a href="#zheng">中式台球榜一郑宇伯</a></li>
       <li><a href="#tang">中式台球榜二唐春晓</a></li>
       <li><a href="#wang">中式台球界的天才少年</a></li>
   </ul>
</div>
<div class="left-news">
   <h2 id="ding">斯诺克界的传奇人物</h2>
   <p>丁俊晖，被英国媒体称做“东方之星”。 </p>
</div>
<div class="left-news">
   <h2 id="zheng">中式台球榜一</h2>
   &l