图片标签img
-
src: 资源路径:
- 相对路径:
- 资源和页面在同一目录: 直接写图片名即可
- 资源在页面的上级目录: ../图片名
- 资源在页面的下级目录: 文件名/图片名
- 绝对路径: 一般访问站外资源时使用, 也称为图片盗链(存在找不到图片的风险)
- 相对路径:
-
alt: 图片不能显示时显示的文本
-
title: 图片标题, 鼠标停在图片上显示的文本
-
width/height:设置图片宽高 , 如果只设置宽度,高度会等比例缩放
- 像素值
- 百分比
超链接a
- href: 资源路径 作用类似图片标签中的src属性
- a标签包裹文本为文本超链接,包裹图片为图片超链接
- 页面内部跳转, 在目的地位置元素里面添加id属性 在超链接里面href="#id"
表格table
- 包含标签: table tr表示行 td表示列 th表头 caption表格标题
- 属性: table(border边框) td(跨行rowspan 跨列 colspan)
表单form
-
作用: 获取用户输入的信息,并且把信息提交给服务器
-
学习form表单主要学习的就是有哪些控件
-
控件包括: 文本框,密码框,按钮,单选,多选,下拉选,日期,文件等
-
相关代码:
<form action="http://www.tmooc.cn"> <!--placeholder站位文本 maxlength最大字符长度 value设置默认值 readonly只读--> 用户名:<input type="text" name="username" placeholder="请输入用户名" maxlength="5" value="abc" readonly="readonly"><br> 密码:<input type="password" name="password"><br> <!--checked默认选中 value必须添加 否则提交的是on --> 性别:<input type="radio" name="gender" value="m" id="r1"> <label for="r1">男</label> <input type="radio" checked="checked" name="gender" value="w">女<br> 兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟 <input type="checkbox" checked="checked" name="hobby" value="hj">喝酒 <input type="checkbox" name="hobby" value="tt">烫头<br> 生日:<input type="date" name="birthday"><br> 靓照:<input type="file" name="pic"><br> 所在地:<select name="city"> <option>北京</option> <option selected="selected">上海</option> <!--value设置提交内容 如果没有则提交标签体内容--> <option value="guangzhou">广州</option> </select><br> <input type="reset"> <input type="submit" value="注册"> <!--自定义按钮--> <input type="button" value="按钮"> <hr> <button type="submit">提交</button> <button type="reset">重置</button> <button type="button">自定义</button> </form>
分区标签
-
作用: 类似容器, 对多个相关标签进行统一管理
-
一个页面至少分为三大区,头/体/脚 每个大区里面又有n个小的分区
-
有哪些分区标签?
-
块级分区标签: div, 特点:独占一行
HTML5标准中新增分区标签(header头,footer脚,article正文/文章, nav导航, section区域)作用和div一样
HTML5之前版本: <div>头</div> <div>体</div> <div>脚</div> HTML5版本后: 提高了代码可读性 <header>头</header> <article>体</article>或<section>体</section> <footer>脚</footer>
-
行内分区元素: span 共占一行
-