HTML基础

1.概述

Web系统：以网站形式呈现，通过浏览器访问，完成一定功能的系统。

前端：网页上为用户呈现的部分。

后端：与数据库进行交互，完成数据存取。

网站：互联网上用于展示特定内容的相关网页的集合。主页（首页）的文件名称为Index。网站的风格决定网站的主题

网页：网站中的一个页面，网页通过超链接的方式连接在一起的。

网页元素：站标（logo）、导航栏、广告横幅、文字超链接，表单。

浏览器：解析网页源代码，渲染网页。

结构：HTML。从语义的角度，描述页面结构

样式：CSS。从审美的角度，美化页面。

行为：JavaScript。从交互的角度，提升用户体验。

2. HTML基础

2.1 标签、元素

由尖括号包围，比如<title>
通常是成对出现的（也有一些单独出现）
标签可以嵌套（但不可以交叉），嵌套结构可以描述成一个树形结构
内外层标签要注意缩进。另外外层元素称为父元素，内层元素为兄弟元素

HTML DOM树（文档对象模型）

标签内除了标签名还可以有标签的属性，示例如下：

<img src="logo.jpg" alt="站标" />

标签及其内容（包括属性）组成元素

2.2 HTML文件结构

HTML文件后缀为.htm或.html

<!DOCTYPE html>
<!--表示当前文档符合HTML标准-->
<html lang="en">
<!--language属性是提供给搜索引擎的信息，指示搜索引擎当前的使用语言-->
    <meta charset="UTF-8">
    <!--meta:元数据，包含网页的基础信息（作者、修改信息）-->
    <!--charset：字符集编码方式-->
    <title>web前端开发课程首页</title>
    <!--这部分内容为标签页名-->
    <body>
        <p>课程内容</p>
    </body>
</html>

字符：文字、符号
字符集(charset)：字符的集合
编码：将字符和二进制码对应起来

ASCII：对数字、英文字母、符号进行了编码
GB2312：简体中文
Unicode：所有语言
UTF-8：所有语言，占用空间更小

乱码问题

源文件保存时的编码
源文件声明<meta charset="编码方式">

上述两点不一致，就会出现乱码问题

2.3 HTML基本标签

2.3.1 标题

h1···h6 例：<h1>标题内容</h1>

2.3.2 正文段落

< p > 注意：段落内文字忽略连续空格，也不会显示空行和自动换行

水平线<hr />

可以换行输出

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web前端开发</title>
</head>
<body>
    <h1>web前端开发</h1>
    <h2>HTML</h2>
    <p>超文本标记语言，用于构建网页结构</p>
    <hr />
    <h2>CSS</h2>
    <p>层叠样式表，用于构建网页布局、外观，美化界面。</p>
    <hr />
    <h2>JS</h2>
    <p>JavaScript，脚本语言，用于构建网页行为，与用户进行交互，使用户获得更好的体验。</p>
</body>
</html>

单独出现的标签，直接结束，可以用来换行

&nbsp;
<!--可以为文本添加空行-->
<pre>
标签可以定义格式化的文本
保留文本中的空格和换行
</pre>

span：组合行内元素，以便通过CSS样式来格式化

<style type="text/css">
span{
    color:blue;
    font-weight: bold;
}
</style>

实例：

<!DOCTYPE html>
<html land="ch">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <p>这是一个水平分割线</p>
        <hr />
        <p>这里可以换行输出</p>
        <p>web前端开发<br />北京林业大学</p>
        <p>这里可以输出&nbsp;&nbsp;多个空格</p>
        <p>这里是Pre展示</p>
        <pre>
            标签可以定义格式化的文本
            可以保留文本中的空格  和换行
        </pre>
    </body>
</html>

超链接（文字超链接，图片超链接，导航栏）

<a href="网址">文字或图片</a>
<!--链接到本站其他网页-->
<a href="news.html">新闻</a>
<!--链接到其他站点-->
<a href="http://www.baidu.com">百度</a>
<!--虚拟超链接,单击之后不会跳转到其他页面-->
<a href="#">版块</a>

注意：超链接不分段在一行内显示

超链接实例（两个文件需要存放在同一个site文件夹里面）

<!--index.html-->
<!dcotype html>
<head lang="ch">
<head>
    <meta charset="UTF-8">
    <title>web前端开发</title>
</head>
<body>
    <a href="http://www.w3c.org">w3c</a><br />
    <a href="http://www.w3school.com.cn">w3cshcool</a><br />
    <a href="vs.html">前端与后端</a>
    <h1>web前端开发</h1>
    <h5>web front-end development</h5>
    <hr />
    <h2>基本概念</h2>
    <p>自行百度</p>
    <h2>技术构成</h2>
    <p>HTML</p>
    <p>CSS</p>
    <p>JS</p>
    <hr />
    <h6>copyright</h6>
</body>
</head>
</html>

<!--vs.html-->
<!doctype html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>web技术</title>
</head>
<body>
    <a href="#">前端</a><br />
    <a href="#">后端</a>
</body>
</html>

2.3.3 图像

常见的图像格式
- JPG：有损压缩，色彩丰富；
- GIF：简单动画，背景透明；
- PNG：无损压缩，透明，交错，动画
说明：

透明：给图片指定一种颜色，使其不被显示而成为透明；

交错：在显示图片的过程中可以从概貌逐渐变化到全貌，也就是清晰度由小及大
插入图像

src属性：路径+文件名（基本名+后缀名）

