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设置资源路径:

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

资源和页面在同级目录: 直接写图片名
资源在页面的上级目录: .../图片名
资源在页面的下级目录: 文件夹名/图片名
 绝对路径:访问站外资源时使用,称为图片盗链, 有找不到
图片的风险
• 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>