JavaWeb-HTML

念旁白

已于 2023-08-04 08:52:21 修改

阅读量159

点赞数 1

分类专栏： JavaWeb 文章标签： html

于 2023-07-31 11:08:34 首次发布

本文链接：https://blog.csdn.net/weixin_49856572/article/details/132014948

版权

JavaWeb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、web开发简介

前端web开发主要是制作网页，而主要工作是对web开发进行标准化的组织W3C规定，网页主要由三部分组成：

结构：对应的是 HTML 语言
表现：对应的是 CSS 语言
行为：对应的是 JavaScript 语言

HTML定义页面的整体结构；CSS是用来美化页面，让页面看起来更加美观；JavaScript可以使网页动起来，比如轮播图也就是多张图片自动的进行切换等效果。

二、HTML

1. 简介

HTML(HyperText Markup Language)：超文本标记语言：

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
标记语言：由标签构成的语言

HTML中的标签都是预定义好的，运行在浏览器上并由浏览器负责解析，然后展示出对应的效果。

2. 创建HTML

1). 新建文本文件，后缀名改为.html

页面文件的后缀名是.html，所以需要改成这样

2). 编写HTML结构标签

HTML 是由一个一个的标签组成的，但是它也用于表示结构的标签

<html>
	<head>
    	<title> </title>
    </head>
    <body>
        
    </body>
</html>

html标签是根标签，下面有 head 标签和 body 标签这两个子标签。而 head 标签的 title 子标签是用来定义页面标题名称的，它定义的内容会展示在浏览器的标题位置

HTML 文件以.htm或.html为扩展名
.HTML 结构标签

标签	描述
<HTML>	定义HTML文档
<head>	定义关于文档的信息
<title>	定义文档的标题
<body>	定义文档的主体

HTML 标签不区分大小写：如上案例中的 h1 写成 H1 也是一样可以展示出对应的效果的。
HTML 标签属性值单双引皆可
HTML 语法松散：比如h1 标签不加结束标签也可以展示出效果。但是建议严格按照要求去写。

3. VS Code安装使用

Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器

VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）

VS Code 提供了非常强大的插件库，大大提高了开发效率

官网： https://code.visualstudio.com

安装配置：https://blog.csdn.net/msdcp/article/details/127033151

4. 基础标签

标签	描述
`<h1> ~ <h6>`	定义标题，h1最大，h6最小
`<font>`	定义文本的字体、字体大小、字体颜色
`<b>`	定义粗体文本
`<i>`	定义斜体文本
`<u>`	定义文本下划线
`<center>`	定义文本居中
`<p>`	定义段落
`<br>`	定义折行
`<hr>`	定义水平线

4.1 标题标签

标签：<h1> <h2> <h3> <h4> <h5> <h6>

创建目录
在任意文件夹下创建目录，此处以html为目录
在VS Code中打开此文件夹

使用VS Code html代码模板，快速生成html结构标签：! 或者 html:5 ，然后回车

编写基础标签
只需要在 body 标签中书写标签。
书写标题标签
标题标签中 h1最大，h6最小。

<h1>我是标题 h1</h1>
<h2>我是标题 h2</h2>
<h3>我是标题 h3</h3>
<h4>我是标题 h4</h4>
<h5>我是标题 h5</h5>
<h6>我是标题 h6</h6>

通过浏览器查看效果

右键，选择 Open In Default Browser 默认浏览器打开，或者指定浏览器打开都可以

浏览器展示效果如下：

4.2 字体标签

标签：<font>

font：字体标签

face 属性：用来设置字体。如 "楷体"、"宋体"等
color 属性：设置文字颜色。颜色有三种表示方式
- 英文单词：red,pink,blue...。
- 这种方式表示的颜色特别有限，所以一般不用。
- rgb(值1,值2,值3)：值的取值范围：0~255
  此种方式也就是三原色（红绿蓝）设置方式。例如： rgb(255,0,0)。
  这种书写起来比较麻烦，一般不用。
