HTML

Outline:

Basic Web Technologies
HTML Structure
HTML Tags
Block Elements vs Inline Elements
HTML Semantic Tags

1 Basic Web Techonologies

HTML - 页面结构
CSS - 页面的样式表现
JavaScript - 交互行为

1.1 HTML & CSS

1.2 HTML & CSS & JavaScript

Screenshot 2022-12-12 at 19.29.41

2 HTML Structure

What is HTML?

Hypertext Markup Langueage

Screenshot 2022-12-12 at 19.33.25

What is HTML structure?

最简单的HTML

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

3 HTML Tags

3. 1 The synatx

<tagname> content goes here... </tagname>

3.2 Tags(标签)

1. <!DOCTYPE> (声明)
2. <html>
3. <body>
4. <url>
5. <div>
6. <span>
7. <a>
8. <img>
9. <header>
10. <nav>
11. <section>
12. <aside>
13. <footer>

<!DOCTYPE> 声明

<!DOCTYPE> declaration is not an HTML tag
it is an instruction to the web browser about what version of HTML the page is written in and how to render the content
always add the <!DOCTYPE> declaration to your HTML documents.
html5的声明是<!DOCTYPE html> (for more info: https://developer.mozilla.org/en-US/docs/Glossary/Doctype)

<html>

<html> element represents the root (top-level element) of an HTML document
all other elements must be descendants of this element
<html> 是html的开始, </html> 是html的结束, 之间是html文档的<head> 和 <body>

<head>

provide general information (metadata) about the document, including its title and links to its scripts and style sheets.
after <html> tag
only 1 pair of <head> tag in a html document

<body>

represents the content of an HTML document
after <head> tag but on the same level
only 1 pair of <body> element in a document
contains:
标题标签 <h1>-<h6>
段落标签 <p>
注释标签 
水平线标签 <hr />
换行标签 <br />
文本节标签 <span>

一般在<p>里, 如果你想加入特殊样式在某行字体里有些是大, 有些是小则用这个
...

<ul> 标签-无序列表标签 : unordered list

represents an unordered list of items
typically rendered as a bulleted list
uses with <li>

list item

<ol> 标签 - 有序列表标签

represents an ordered list of items
An ordered list can be numerical or alphabetical.
uses with <li>

<li>

represent an item in a list
must be contained in a parent elment: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>).

<a> 超级链接标签

creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.
<a href="https://www.google.com">Google</a>
href attribute: contains a URL or a URL fragment that the hyperlink points to.
#: link to an element with a specified id within the page (like href="#top")
target attribute: _blank vs. _self

<img> 标签-图片标签

defines an image in an HTML page.
has two required attributes: src and alt:
has no end tag(self-closing tag).
for more info: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

<img>: The Image Embed element - HTML: HyperText Markup Language|MDN

4 Block Elements vs Inline Elements

<div> 标签

The generic container for flow content and does not inherently represent anything.
use it to group elements for purposes.

<span> 标签

a generic inline container for phrasing content.
does not inherently represent anything.
use it to group elements for purposes.

<div> vs <span>

find all block elements and inline elements after the class

5 HTML Semantic Tags

A semantic element clearly describes its meaning to both the browser and the developer.

examples of non-semantic elements: <div> and <span> - tells nothing about its content.
examples of **semantic ** elements: <form>, <table> and article - clearly defines its content.

Semantic elements

<header> 页眉:

represents a container for introductory content or a set of navigational links

<section>区块:

represents a standalone section of functionality contained within an HTML document, typically with a heading, which doesn't have a more specific semantic element to represent it.

<aside> 侧边栏:

represents a section of a document with content connected tangentially to the main content of the document (often presented as a sidebar).

<nav> 导航:

represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.

<footer> 页脚: defines a footer for a document or section which contains information about its containing element.

This is the final HTML of this lesson:

https://jsbin.com/muzizevobe/edit?html,output

What are the differences?

class, id attributes: css & JavaScript

<i>: The HTML<i> element represents a range of text that is set off from the normal text for some reason, for example, technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type.

fa: http://fontawesome.io/

Resources:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

https://jsbin.com/?html,output

Chrome Developer Tool

HTML面试资料整理

http://www.toptal.com/html5/interview-questions (HTML5)
http://blog.teamtreehouse.com/to-close-or-not-to-close-tags-in-html5

HTML页面

学习了XML语言，它是一种标记语言，我们需要以成对标签的格式进行填写，但是它是专用于保存数据，而不是展示数据，而HTML恰恰相反，它专用于展示数据，由于我们前面已经学习过XML语言了，HTML语言和XML很相似.

第一个HTML页面

我们前面知道，通过浏览器可以直接浏览XML文件，而浏览器一般是用于浏览HTML文件的，以HTML语言编写的内容，会被浏览器识别为一个页面，并根据我们编写的内容，将对应的组件添加到浏览器窗口中。

我们一般使用Chrome、Safari、Microsoft Edge等浏览器进行测试，IE浏览器已经彻底淘汰了！

比如我们可以创建一个Html文件来看看浏览器会如何识别，使用IDEA也能编写HTML页面，我们在IDEA中新建一个Web模块，进入之后我们发现，项目中没有任何内容，我们右键新建一个HTML文件，选择HTML5文件，并命名为index，创建后出现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

我们发现，它和XML基本长得一样，并且还自带了一些标签，那么现在我们通过浏览器来浏览这个HTML文件（这里推荐使用内置预览，不然还得来回切换窗口）

我们发现现在什么东西都没有，但是在浏览器的标签位置显示了网页的名称为Title，并且显示了一个IDEA的图标作为网页图标。

现在我们稍微进行一些修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lbw的直播间</title>
</head>
<body>
    现在全体起立
</body>
</html>

再次打开浏览器，我们发现页面中出现了我们输入的文本内容，并且标题也改为了我们自定义的标题。

我们可以在设置->工具->Web浏览器和预览中将重新加载页面规则改为变更时，这样我们使用内置浏览器或是外部浏览器，可以自动更新我们编写的内容。

我们还可以在页面中添加一个图片，随便将一张图片放到html文件的同级目录下，命名为image.xxx，其中xxx是后缀名称，不要修改，我们在body节点中添加以下内容：

<img width="300" src="image.xxx" alt="剑光如我，斩尽牛杂">
<!--  注意xxx替换成对应的后缀名称  -->

我们发现，我们的页面中居然能够显示我们添加的图片内容。因此，我们只需要编写对应的标签，浏览器就能够自动识别为对应的组件，并将其展示到我们的浏览器窗口中。

我们再来看看插入一个B站的视频，很简单，只需要到对应的视频下方，找到分享，我们看到有一个嵌入代码：

<iframe src="//player.bilibili.com/player.html?aid=333231998&bvid=BV1rA411g7q8&cid=346917516&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="800" height="500"> </iframe>

每一个页面都是通过这些标签来编写的，几乎所有的网站都是使用HTML编写页面。

Create index.html

Screenshot 2023-09-15 at 17.40.32

Want it show live, so need to change setting

Screenshot 2023-09-15 at 17.41.56

Screenshot 2023-09-15 at 17.42.27

Insert picture

Screenshot 2023-09-15 at 17.47.29

Screenshot 2023-09-15 at 17.47.52

<img width="300" src="img.png" alt="遇事不决量子力学">

<img>: This is the HTML tag used to embed images in web pages.

width="300": This attribute specifies the width of the image in pixels. In this case, the width of the image will be 300 pixels. If the original image width is different, the image will be scaled to this width in the rendered page.

src="img.png": This is the source attribute. It tells the browser where to find the image file. In this case, the image file is named "img.png" and is expected to be in the same directory/folder as the HTML file (or the current path of the web page). If the image was located somewhere else, such as an external website or a different directory, the path would be adjusted accordingly.

