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表单的作用：用来获取用户输入的各种信息提交给服务器。
• 文本框
<input type="text" name="username" maxlength="5" value="abc" readonly placeholder="用户名
"><br>
• 密码框
<input type="password" name="password" placeholder="密码"><br>
• 单选框
<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
• 多选框
<input type="checkbox" name="hobby" value="coding">coding
• 日期
• 文件
表单form标签3
• 下拉选
<select name="city">
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="gz">广州</option>
</select>日期
表单form标签4
• 按钮
<!--提交按钮-->
<input type="submit" value="注册">
<input type="reset">
<input type="button" value="自定义">
<hr>
<button type="submit">注册</button>
<button type="reset">重置</button>
<button type="button">自定义</button>