HTML基本概述

什么是HTML

• HTML是一种标记语言,用于创建网页。叫做超文本标记语

• HTML由许多元素组成,这些元素可以指定不同的页面内容,如

文本、图像、音频、视频等。

• 最新版本是HTML5(2014年)。

• 作用:负责搭建页面的结构和准备内容(盖房子 毛坯房)

标记语言的格式

• 表示文档类型声明,告诉浏览器这是一个 HTML5 文档。

• 和 标签表示 HTML 文档的开始和结束。

• 和 标签之间包含一些元数据,如标题、样式表等信息。(给浏览器看的)

• 和 标签之间包含实际的页面内容。(给用户看的)

创建第一个HTML页面

常见文本标签

h1-h6,p,br,hr

• 内容标题h1-h6

字体加粗, 独占一行, 自带上下的间距

• 段落标签 p

独占一行, 自带上下间距

• 水平分割线 hr

• 换行br

字体相关标签

• 加粗b

• 斜体i

• 下划线u

• 删除线s

列表标签1

• 有序列表和无序列表

列表标签2

• 列表嵌套

有序列表和无序列表

可以任意无限嵌套

图片和超链接

图片img标签

• src设置资源路径:

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

  1. 资源和页面在同级目录: 直接写图片名
  2. 资源在页面的上级目录: .../图片名
  3. 资源在页面的下级目录: 文件夹名/图片名
     绝对路径:访问站外资源时使用,称为图片盗链, 有找不到
    图片的风险
    • alt:当图片不能加载时显示的文本
    • title: 鼠标悬停时显示的文本
    • width/height:设置宽高 两种赋值方式:1.像素 2.百分比
    只设置宽度 高度会自动等比例缩放
超链接a标签

• 将用户从一个 Web 页面或站点带到另一个页面或位置

• href 属性指定目标页面的 URL(类似图片的src属性)

• target:指定链接在何处打开。常见的值有 _blank (在新窗口中打开)

和 _self (在当前窗口中打开),如果没有设置 target 属性,则默认在当

前窗口中打开链接。

• 页面内部跳转:在目的地元素里面添加id属性, 然后在超链接

href="#id",这样就能跳转到指定元素的位置

表格和表单

表格table标签

tr(table row)标签定义表格中的行

• td(table data)标签定义表格中的单元格(数据)

• th(table header)表头

• caption定义表格名称,加粗并居中

• 相关属性:

 colspan跨列

 rowspan跨行

表单form标签1

form表单的作用:用来获取用户输入的各种信息提交给服务器。

• 文本框

html 复制代码
<input type="text" name="username" maxlength="5" value="abc" readonly placeholder="用户名
"><br>

• 密码框

html 复制代码
<input type="password" name="password" placeholder="密码"><br>

• 单选框

html 复制代码
<input type="radio" name="gender" value="m" id="r1"><label for="r1">男</label>
<input type="radio" name="gender" value="w" checked id="r2"><label for="r2">女</label> 
<br>
表单form标签2

• 多选框

html 复制代码
<input type="checkbox" name="hobby" value="coding">coding

• 日期

• 文件

表单form标签3

• 下拉选

html 复制代码
<select name="city">
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="gz">广州</option>
</select>日期

表单form标签4

• 按钮

html 复制代码
<!--提交按钮-->
<input type="submit" value="注册">
<input type="reset">
<input type="button" value="自定义">
<hr>
<button type="submit">注册</button>
<button type="reset">重置</button>
<button type="button">自定义</button>
相关推荐
花生侠12 分钟前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
一涯20 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调27 分钟前
记一次 Vite 下的白屏优化
前端·css
1undefined228 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js
WaiterL1 小时前
一文读懂 MCP 与 Agent
前端·人工智能·cursor
gzzeason1 小时前
使用Vite创建React初始化项目
前端·javascript·react.js