HTML基础

最新推荐文章于 2024-08-07 14:19:47 发布

weixin_57891768

最新推荐文章于 2024-08-07 14:19:47 发布

阅读量124

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_57891768/article/details/125140268

版权

HTML——全名：HyperText Markup Language(超文本标记语言)，是一种用于创建网页的标准标记语言。我们可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

一个简单的HTM页面如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个页面</h1>
</body>
</html>

其展示效果如下

其相关标签解释如下：

<!DOCTYPE html> 声明为 HTML5 文档
<html> HTML 页面的根元素
<head> 包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 描述了文档的标题
<body> 定义网页展示内容
<h1> 定义一个大标题

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

HTML的基本标签

(1)HTML标签

整个网页是从<html>开始，到</html>结束。

(2)head标签

代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。

<head>内部标签	说明
<title>	定义网页的标题
<meta>	定义网页的基本信息（供搜索引擎）
<style>	定义CSS样式
<link>	链接外部CSS文件或脚本文件
<script>	定义脚本语言
<base>	定义页面所有链接的基础定位（用得很少）

(3)body标签

body标签代表页面的本体，用来定义要展示的内容，这些内容是在浏览器可见的。绝大部分标签都是定义在<body>标签内部的。

文本相关标签

内容标题h1-h6 特点: 字体加粗, 独占一行, 自带上下间距

段落标签p 特点: 独占一行, 自带上下间距

水平分割线hr

换行br

加粗b

斜体i

下划线u

删除线s

列表标签

无序列表: ul和li组合

有序列表: ol和li组合

列表嵌套: 有序列表和无序列表可以任意无限嵌套

图片标签img

src: 资源路径:

相对路径:访问站内资源使用

资源和页面在同一目录: 直接写文件名

资源在页面的上级目录: ../文件名

资源在页面的下级目录: 文件夹/文件名

绝对路径:访问站外资源时使用, 又称为图片盗链, 有找不到图片的风险

alt: 图片不能正常显示时显示的文本

title: 图片标题, 鼠标悬停显示的文本

width/height: 设置宽高, 两种赋值方式:1.像素 2.上级元素的百分比 , 只设置宽度时高度自动等比例缩放

图片标签支持的格式: *.jpg *.png *.gif

超链接a

href: 作用类似图片标签的src属性, 设置资源路径

a: 标签包裹文本为文本超链接, 包裹图片为图片超链接

页面内部跳转: 在超链接的href属性设置#id , 给目的地位置的元素添加id属性,这样点击超链接时会跳转到元素位置

表格标签table

相关标签: table表格, tr行,td列,b表头(加粗并居中), caption表格标题

相关属性: border边框 colspan跨列 rowspan跨行

分区标签

作用: 可以理解为一个容器,将多个有相关性的标签放在一个分区标签里面,便于统一管理

常见的分区标签:

块级分区标签div: 特点:每个div独占一行

行内分区标签span: 特点多个span共占一行

下拉列表

<select> 元素用来创建下拉列表。

<option> 标签定义下拉列表中的一个选项（一个条目）。

<select> 
<option value="volvo">Volvo</option> 
<option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

效果展示

表单form

表单是由窗体和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。

<form action＝"url" method=get|post name="myform" ></form>
-name：表单提交时的名称
-action：提交到的地址
-method：提交方式，有get和post两种，默认为get

表单类型在type属性中被定义

<input type="">

常用的标签有：

text：文本框，当用户要在表单中键入字母、数字等内容时，就会用到文本框。

password：密码，密码字段字符不会明文显示，而是以星号或圆点替代。

radio： 单选框，当name属性定义相同的值时，可以实现单选框互斥效果

checkbox：复选框.，用户可以从若干给定的选择中选取一个或若干选项。

file：文件选择器，实现文件上传。

hidden： 隐藏域，定义隐藏字段，隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值。

submit： 提交按钮，当用户单击确认按钮时，表单的内容会被传送到一个文件中。

reset：重置按钮，重置所有表单值为默认值。

image：图片提交按钮，定义图像作为提交按钮。

email：定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证）。

url：定义用于输入 URL 的字段。

date：日期选择器，定义选择日、月、年。

weixin_57891768

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

HTML——全名：HyperText Markup Language(超文本标记语言)，是一种用于创建网页的标准标记语言。
复制链接

扫一扫