alt: The alt attribute stands for "alternative text". This text provides a description of the image and is primarily used for accessibility reasons. If the image cannot be displayed (for instance, due to network issues, if the image source is wrong, or if a user is using a screen reader), this text will be shown or read out instead.

Title change at web tab

Screenshot 2023-09-15 at 17.55.42

Screenshot 2023-09-15 at 17.56.10

Insert Video:

Screenshot 2023-09-15 at 18.00.44

Screenshot 2023-09-15 at 18.00.58

<iframe src="//player.bilibili.com/player.html?aid=848832470&bvid=BV1CL4y1i7qR&cid=446362456&p=60" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

<iframe>: The iframe (inline frame) element represents a nested browsing context, effectively embedding another web page into the current page.
src="//player.bilibili.com/player.html?aid=848832470&bvid=BV1CL4y1i7qR&cid=446362456&p=60": - This specifies the source URL of the document to display in the iframe. - The URL is protocol-relative, meaning it will use the same protocol (http or https) as the page it's embedded in. - Based on the URL, it appears to be an embedded video player from "bilibili.com", a popular video platform in China. The URL contains various parameters, likely pointing to a specific video or episode.
scrolling="no": This means that the iframe won't display scrollbars, even if its content overflows.
border="0": This is a deprecated attribute and doesn't have any effect on modern browsers. It was used in older HTML versions to define the border around frames.
frameborder="no": This attribute specifies whether to display a border around the iframe. Setting it to "no" means the iframe will not have a border.
framespacing="0": This is another deprecated attribute related to frames. It used to control the spacing between frames but is not applicable to modern web standards.
allowfullscreen="true": This attribute allows the embedded content (in this case, probably a video player) to be displayed in fullscreen mode when requested by the user.

HTML语法规范

一个HTML文件中一般分为两个部分：

头部：一般包含页面的标题、页面的图标、还有页面的一些设置，也可以在这里导入css、js等内容。
主体：整个页面所有需要显示的内容全部在主体编写。

<meta charset="UTF-8">
<title>lbw的直播间</title>

meta标签用于定义页面的一些元信息，这里使用它来定义了一个字符集（编码格式），一般是UTF-8.

title标签就是页面的标题，会显示在浏览器的上方

现在来给页面设置一个图标，图标一般可以在字节跳动的IconPark网站找到：https://iconpark.oceanengine.com/home，选择一个自己喜欢的图标下载即可。

将图标放入到项目目录中，并命名为icon.png，在HTML头部添加以下内容：

```html

`link`标签用于关联当前HTML页面与其他资源的关系，关系通过`rel`属性指定，这里使用的是icon表示这个文件是当前页面图标.

![Screenshot 2023-09-16 at 22.03.38](./HTML/Screenshot 2023-09-16 at 22.03.38.png)

![Screenshot 2023-09-16 at 22.03.55](./HTML/Screenshot 2023-09-16 at 22.03.55.png)

![Screenshot 2023-09-16 at 22.05.07](./HTML/Screenshot 2023-09-16 at 22.05.07.png)

再来看主体，我们可以在主体内部编写该页面要展示的所有内容，比如我们之前就用到了img标签来展示一个图片，其中每一个标签都称为一个元素：

```html
<img width="300" src="image.xxx" alt="当图片加载失败时，显示的文本">

发现，这个标签只存在一个，并没有成对出现，HTML中有些标签是单标签，也就是说只有这一个，还有一些标签是双标签，必须成对出现，HTML中，也不允许交叉嵌套，但是出现交叉嵌套时，浏览器并不会提示错误，而是仍旧尝试去解析这些内容，甚至会帮助我们进行一定程度的修复，比如：

<body>
    <iframe src="//player.bilibili.com/player.html?aid=333231998&bvid=BV1rA411g7q8&cid=346917516&page=1" width="800" height="500"
            scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</body>
