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>
相关推荐
GIS程序媛—椰子40 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
木舟10091 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一1 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落2 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt