Document

第一章 HTML

2024-10-26
dfer
5
html 前端 CSDN

第一章 HTML

1. 前端和后端：

前端：呈现在用户面前的就是前端

前端技术：前端就是编写网页代码的技术。

Web应用中，运行在浏览器中的代码就是前端技术。

主要包括三种技术：

1） HTML：组织网页中的内容。

2） CSS：美化网页中的元素。

3） JavaScript：提供更加丰富的交互方式。

只有以上三种技术是可以运行在浏览器的。

基于以上三种技术的衍生技术：

1）前端库： jQuery是JS的封装库。

2）前端框架：React、Vue、Bootstrap、Layui、Layui-mini。

后端:

用户看不到的那就是后端

运行在服务器上的代码，就是后端技术。

比如：

JavaEE

PHP

C# .net

2.C/S和B/S架构：

C/S：

Client-Server

客户端+服务器：QQ、LOL

优势：效率高，安全性高

缺点：必须安装客户端，针对不同的平台开发客户端

B/S：

Browser-Server

浏览器+服务器：百度，淘宝，京东

优势：无须安装客户端，在浏览器中就可以直接访问，并且是跨平台的。

缺点：效率低，安全性低

3. Web应用访问过程：

在这里插入图片描述

4. HTML

Hyper Text Markup Language

超文本标记语言，它是用来编写网页一种基础语言。

组织网页中的内容 —人

超文本最核心的东西是：超链接。还有图片，视频，音频。

标记：HTML由各种标签（标记）组成的。

开发工具：

IDE
HBuilderX官网：https://www.dcloud.io/

HBuilder下载页面：https://www.dcloud.io/hbuilderx.html

下载解压后即可使用。

4.1 HTML的基本结构

<!-- DOCTYPE  document 文档  type 类型  html html5 -->
<!DOCTYPE html>

<!-- HTML的根标签： -->
<html>
	<!-- HTML的头，设置当前页面，进行一些通用性的配置 -->
	<head>
		<!-- 元， charset 字符集 使用 utf-8 -->
		<meta charset="utf-8" />
		<!-- 设置网页的标题，显示在浏览器的标题栏中 -->
		<title>HTML页面</title>
		<!-- JS或CSS的代码 -->
	</head>

	<!-- HTML的主体，在浏览器的主窗口中可以显示的内容 比如，文本，超链接，图片。。。-->
	<body>
		我的HTML页面
	</body>

<!-- HTML标签的结尾 -->
</html>
标签

注解的快捷方式：

Ctrl+/

4.2 HTML中的标签

在HTML中，所有的标签都以<标签名>方式存在。标签上还可以设置一些属性。

双标签：

<标签名属性=“值”>标签的内容</标签名>

单标签

<标签名属性=“值” />

例如：

在这里插入图片描述

双标签是可以包含内容的，单标签不行。

HTML双标签通常都可以嵌套的。外层的标签叫父标签，内层标签叫子标签。

id:为标签指定一个id值，在一个页面中id值是不能重复的
class：为标签指定一个class值，通常用于设置CSS样式
width：宽度单位：300px（像素） 50%（以父标签的宽度进行计算）
height：高度
border：边框
style:设置CSS样式的

4.3 常用标签

4.3.1 文本：



<!-- 文章标题标签 
h1~h6, 字体加粗，字号减小，每个标题独占一行（块级元素）
--> 
<h1>标题<span>一</span></h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h6>标题六</h6>




<!-- 段落标签, 表示文章的一个段落 独占一行
在HTML中连续的多个空白字符（空格，回车换行，Tab）最多只解析成一个空格
-->							
<p>常见的关系型数据库：MySQL： 开源免费的，Oracle公 司旗下。Oracle：商业数据库，大型的面向对象的关系型数据库。MS SQL Server：微软的数据库，收费，只能运行Windows平台上。SQLite：基于文件的微型的关系型数据库。Access：微软基于文件的微型数据库。</p>
<!-- hr 分隔线-->
<hr>
<p>常见的关系型数据库：
MySQL： 开源免费的，Oracle公司旗下。


<!-- br 换行-->
<br>
<br>
Oracle：商业数据库，大型的面向对象的关系型数据库。
MS SQL Server：微软的数据库，收费，只能运行Windows平台上。
SQLite：基于文件的微型的关系型数据库。
Access：微软基于文件的微型数据库。</p>

<b>加粗</b>
<strong>加粗</strong>

<i>斜体</i>
<em>斜体</em>

<!-- sub下角标 sup上角标-->
H<sub>2</sub>O
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
<span>没有任何效果，布局</span>

总结：

