Web学习002(html基础语法)

快捷键

迅速生成html模板

快捷键：！+Tab （注意：一定要在html文件中使用）

生成如下：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

加注释

ctrl+/

既可以单独使用，也可以对语句使用

     <!-- ctrl+/是注释，可以单独，可以选中 -->

加注释

快捷键生成后用AI生成注释

效果如下：

 <!-- 声明文档类型为 HTML5 -->
<!DOCTYPE html>
<!-- 定义 HTML 文档的开始，设置文档的语言为英语 -->
<html lang="en">
    <!-- 包含文档的元数据，如字符编码、视口设置和页面标题 -->
    <head>
        <!-- 设置文档的字符编码为 UTF-8 -->
        <meta charset="UTF-8">
        <!-- 设置视口属性，使页面在不同设备上正确显示 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 设置页面的标题，显示在浏览器的标签页上 -->
        <title>Document</title>
    </head>
    <!-- 包含在浏览器中显示的实际内容 -->
    <body>
        <!-- 定义一个一级标题，显示内容为“这是h1” -->
        <h1>这是h1</h1>
        <!-- 定义一个段落，显示内容为“这是p” -->
        <p>这是p</p>
    </body>
</html>

元素

<h1></h1>

     <h1>这是一个h1标签，1代表大小</h1>
    <h2>2比1小</h2>

<p></p>

 <p>这是一个段落</p>

<br/>

     <p>这是一个<br/>段落</p><!--空元素换行-->

<hr/>

     <hr/>
    <!-- 水平线（空元素） -->

<a></a>超链接

 <a href="https://www.baidu.com/?tn=68018901_16_pg" target="_blank"title="访问百度">这是一个链接</a>
    <!--这是一个使用了href属性的超链接-->
    <!-- 还使用了target属性，属性值为 _blank，_blank表示在另一个页面打开链接-->
     <!-- title属性 -->

CSS三种样式表

这篇博客讲的细致，

链接：https://blog.csdn.net/weixin_42235173/article/details/91040811

关于CSS外部样式表，我的这篇博客Web003,详细介绍

链接：https://www.cnblogs.com/cuteaddanina/p/18747233

内部样式表

行内样式表

外部样式表(最常用)

表格

比较多，其他文章讲的比较细致

文本格式化标签

粗体，斜体，下划线，div标签，span标签

最好的讲解，链接：https://blog.csdn.net/qq_45405176/article/details/106242012

posted on 2025-02-25 00:07 Adda...nina 阅读(3) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Web学习001

· 大二寒假学习7（vue学习模板语法之原始HTML<很高级的可以点进去跳转的那种>那种链接）

· html快捷键

· 编写HTML结构和CSS样式的一些快捷键

· IDEA 创建类注释模板和方法注释模板

阅读排行：
· 终于写完轮子一部分：tcp代理了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理

cuteaddanina

Web学习002(html基础语法)

内部样式表

行内样式表

外部样式表(最常用)

文本格式化标签

粗体，斜体，下划线，div标签，span标签

导航

统计

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>

	</body>
	</html>

	<!-- 声明文档类型为 HTML5 -->
	<!DOCTYPE html>
	<!-- 定义 HTML 文档的开始，设置文档的语言为英语 -->
	<html lang="en">
	<!-- 包含文档的元数据，如字符编码、视口设置和页面标题 -->
	<head>
	<!-- 设置文档的字符编码为 UTF-8 -->
	<meta charset="UTF-8">
	<!-- 设置视口属性，使页面在不同设备上正确显示 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- 设置页面的标题，显示在浏览器的标签页上 -->
	<title>Document</title>
	</head>
	<!-- 包含在浏览器中显示的实际内容 -->
	<body>
	<!-- 定义一个一级标题，显示内容为“这是h1” -->
	<h1>这是h1</h1>
	<!-- 定义一个段落，显示内容为“这是p” -->
	<p>这是p</p>
	</body>
	</html>

	<h1>这是一个h1标签，1代表大小</h1>
	<h2>2比1小</h2>

	<a href="https://www.baidu.com/?tn=68018901_16_pg" target="_blank"title="访问百度">这是一个链接</a>
	<!--这是一个使用了href属性的超链接-->
	<!-- 还使用了target属性，属性值为 _blank，_blank表示在另一个页面打开链接-->
	<!-- title属性 -->