</iframe>

很明显上面的代码已经出现交叉嵌套的情况了，但是依然能够在浏览器中正确地显示。

在主体中，我们一般使用div标签来分割页面：

<body>
    <div>我是第一块</div>
    <div>我是第二块</div>
</body>

通过使用div标签，我们将整个页面按行划分，而高度就是内部元素的高度，那么如果只希望按元素划分，也就是说元素占多大就划分多大的空间，那么我们就可以使用span标签来划分：

Screenshot 2023-09-16 at 22.57.29

<body>
    <div>
        <span>我是第一块第一个部分</span>
        <span>我是第一块第二个部分</span>
    </div>
    <div>我是第二块</div>
</body>

Screenshot 2023-09-16 at 23.00.21

我们也可以使用p段落标签，它一般用于文章分段：

<body>
    <p>
        你看这个彬彬啊，才喝几罐就醉了，真的太逊了。 这个彬彬就是逊呀！
        听你这么说，你很勇哦？ 开玩笑，我超勇的，超会喝的啦。
        超会喝，很勇嘛。身材不错哦，蛮结实的嘛。
    </p>
    <p>
        哎，杰哥，你干嘛啊。都几岁了，还那么害羞！我看你，完全是不懂哦！
        懂，懂什么啊？ 你想懂？我房里有一些好康的。
        好康，是新游戏哦！ 什么新游戏，比游戏还刺激！
    </p>
    <p>
        杰哥，这是什么啊？ 哎呦，你脸红啦！来，让我看看。
        不要啦！！ 让我看看嘛。 不要啦，杰哥，你干嘛啊！
        让我看看你法语正不正常啊！
    </p>
</body>

Screenshot 2023-09-16 at 23.03.42

Screenshot 2023-09-16 at 23.04.00

那么如果遇到特殊字符该怎么办呢？和XML一样，我们可以使用转义字符：

点击查看源网页

注意：多个连续的空格字符只能被识别为一个，如果需要连续多个必须使用转义字符，同时也不会识别换行，换行只会变成一个空格，需要换行必须使用br标签。

Screenshot 2023-09-16 at 23.19.53

Screenshot 2023-09-16 at 23.19.40

HTML常用标签

br 换行
hr 分割线

<body>
    <div>
        我是一段文字<br>我是第二段文字
    </div>
    <hr>
    <div>我是底部文字</div>
</body>

Screenshot 2023-09-16 at 23.25.29

标题一般用h1到h6表示

<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>我是正文内容，真不错。</p>
</body>

Screenshot 2023-09-16 at 23.27.08

现在我们来看看超链接，我们可以添加一个链接用于指向其他网站：

<a href="https://www.bilibili.com">点击访问小破站</a>

Screenshot 2023-09-16 at 23.28.51

我们也可以指定页面上的一个锚点进行滚动：

<body>
<a href="#test">跳转锚点</a>
<img src="image.jpeg" width="500">
<img src="image.jpeg" width="500">
<img src="image.jpeg" width="500">
<img src="image.jpeg" width="500">
<div id="test">我是锚点</div>
<img src="image.jpeg" width="500">
<img src="image.jpeg" width="500">
<img src="image.jpeg" width="500">
</body>

Screenshot 2023-09-16 at 23.41.32

每个元素都可以有一个id属性，我们只需要给元素添加一个id属性，就使用a标签可以跳转到一个指定锚点。

我们接着来看看列表元素，这是一个无需列表，其中每一个li表示一个列表项：

<ul>
    <li>一号选项</li>
    <li>二号选项</li>
    <li>三号选项</li>
    <li>四号选项</li>
    <li>五号选项</li>
</ul>

Screenshot 2023-09-16 at 23.44.02

也可以使用ol来显示一个有序列表：

<ol>
    <li>一号选项</li>
    <li>二号选项</li>
    <li>三号选项</li>
    <li>四号选项</li>
    <li>五号选项</li>