1）标题标签：h1~h6, 字体加粗，字号减小，每个标题独占一行（块级元素）
<h1>标题<span>一</span></h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h6>标题六</h6>


2）p,段落标签

3）br 换行标签

4）hr,分隔线

5）字体相关的：
b ,strong ，em ,i,sub,sup,span,font
<b>加粗</b>
<strong>加粗</strong>

<i>斜体</i>
<em>斜体</em>

<!-- sub下角标 sup上角标-->
H<sub>2</sub>O
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
<span>没有任何效果，布局</span>

4.3.2 图片：

img标签用于在页面中显示图片。

<img src="图片的地址" width="宽度" height="高度" title="文本提示"/>

img标签是一个单标签。

src：设置要显示的图片的地址。这个地址可以是相对路径，也可以是绝对路径。

width和height：用于设置图片在页面中的显示大小，可以使用像素设置，也可以使用百分比。

当使用像素值时，这时会根据实际像素进行显示。

当使用百分比时，这时会根据父元素的宽度来进行计算。

如果只设置了width和height中的一个，另一个也会进行等比例缩放。

如果同时设置了width和height，这里会按照设置宽度高度进行拉伸。

4.3.3 超链接：

超链接是HTML的灵魂。

超链接可以实现页面之间的跳转，从而将多个网页整合成一个网站。

<a href="点击时跳转地址" target="打开方式">超链接的内容</a>

超链接在点击前，点击后，鼠标按下时，会呈现不同的状态。

超链接可以嵌套其它标签，当存在多个超链接时，从左向右的顺序排列。

href：超链接跳转的地址，可以是相对路径，也可以是绝对路径。

target：设置超链接的打开方式。

target的取值：

1） _self：在当前页面中打开，默认值。

2） _blank：在新页面中打开超链接。

3） _parent：在父页面中打开超链接。

锚点：
在一个页面中，每一个标签都可以添加id属性。

id属性在一个页面中也不应该出现重复的值。

如果在a标签的href设置为#id值，这时a标签就变成了锚点的跳转。

比如：

在这里插入图片描述

4.4组合标签

由多个标签组合在一起，完成整个功能。

4.4.1 列表：

1.有序列表

<ol>  order list
   <li>第一项</li>    list item
   <li>第二项</li>
   <li>第三项</li>
</ol>

每一项前显示序号。

2.无序列表（最常用）：

无序列表在网页中是最常用的一种列表。例如：新闻列表，文章列表，菜单。

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

每一项前显示小圆点

展示效果如下：

在这里插入图片描述

3.自定义列表：

<dl>
    <dt></dt> <dd></dd>
    <dt></dt> <dd></dd>
</dl>

<dl>
    <dt></dt> <dd></dd>
    <dt></dt> <dd></dd>
</dl>

如下所示：
在这里插入图片描述
展示效果如下：

在这里插入图片描述

4.4.2 表格：

<table border="" cellspacing="" cellpadding="">
   <caption>表格的标题</caption>
   <thead>  头部
      <tr>  行
         <th>列头</th>
         <th>列头</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>单元格</td>
         <td>单元格</td>
      </tr>
      <tr>
         <td>单元格</td>
         <td>单元格</td>
      </tr>
   </tbody>
</table>

具体对应的效果：
在这里插入图片描述

caption，thead，tbody标签可以没有。

table标签的属性：

1） border：边框宽度，以像素为单位。

2） width：表格宽度。

3） cellspaceing：单元格之间的间距。

4） cellpadding：单元格边框与内容的间距。也就是内边距。

th、td标签的属性：

1） width：宽度。

2） rowspan：行合并。（并且可以设置 rowspan=‘’2‘’这样，代表一个格子占两行）

3） colspan：列合并。并且可以设置 colspan=‘’2‘’这样，代表一个格子占两列）

注意：可以单独设置某一行的具体宽度，也可以直接设置表格整体的宽度，如果不特意说明那么会自适应。

如下所示：
在这里插入图片描述

4.3.3 表单

表单为用户操作页面操作的元素。为用户在页面中输入数据提供丰富的方式。

<form action="表单数据的提交地址" method="请求方式" enctype="表单数据的传输方式">
表单元素
</form>

action：
表单在提交时，数据送的地址，这个地址通常是一个服务器的动态页面。地址可以是相对路径，也可以是绝对路径。

method：
表单的请求方式实际就是HTTP的请求方式，常用的有get、post等请求。默认情况下method的值是get。

4.3.4 表单元素

input：

表单中最常用的输入元素。

<input type="类型" name="名字参数名" value="值" />

