HTML基础知识

认知

五大浏览器

名称 内核
IE、Edge Trident
Opera(欧朋) 最初是Presto,后来是Webkit,现在是Blink
Safari(苹果) Webkit
Firefox(火狐) Gecko
Chrome(谷歌) 之前是Webkit,现在是Blink

定义

HTMLHyperText Markup Language)是用来描述网页的一种超文本标记语言。浏览器不会显示标签,而是使用标签来解释页面的内容。

标签

HTML标记标签通常被称为HTML标签(HTML tag)。分为双标签和蛋标签。

元素

HTML元素指的是从开始标签到结束标签的所有代码。

上面代码中,<p>表示开始标签(start tag),</p>表示结束标签(end tag)。<p>Hello World</p>内容整体则表示HTMl元素。

属性

属性为HTML元素提供附加信息。属性名建议使用小写,且使用双引号包含。

上面代码中,a链接使用了href属性,用于指定链接跳转的地址。

排版标签

标题

通过<h1> - <h6>等标签进行定义的。

搜索引擎使用标题为网页的结构和内容编制索引,所以不能乱用标题标签。浏览器会自动地在标题的前后添加空行。

段落

使用<p></p>标签表示。

浏览器会自动在段落的前后添加空行。

文本格式化

不强调

强调

换行

使用<br />进行换行

分割线

使用<hr />进行横线分割

媒体标签

图片

使用<img />标签表示。img是一个单标签,作用是显示一张图片。

属性名 作用
src 图片的路径位置
alt 替换文本,图片不显示时显示的文字
title 提示文本,鼠标悬浮在图片上显示的文字
width/height 设置图片的宽度/高度,后面主要使用css进行修饰

音频

使用<audio></audio> 标签表示。audio是一个音频标签,作用是播放音频。

属性名 作用
src 文件路径
controls 显示播放控件
autoplay 自动播放
loop 循环播放

视频

使用<video></video> 标签表示。audio是一个视频标签,作用是播放视频。

属性名 作用
src 文件路径
controls 显示播放控件
autoplay 自动播放
loop 循环播放

超链接

定义一个超链接,可用于从一个页面跳转到另一个页面。使用<a href="链接地址">链接文本</a>表示。

上面代码中,“百度搜索”表示链接文本,链接文本不一定是文本, 可以是图像或者其他HTML元素;https://www.baidu.com表示链接地址,点击链接文本后则会跳转到这个链接地址。

属性名 作用
href 跳转的链接地址
target 控制页面打开的形式
_blank 新窗口打开
_self 本窗口打开(默认)

锚点的使用实例

上面代码中,首先创建了一个名为img的锚点,底部两个代码则是定义了锚点的跳转位置。当img图片未添加id="img"属性时,点击锚点会跳转到设置name="img"a链接处,否则会跳转到img图片。锚点跳转到其他标签,只需要设置对应名称的id属性即可。

列表标签

以行的方式整齐的展示数据

无序列表

使用<ul><li></li></ul>表示。

ulli标签每行默认有一个小圆点

  • 每一项是没有顺序的
  • ul标签中只能有li标签
  • li标签中可以有其他任意标签

有序列表

使用<ol><li></li></ol>表示。

ol中每一项前面有默认的序号

  • 每一项是有顺序的
  • ol标签中只能放li标签
  • li标签中可以放其他任意标签

自定义列表

使用<dl><dd></dd></dl>表示。

dl整体包裹,dt是小标题,dd是每一项

  • dl中只能放dtdd
  • dtdd可以放任意标签

表格标签

使用<table></table>标签表示。以表格整齐的形式展示数据。

基本标签

  • table 整体
  • tr
  • td

属性

  • border 边框
  • width 宽度
  • height 高度

其他标签

  • caption 表格的说明文字
  • th 替换td标签,表格一列的标题
  • 结构标签 包裹tr标签,描述表格的结构
    • thead
    • tbody
    • tfoot

合并单元格

上下合并保留上边,左右合并保留左边,删除其他

  • rowspan 合并行
  • colspan 合并列

表单标签

使用<form></form>标签标识。收集用户数据,如登陆页、注册页等 。

input标签

type 属性值不同,显示不同的类型

类型 描述
text 文本框
name 提交后台数据标识符
value 用户输入的数据,若设置则为默认值
placholder 占位符
password 密码框
name 提交后台数据标识符
value 用户输入的数据,若设置则为默认值
placholder 占位符
radio 定义单选按钮
name 提交后台数据标识符,相同name属性值的单选框为一组,一组中只能同时有一个被选中
value 用户选择的数据
checked 默认选中,一组只能设置一个
checkbox 定义复选框,允许多选
name 提交后台数据标识符
value 用户选择的数据
checked 默认选中
file 定义普通按钮
name 提交后台数据标识符
multiple 多文件选择
表单按钮 需要配合form标签一起使用,将form标签包裹在最外层(value 设置按钮文字)
submit 提交数据
reset 让表单恢复默认值
button 普通按钮

表单属性

属性 描述
action 规定提交表单时将表单数据发送到何处
target 规定提交表单后在何处显示,默认为_self(在当前窗口)
method 规定提交表单时要使用的HTTP方法
name 规定表单提交的名称

button标签

一个可以点击的按钮

属性名 作用
submit 提交数据
reset 让表单恢复默认值
button 普通按钮

下拉菜单

使用<select><option></option></select>表示。select下拉选择框,option为每个选择项。

  • name 提交后台数据标识符
  • value 用户选择的数据
  • selected 默认选择

文本域标签

使用<textarea></textarea>表示,用于输入大量文字。

label标签

使用<label></label>表示,用于绑定表单和文本。用法如下:

  1. 直接使用label标签把文本和表单标签包裹起来,但是label标签不能有for属性
  2. 使用label标签将文本和表单标签包裹后,在表单标签上添加id属性,并且在label标签的for属性设置id属性值

语义化标签

div span
块状标签 行内标签
独占一行 一行可以显示多个
宽度默认占满一行,高度默认由内容撑开 宽度和高度默认都由内容撑开

字符实体

常见的字符实体

名称 作用
&nbsp; 空格
&gt; 大于号
&lt; 小于号

这些信息可能会帮助到你: 外卖红包天天领,下单享返钱奖励!

原创文章,作者:seabert,如若转载,请注明出处:https://bysjb.cn/html.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注