HTML
-
Hyper Text Markup Language: 超文本标记语言
-
超文本: 指不仅仅是纯文本还包括字体相关和多媒体相关(图片,音频,视频)
-
作用: 负责搭建页面结构和准备页面内容, 相当于盖房子(毛坯房)
-
学习HTML主要学习的就是有哪些标签,以及标签的使用方式
文本相关标签
-
内容标题h1-h6
特点: 独占一行, 字体加粗, 自带上下间距
-
段落标签p
特点: 独占一行, 自带上下间距
-
水平分割线hr
-
换行br
-
加粗b
-
斜体i
-
下划线u
-
删除线s
列表标签
-
无序列表: ul和li
-
有序列表: ol和li
-
列表嵌套: 有序列表和无序列表可以任意无限嵌套
图片标签img
-
src:资源路径
-
相对路径: 访问站内资源
-
资源和页面同级目录: 直接写文件名
-
资源在页面的上级目录: ../文件名
-
资源在页面的下级目录: 文件夹名/文件名
-
-
绝对路径:访问站外资源时使用, 称为图片盗链, 有找不到图片的风险
-
-
alt:当图片不能显示时显示的文本
-
title: 图片标题
-
width/height: 设置宽高, 两种赋值方式: 像素和百分比, 只设置宽度时高度会自动等比例缩放
超链接a
-
href: 设置资源路径 和图片标签的src属性类似
-
a标签包裹文本为文本超链接, 包裹图片为图片超链接
表格标签table
-
相关标签: table , caption表格标题 ,tr表示行, td表示列, th 表示表头
-
相关属性: border边框 rowspan跨行 colspan 跨列
表单form
-
作用: 获取用户输入的各种信息并提交给服务器
-
学习form表单就是学习form表单中有哪些控件.
-
相关代码:
-
<form action="http://www.tmooc.cn">
<!--placeholder占位文本 maxlength最大字符长度
value设置初始值 readonly只读-->
用户名:<input type="text" maxlength="5" value="abc" readonly
name="username" placeholder="请输入用户名"><br>
密码:<input type="password" name="password" placeholder="请输入密码"><br>
<!--单选框的value属性必须写 否则提交的是on
checked设置默认选中-->
性别:<input type="radio" checked name="gender" value="m" id="r1">
<label for="r1">男</label>
<input type="radio" name="gender" value="w" id="r2">
<label for="r2">女</label><br>
<!--多选框和单选框的属性通用-->
兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
<input type="checkbox" name="hobby" value="hj">喝酒
<input type="checkbox" name="hobby" checked value="tt">烫头<br>
生日:<input type="date" name="birthday"><br>
靓照:<input type="file" name="pic"><br>
城市:
<select name="city">
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="gz">广州</option>
</select><br>
<input type="submit" value="注册">
<!--重置按钮-->
<input type="reset">
<!--自定义按钮-->
<input type="button" value="自定义">
</form>
分区标签
-
分区标签可以理解为一个容器,用来装多个有相关性的标签, 对多个标签进行统一管理
-
如何对页面进行分区?
一个页面至少分为3大区: 头 体 脚 , 每个大区里面有n个小的分区
-
常见的分区标签:
-
div: 块级分区标签, 特点: 独占一行
-
span: 行内分区标签, 特点: 共占一行
-
-
HTML5版本新增加的几个分区标签,作用和div一样,目的是为了提高代码可读性
-
header 头
-
main 主体
-
footer 脚
-
section 区域
-
nav 导航
-
<div>头</div> <div>体</div> <div>脚</div> <header></header> <main></main> <footer></footer>
-