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>
相关推荐
AA-代码批发V哥1 小时前
HTML之语义化标签与多媒体标签
html
像风一样自由20201 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem2 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊2 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术2 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing2 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止3 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall3 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴3 小时前
简单入门Python装饰器
前端·python
袁煦丞4 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作