</ol>

Screenshot 2023-09-16 at 23.44.25

表格也是很重要的一种元素，但是它编写起来相对有一点麻烦：

<table>
    <thead>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年级</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>0001</td>
        <td>小明</td>
        <td>男</td>
        <td>2019</td>
    </tr>
    <tr>
        <td>0002</td>
        <td>小红</td>
        <td>女</td>
        <td>2020</td>
    </tr>
    </tbody>
</table>

Screenshot 2023-09-16 at 23.48.38

虽然这样生成了一个表格，但是这个表格并没有分割线，并且格式也不符合我们想要的样式，那么如何才能修改这些基础属性的样式呢，我们就需要聊聊CSS了。

HTML表单

表单就像其名字一样，用户在页面中填写了对应的内容，点击按钮就可以提交到后台，比如登陆界面，就可以使用表单来实现：

一个网页中最重要的当属输入框和按钮了，那么我们来看看如何创建一个输入框和按钮：

<label>
    我是输入框
    <input type="text">
</label>

Screenshot 2023-09-16 at 23.59.00

对于一个输入框，我们一般会将其包括在一个lable标签中，它和span效果一样，但是我们点击前面文字也能快速获取输入框焦点。

<body>
<div>登陆我们的网站</div>
<hr>
<div>
    <label>
        账号：
        <input type="text">
    </label>
</div>
<div>
    <label>
        密码：
        <input type="password">
    </label>
</div>
</body>

Screenshot 2023-09-17 at 00.01.18

输入框可以有很多类型, 来试试看password，现在输入内容就不会直接展示原文了。

创建一个按钮有以下几种方式，在学习JavaWeb时，我们更推荐第二种方式，我们后面进行登陆操作需要配合表单使用：

<button>登陆</button>
<input type="submit" value="登陆">
<input type="button" value="登陆">

Screenshot 2023-09-17 at 00.04.06

现在我们就可以写一个大致的登陆页面了：

<body>
    <h1>登陆我们的网站</h1>
    <form>
        <div>
            <label>
                账号：
                <input type="text" placeholder="Username...">
            </label>
        </div>
        <div>
            <label>
                密码：
                <input type="password" placeholder="Password...">
            </label>
        </div>
        <br>
        <a href="https://www.baidu.com">忘记密码</a>
        <br>
        <br>
        <div>
            <input type="submit" value="登陆">
        </div>
    </form>
</body>

Screenshot 2023-09-17 at 00.12.44

表单一般使用form标签将其囊括，但是现在我们还用不到表单提交，因此之后我们再来讲解表单的提交。

input只能实现单行文本，那么如何实现多行文本呢？

<label>
    这是我们的文本框<br>
    <textarea placeholder="文本内容..." cols="10" rows="10"></textarea>
</label>

Screenshot 2023-09-17 at 00.15.24

我们还可以指定默认的行数和列数，拖动左下角可以自定义文本框的大小。

我们还可以在页面中添加勾选框：

<label>
    <input type="checkbox">
    我同意本网站的隐私政策
</label>

Screenshot 2023-09-17 at 00.15.51

上面演示的是一个多选框，那么我们来看看单选框：

<label>
    <input type="radio" name="role">
    学生
</label>
<label>
    <input type="radio" name="role">
    教师
</label>

Screenshot 2023-09-17 at 00.17.22

这里需要使用name属性进行分组，同一个组内的选项只能选择一个。

我们也可以添加列表让用户进行选择，创建一个下拉列表：

<label>
    登陆身份：
    <select>
        <option>学生</option>
        <option>教师</option>
    </select>
</label>

Screenshot 2023-09-17 at 00.18.11

默认选取的是第一个选项，我们可以通过selected属性来决定默认使用的是哪个选项。

当然，HTML的元素远不止我们所提到的这些，有关更多HTML元素的内容，可以自行了解。