琴泠 - Lumina Qin

浮生两起千斤梦怅思尤作归离恨

站点已运行

计算中...

-- : -- : --

博客总览

总文章 332 篇

总字数 72.9万

1118 字

6 分钟

--

html week 1 学习笔记整理

2024-02-24

学习

Html

/

Web开发

HTML5 基础学习笔记#

简介#

Html是一种计算机语言，主要用于网页的开发中，我们学习的是html5，简称H5。

后缀是：.html
Java语言的代码写在后缀是 .java 的文件中
CSS代码写在 .css 文件中
JavaScript简称 JS，JS的代码写在 .js 的文件中

作为前端程序员，最常用的两个浏览器是火狐浏览器和谷歌浏览器。

基本概念#

HTML 是超文本标记语言
标记也称为标签
文本：就是字符、数字等
超：指的是超链接，超链接就可以实现点击后跳转到一个新的页面

其实我们学习HTML技术，主要学习的就是里面的标签及标签拥有的属性。

基础规则#

在写代码的时候，要把输入法切换到英文状态。中文字符会出错
Shift 键可以切换中英文
HTML中的标签不区分大小写，但推荐小写

标签分类#

双标签#

标签是成对出现的，有开始标签和结束标签。比如：

1
<p>内容</p>

单标签#

标签是单个的，它自己既是开始又是结束。比如：

1
<br/>

斜杠可以省略：

1
<br>

标签嵌套#

标签是可以嵌套的，就是一个标签中可以套另一个标签。

比如：

1
<p><span>内容xxx</span></p>

推荐写法：

1
<p>
2
    <span>内容</span>
3
</p>

我们称 p 标签是 span 标签的父标签，span 标签是 p 标签的子标签。

可以按 Tab 键，对代码进行缩进。

属性#

标签中可以写属性
属性就是对标签的一个描述
属性有属性名和属性值，属性值需要用引号引起来（双引号、单引号都可以）
属性要写在开始标签中

1
<开始标签 属性="属性值" 属性="属性值">内容</结束标签>

一个标签中可以写多个属性，多个属性之间用空格隔开
属性与属性之间没有顺序要求

常用标签#

b 标签（加粗）#

1
<b>hhhh</b>

b 标签可以将文字加粗。

a 标签（超链接）#

点击后可以进行页面跳转。比如：

1
<a href="https://ys.mihoyo.com">
2
<img src="hhh.jpg" alt="美少女！">
3
</a>

注释#

注释就是对程序代码加以解释说明的，对于复杂的代码写注释是一个良好的编码习惯。

注释语法#

1
<!--这里写注释的内容-->

注释的内容是不会显示在浏览器页面的。

注意事项#

注释是不能嵌套的
如果需要注释的内容比较多也可以这样写比较简洁：

1
<!--
2
我是一个大傻逼！
3
-->

网页文档结构#

1
<!-- 告诉浏览器我们使用的是 html5这个版本 -->
2
<!doctype html>
3

4
<!-- html标签是根标签，所有的内容都要写在html标签中 -->
5
<html>
6
    <!-- head标签中的内容是为了让浏览器更好的解析我们的代码，head标签中的内容不会显示在浏览器页面中 -->
7
    <head>
8
        <!-- 告诉浏览器使用 utf-8 这个字符集解析我们的代码 -->
9
        <meta charset="utf-8"/>
10
        <!-- title标签是标题标签，会显示在标签页上 -->
11
        <title>我是标题</title>
12
    </head>
13

14
    <!-- body是主体标签，我们写的绝大多数内容都在这里面，写在body标签中的内容会显示在浏览器页面中 -->
15
    <body>
16
        <a href="https://www.vip.com">点我会跳转到唯品会</a>
17
    </body>
18
</html>