- #值1 值2 值3：值的范围：00~FF
  这种方式是rgb方式的简化写法，以后基本都用此方式。
  值1表示红色的范围，值2表示绿色的范围，值3表示蓝色范围。例如： #ff0000
size 属性：设置文字大小

<font color="green" size="5" face="楷体">HTML,超文本标记语言</font>

4.3 hr标签

hr标签在浏览器中呈现出横线的效果

标签：<hr>

4.4 居中标签

center：文本居中

标签：<center> xxx </center>

4.5 加粗、斜体、下划线标签

b：加粗标签
i：斜体标签
u：下划线标签，在文字的下方有一条横线

<b>HTML</b>
<i>HTML</i>
<u>HTML</u>

4.6 换行标签

标签：<br>

添加换行代码如下

<b>HTML</b> <br>
<i>HTML</i> <br>
<u>HTML</u> <br>

4.7 段落标签

有的文本比较长，可以根据文章内容适当的进行换行操作，用到<p> 标签来分段落。

标签：

<p>文本段落内容</p>

<p>文本段落内容</p>

5. 图片、音频、视频标签

标签	描述
<img>	定义图片
<audio>	定义音频
<video>	定义视频

img：定义图片
- src：规定显示图像的 URL（统一资源定位符）
- height：定义图像的高度
- width：定义图像的宽度
audio：定义音频。支持的音频格式：MP3、WAV、OGG
- src：规定音频的 URL
- controls：显示播放控件
video：定义视频。支持的音频格式：MP4, WebM、OGG
- src：规定视频的 URL
- controls：显示播放控件

尺寸单位：height属性和width属性有两种设置方式：

像素：单位是px
百分比。占父标签的百分比。例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）

资源路径：

图片，音频，视频标签都有src属性，而src是用来指定对应的图片，音频，视频文件的路径。此处的图片，音频，视频就称为资源。资源路径有如下两种设置方式：

绝对路径：完整路径
这里的绝对路径是网络中的绝对路径。格式为：协议://ip地址:端口号/资源名称。
相对路径：相对位置关系,

找页面和其他资源的相对路径。

./ 表示当前路径

../ 表示上一级路径

../../ 表示上两级路径

6. 超链接标签

点击网页中的超链接会跳转到其他页面或资源，超链接使用的就是 a 标签

<a> ：定义超链接，用于链接到另一个资源

a 标签属性：

href：指定访问资源的URL
target：指定打开资源的方式
- _self：默认值，在当前页面打开
- _blank：在空白页面打开
- _parent：在父窗口中打开链接。
- _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。

7. 表格标签

table ：定义表格
- border：规定表格边框的宽度
- width ：规定表格的宽度
- cellspacing：规定单元格之间的空白
tr ：定义行
- align：定义表格行的内容对齐方式
td ：定义单元格
th：定义表头单元格

8. 布局标签

<div>：用于在HTML文档中创建一个分区或部分。它是一个多用途的标签，可以进行样式设置，用于各种布局目的。

<span>：本身并不具有任何特定的语义，它主要用于样式设置和标记文本的一部分。span标签不带换行效果

9. 表单标签

9.1 概述

表单：在网页中主要负责数据采集功能，使用标签定义表单

表单项(元素)：不同类型的 input 元素、下拉列表、文本域等

form 是表单标签，它在页面上没有任何展示的效果。需要借助于表单项标签来展示不同的效果。

9.2 form标签属性

action：规定当提交表单时向何处发送表单数据，该属性值就是URL
以后会将数据提交到服务端，该属性需要书写服务端的URL。而今天我们可以书写 # ，表示提交到当前页面来看效果。
method ：规定用于发送表单数据的方式
method取值有如下两种：
- get：默认值。如果不设置method属性则默认就是该值
  - url的长度有限制 4KB
  - 请求参数会拼接在URL后边
- post：
  - 浏览器会将数据放到http请求消息体中
  - 请求参数无限制的