<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>布局标签</title></head><body><header><nav><a href="">Home</a><a href="">About</a><a href="">Connect</a><a href="">Blog</a></nav></header><!--主体--><main><article><header><h1>文章标题</h1><p>文章段落1</p><p>文章段落2</p></header><section><h2>标题2</h2><p>文章段落1</p><p>文章段落2</p></section><footer><section>分页条</section></footer></article><aside><ul><li>推荐信息1</li><li>推荐信息2</li><li>推荐信息3</li><li>推荐信息4</li><li>推荐信息5</li></ul></aside><aside><section><h3>广告位招商</h3></section></aside><section><span>标签1</span><span>标签2</span><span>标签3</span></section></main><!--页脚--><footer><div class="link"><a href="">链接1</a><a href="">链接4</a><a href="">链接3</a></div></footer></body></html>
| 标签 | 寓意 |
|---|---|
<header> |
用于头部信息 |
<main> |
导航链接,前后按钮 |
<nav> |
导航链接,前后按钮 |
<article> |
包含文章 |
<section> |
章节、页眉、页脚或文档中的其他部分,一般包含h标签 |
<aside> |
侧边栏 |
<footer> |
页脚 |
常用标签
1. 文本相关
| 序号 | 标签 | 描述 |
|---|---|---|
| 1 | <p> |
段落内容 |
| 2 | <pre> |
按源码格式原样显示 |
| 3 | <br> |
换行(源码中的换行会被解析来空格) |
| 4 | <span> |
与<div>类似,无语义, 主要用作内容的样式钩子 |
2. 语义化文本
| 序号 | 标签 | 描述 |
|---|---|---|
| 1 | <time> |
描述日期或时间 |
| 2 | <abbr> |
缩写 |
| 3 | <sub> |
下标 |
| 4 | <sup> |
上标 |
| 5 | <address> |
地址,通常用在<footer>中 |
| 6 | <s> / <del> |
删除线, <s>无语义 |
| 7 | <code> |
显示代码块,通常与代码格式化插件配合,才能高亮关键字 |
| 8 | <progress> |
进度条 |
| 9 | <b> / <strong> |
加粗, <b>无语义 |
| 10 | <i> / <em> |
斜体, <i>无语义 |
| 11 | <mark> |
高亮标记, 默认为内容添加黄色背景 |
| 12 | <q> / <blockquote> |
引用, 内容加双引号 |
img标签要点
总结一下img的要点
alt 属性用于图片加载不出来的时候给搜索引擎看的。<img>标签很特殊个人认位使用的时候需要申明是块元素还是行元素。
表格
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>细说表格</title></head><body><table border="1" cellpadding="5" cellspacing="0" width="600" align="center"><caption>商品清单</caption><thead bgcolor="lightblue"><tr><th>编号</th><th>类别</th><th>名称</th><th>单价</th><th>数量</th><th>金额</th></tr></thead><tbody align="center"><tr><td>1</td><td rowspan="2">3C</td><td>笔记本电脑</td><td>8900</td><td>1</td><td>8900</td></tr><tr><td>2</td><td>数码单反相机</td><td>13800</td><td>1</td><td>13800</td></tr><tr><td>3</td><td>服饰</td><td>冠军卫衣</td><td>1000</td><td>2</td><td>2000</td></tr></tbody><!-- 底部--><tfoot align="center"><tr><!-- <td colspan="3">合计:</td>--><td colspan="4">合计:</td><!-- <td></td>--><!-- <td></td>--><td>4</td><td>24700</td></tr></tfoot></table></body></html>
表格几乎没有难点：<caption>表格标题<th> 通常用于表格列标题<thead><tbody> 这三个都是语义标签头身尾<tfoot>
需要注意的是行合并列合并！
colspan 列
rowspan 行
小技巧：个人推荐合并表格的时候先写出完整表格再去合并！减少出错！大佬除外。
特别重要的表单！！！
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>编辑课程</title><style>td {border: 1px solid lightgray;border-radius: 3px;}td:first-child label {background-color: #eee;}</style></head><body><table border="0" cellpadding="10" cellspacing="9" align="center" width="700"><caption>编辑课程</caption><tbody><tr><td><label for="course_name">课程名称</label><input type="text" id="course_name" name="course_name" value="微信小程序-企业微网站"></td><td><label for="duration">课程时间</label><input type="number" id="duration" name="duration" value="200">分钟</td></tr><tr><td><label for="course_type">课程类别</label><select name="course-type" id="course_type"><option value="0" selected>视频</option><option value="1">手册</option><option value="2">实战</option><option value="3">工具</option></select></td><td><label for="is_vip">是否VIP</label><select name="is_vip" id="is_vip"><option value="0" selected>免费课程</option><option value="1">线上直播课</option><option value="2">VIP课程</option></select></td></tr><tr><td><label for="course_difficulty">课程难度</label><select name="course-course_difficulty" id="course_difficulty"><option value="0" selected>初级</option><option value="1">中级</option><option value="2">高级</option></select></td><td><label for="course_classify">课程分类</label><select name="course_classify" id="course_classify"><option value="0" selected>PHP</option><option value="1">CSS</option><option value="2">HTML</option></select></td></tr><tr><td><label for="course_status">状态</label><select name="course_status" id="course_status"><option value="0">待审核</option><option value="1" selected>正常</option><option value="2">下架</option></select></td><td><label for="update_status">更新状态</label><select name="update_status" id="update_status"><option value="0" selected>更新中</option><option value="1">更新完</option></select></td></tr><tr><td><label for="is_live">正在直播</label><select name="is_live" id="is_live"><option value="0">是</option><option value="1" selected>否</option></select></td><td><label for="order">排序</label><input type="number" id="order" name="order" value="0"></td></tr><tr><td><!-- 使用复选框后面的label进行关联--><label>是否必修</label><input type="checkbox" id="required" name="required"><label for="required">必修</label></td><td><label for="price">价格</label><input type="number" id="price" name="price" value="0"></td></tr><!-- 上传本地图片, 使用一行一列布局, 涉及列合并--><tr><td colspan="2"><a href="">上传本地图片</a><img src="1.png" alt="" width="80"><span>封面为420*260像素的 PNG/JPG/GIF 格式图片</span></td></tr><tr><td>封面小图册</td><td>封面为 PNG/JPG/GIF 图片格式</td></tr><tr><td >关键词</td><td>微信,小程序,微信小程序</td></tr><tr><td colspan="2">课程简介</td></tr><tr><td colspan="2"><ol><li>介绍小程序开发,开发者工具</li><li>介绍小程序文档</li><li>微官网项目</li><li>首页,产品, 产品详情,新闻,新闻详情,关于我们</li></ol></td></tr><tr><td colspan="2">课程需知</td></tr><tr><td colspan="2"><ol><li>熟悉html+css</li><li>熟悉js</li><li>熟悉php</li></ol></td></tr></tbody><tfoot><tr><td colspan="2" align="center"><button>保存</button><!-- button默认type类型为提交,设置为type="button",需要由js设置其行为--><button type="button">取消</button></td></tr></tfoot></table></body></html>
表单重点知识梳理
表单最重要的一点就是圈地！圈地标签<form>表单内容必须在此标签中！<form>标签有两个必填属性 action 和 method 前者是数据提交的地址 后者是提交类型post get
假设你的<input>类型是 file 用来上传图片那么<form>标签中需要一个属性 enctype=”multipart/form-data”
<input>标签checkbox类复选框的时候 name 一般使用 “名字[ ]”数组的形式提交。<input>标签radio需要注意的是 两个必须得是同一个name 不然你的单选框就飘了。<input>标签 hidden类 这个就非常优秀！可以传递一些用户看不到的内容。- 下拉列表是个奇葩！他不用
<input>用<select>与<option>选中项是在<option>中加入selected
5.<input>标签checkbox类radio的预先选中都是checked!
iframe
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><ul><li><a href="https://baidu.com" target="content">百度</a></li><li><a href="https://sogou.com" target="content">搜狗</a></li><li><a href="#" target="content">博客</a></li></ul><!-- name属性非常重要 可以与a标签的target一起用 但是这个内置页面不利于seo所以适合在后台使用 --><!-- 欢迎页面可以用srcdoc代替在里面写代码 --><iframe srcdoc="<h1>你好欢迎来到后台管理</h1>" name="content" width="300" height="600"></iframe></body></html>
手抄
看群里的朋友都在作业后面写点感想，我也来写一点。
学习有两种，一种是学习新的知识，一种是查漏补缺。学习是一个枯燥的过程，但是也是磨练自己的途径。
自从学了计算机，已经有2年没有动过笔了。感谢老师让我再次提笔！