al属性：图片的替换文本
```
<img src="w3school.gif" alt="w3c" />
```
绝对路径和相对路径

绝对路径：以根目录为基准。实际情况中，随着服务器的迁移，可能出现按照原先路径找不到图片的情况。
```
<img src="C:/site/logo.gif" />
```
相对路径：以该文本所在位置为基准，省略当前site基准点的位置。
```
<img src="logo.gif" />
```

示例：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My site</title>
</head> 
<body>
    <p><img src="images/google.gif" alt="谷歌logo"><a href="http://www.google.com">谷歌</a></p>
    <p><img src="images/Microsoft edge.gif" alt="微软logo"><a href="http://cn.bing.com">必应</a></p>
</body>
</html>

2.4 列表、表格与区域

2.4.1 区域

区域：页面上的一个板块或一些字符的简单组合，最重要的作用结合CSS进行部分的排版布局。

align：区域属性对齐

center：特征值，居中对齐

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李白诗词</title>
</head>
<body>
    <div id="container" align="center">
        <p>将进酒 | 送友人 | 静夜思</p>
    </div>
    <div id="content" align="center">
        <hr />

        <h1>将进酒</h1>
        <p>···</p>
        <p>天生我材必有用，千金散尽还复来。</p>
        <p>···</p>
        <hr />
    </div>
    <div id="exp" align="center">
        <p>李白，伟大诗人</p>
    </div>
</body>
</html>

2.4.2 列表

2.4.2.1 无序列表

应用：导航栏

标签：<ul></ul>

实例

<h1>web前端开发</h1>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

2.4.2.2 有序列表

标签：<ol></ol>

实例

<h1>web前端开发</h1>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

2.4.2.3 表格

标签：<table></table>

<tr></tr>表示行；<td></td>表示列；行包含列

border属性表示边框的粗细（整个表格有边框，单元格也有边框）

th>table header</th>表示表头，里面的内容加粗显示

<table border="1">
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
</table>

<table border="1">
    <tr> <th></th> <th>学生人数</th> <th>平均成绩</th> </tr>
    <tr> <th>一班</th> <td>30</td> <td>89</td> </tr>
    <tr> <th>二班</th> <td>35</td> <td>85</td> </tr>
    <tr> <th>三班</th> <td>32</td> <td>80</td> </tr>
</table>

2.4.3 角标

上角标：sup标签，成对出现

下角标：sub标签，成对出现

2.5 表单标签

表单元素：<form>

2.5.1 input标签

acion属性指示收集的用户信息的传送地址

文本框：type="text"，明文显示

密码框：type=“password"

单选框：type="radio"

复选框：type="checkbox"

默认选择：checked="checked"

按钮：

- 提交按钮：type="submit"
- 重置按钮：type="reset"

name指示具体的表单元素

2.5.2 select标签

select标签：复选框

2.5.3 textarea标签

textarea标签：文本域

2.5.4 示例

<!doctype html>
<html lang="en">
<head>
    <title>personel information set</title>
</head>
<body>
    <div id="personel information" align="center">
        <form aciton="#">
            your name:
            <input type="text" name="username">
            <br />
            your account:
            <input type="text" name="account">
            <br />
            the password:
            <input type="password" name="password">
            <br />
            your address:
            China <input type="radio" name="address" checked="checked">
            Foreign countries <input type="radio" name="address">
            <br />
            your hobbies:
            <br />
            Reading <input type="checkbox" name="hobby" checked="checked">
            Sports <input type="checkbox" name="hobby">
            Games <input type="checkbox" name="hobby">
            <br />
            personel profile:<br />
            <textarea cols="50" rows="10">Pleaze fill out the profile</textarea>
            <br />
            Service time:
            <select>
                <option>1 month</option>
                <option>3 months</option>
                <optiom>6 months</optiom>
                <option>1 year</option>
                <option>forever</option>
            </select>
            <br />
            <input type="submit" value="submit" />
            <input type="reset" value="reset" />
        </form>
    </div>
</body>
</html>

2.6 web语义化

2.6.1 概述

web语义化：让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。结构清晰，有利于团队的开发和维护，有利于搜索引擎理解，容易兼容不同的设备。

2.6.2 em strong标签

<p>
    <!--斜体显示，表示强烈的语气-->
    <em>强调</em>
    <br />
    <i>斜体，无语义</i>
    <!--加粗显示，表示更强烈的语气-->
    <strong>重点强调</strong>
    <br />
    <b>粗体，无语义</b>
</p>

2.6.3 dl dt dd 标签

自定义列表dl、列表项dt、描述dd

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>

ps：描述内容自动换行，且位于列表项的右下方

参考：web前端开发_中国大学Mooc

posted on 2022-06-26 20:54 Ser3n7ty 阅读(58) 评论(0) 收藏举报

刷新页面返回顶部

Ser3n7ty

HTML基础

HTML基础

1.概述

2. HTML基础

2.1 标签、元素

2.2 HTML文件结构

2.3 HTML基本标签

2.3.1 标题

2.3.2 正文段落

2.3.3 图像

2.4 列表、表格与区域

2.4.1 区域

2.4.2 列表

2.4.2.1 无序列表

2.4.2.2 有序列表

2.4.2.3 表格

2.4.3 角标

2.5 表单标签

2.5.1 input标签

2.5.2 select标签

2.5.3 textarea标签

2.5.4 示例

2.6 web语义化

2.6.1 概述

2.6.2 em strong标签

2.6.3 dl dt dd 标签

导航

公告