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>
相关推荐
安全系统学习13 分钟前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖29 分钟前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖41 分钟前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水1 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐1 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06271 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台2 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121382 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack2 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python