1） type：通过设置不同的type得到不同的输入控件。

type的取值可以是：text、password、radio、checkbox、number、email、file、submit、reset、button、hidden等等。

2） name：input标签的名字，只有设置了name属性的表单元素，才会将它的值提交到action。

3） value：标签的值，对于某些input，value就是初始时的默认值；对于另外一些input，value就是它的对应值。

input的类型：

1） text

文本框，可以输入任意的文本字符，只能输入一行。

用户名：<input type="text" name="username" value="tom" placeholder="请输入用户名">

2） password

密码框，输入字符都显示为掩码状态即一个圆点。

密　码：<input type="password" name="pwd" value="123" placeholder="请输入密码">

3） radio

单选按钮，在一个表单中，name相同的radio会被当做一组，一组的radio最多只能有一个被选中。

单选按钮的默认值是on，通常使用value设置单选按钮所对应的值。

如果希望某一项选中，可设置checked属性。

性　别：
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女" checked>女

4） checkbox

复选框，是可以多选的，也可以选中，或不选中。

爱　好：
<input type="checkbox" name="hobby" value="吃饭">吃饭
<input type="checkbox" name="hobby" value="睡觉" checked>睡觉
<input type="checkbox" name="hobby" value="打豆豆" checked>打豆豆

5） number、email

只能输入允许的值，并且会进行检查。

身　高：<input type="number" name="height">米
邮　箱：<input type="email" name="email">

6） file

上传文件，可以选择本地的文件上传到服务器。

照　片：<input type="file" name="photo">

7） submit

提交表单的按钮，点击时会将当前表单中所有的有效表单元素的值获取并上传到action的地址。

<input type="submit" value="保存">

8） reset

重置按钮，点击时会将用户的输入全部清除，回到最初始的状态。

<input type="reset" value="重新填写">

9） button

普通按钮，不具有提交和重置的功能。

<input type="button" value="按钮">

10） hidden

隐藏域，在页面中不会显示，也不需要用户进行操作，表单提交给，传递用户不应该看到的数据。

<input type="hidden" name="id" value="12">

select
下拉列表框，从下拉列表中选择一个项。省，市，区地址。

<select name="名字">
    <option value="1">选项一</option>
    <option value="2">选项二</option>
</select>

例如

班　级：
<select name="clazz">
    <option value="1">220701Java</option>
    <option value="2">220702Java</option>
    <option value="3">220703Java</option>
    <option value="4">220704Java</option>
    <option value="5">220705Java</option>
    <option value="6">220701H5</option>
    <option value="7">220702H5</option>
</select>

textarea

多行文本域，可以输入多行文本，生成滚动条。

<textarea name="名字">文本内容</textarea>

textarea可以通过cols控制宽度，rows控制高度，这两个属性都是根据字符大小计算的。

button
相当于input的按钮，但它是一个双标签，可以嵌套其它的标签。

<button type="submit/reset/button">内容</button>

相对路径和绝对路径

url的相对路径和绝对路径

绝对路径

协议://主机名/ip:端口/具体路径

http://127.0.0.1:8848/demo0728/form.html

绝对路径一般用于跨站访问。

相对路径

1）以/开头的路径。

以当前的站点作为相对路径的根路径。

例如：

页面： http://127.0.0.1:8848/demo0728/url.html
相对路径：/index.html 
计算过程：http://127.0.0.1:8848/  +  index.html
最终访问路径：http://127.0.0.1:8848/index.html

2）直接以路径开头。

以当前页面所在的路径作为根路径。

页面：http://127.0.0.1:8848/demo0728/url.html
相对路径：index.html 或 ./index.html
计算过程：http://127.0.0.1:8848/demo0728/ + index.html

最终访问路径：

http://127.0.0.1:8848/demo0728/index.html

3）以…/开头的路径。

…/当前路径的上级路径。

页面：http://127.0.0.1:8848/demo0728/url.html
相对路径：…/index.html
计算过程：http://127.0.0.1:8848/demo0728/向上一级 + index.html
最终访问路径：http://127.0.0.1:8848/index.html
base
根路径的设置标签, 用于设置当前页面的相对路径的根路径。

页面：http://127.0.0.1:8848/demo0728/url.html

base：<base href="/root/page/">

相对路径：index.html
计算过程：
相对路径根路径 => http://127.0.0.1:8848/ + root/page/
index.html => http://127.0.0.1:8848/root/page/ + index.html
最终访问路径：http://127.0.0.1:8848/root/page/index.html

举例子：
在这里插入图片描述

显示效果如下：

在这里插入图片描述

上一篇：了解php和html

下一篇： Html，css，j