admin 管理员组

文章数量: 887500

公共课

文章目录

  • 一、五大浏览器及其内核
  • 二、web标准
  • 三、HTML骨架
  • 四、HTML标签
  • 五、表格
    • 1、合并单元格步骤
    • 2、table布局的缺点是?
  • 六、表单
  • 七、H5新增的语义化标签
  • 八、H5新增的表单标签
  • 九、H5新增的视频和音频标签

一、五大浏览器及其内核

谷歌：blink

火狐：Gecko

IE：Trident

safari：webkit

opera:presto

二、web标准

不是单个标准，是一个集合，包含了结构标准，表现标准，行为标准

结构标准：html

表现标准：css标准

行为标准：js标准

作用：

1、程序员的角度：开发了一套代码，节省了时间与经历。

2、公司的角度：减少成本，减少维护

3、浏览器的角度：方便于搜索引擎找到

三、HTML骨架

<!--html全称： Hyper Text Markup Language 超文本标记语言-->
<!--标识这是一个html5文档-->
<!DOCTYPE html>
<!--根标签-->
<html><!-- head中主要放置网页的一些属性--><head><meta charset="utf-8" /><title>半脱产第一节课</title></head><!-- 网页中所有的内容都放在主体标签中 --><body>welcome</body>
</html>

四、HTML标签

1、标签的分类

双标签：

<p>段落</p>

单标签：

<br/> hr img base meta

2、标签的关系

嵌套关系（父子关系）

并列关系（兄弟关系）

3、常用标签

p：段落标签

br：换行标签

hr：分割线标签

hx：标题标签

4、图片标签

<img src="图片的路径" title="鼠标悬浮时的文字" alt="图片为找到时显示的文字" width="宽度" height="高度"/>

5、链接标签

<a href="链接地址"></a>
<!--锚点链接-->
<a href="#article">点这里会跳转到</a>
<p id="article">这里是要跳转的段落
</p>
<!--页面跳转默认是在当前窗口打开-->
<!--在新的窗口打开-->
<a href="#" target="blank"></a>
<!--使页面默认在新的窗口打开-->
<head><base target="blank"/>
</head>

6、注释标签

html注释

<!-- 注释内容 -->

css注释

/**/

js注释

//单行注释
/*多行注释
*/

7、路径

相对路径

/ 下一级

…/ 上一级

绝对路径

8、列表

无序列表

<ul><li></li><li></li><li></li>
</ul>

有序列表

<ol><li></li><li></li><li></li>
</ol>

自定义列表

<dl><dt></dt><dd></dd><dd></dd>
</dl>

五、表格

<!-- 表格：用来显示、存储数据的 --><!-- 表格标签 table --><!-- 行标签 tr --><!-- 单元格标签 td --><!-- 表格默认没有边框 --><!-- 表格的属性：边框属性：border边框之间的距离：cellspacing边框与内容之间的距离：cellpadding宽：width高：height位置属性：align center 居中 right 靠右 left 靠左-->
<tableborder="1"cellspacing="0"cellpadding="10"width="600"height="300"align="center"><!-- 表格的结构：标题：caption，表头:thead，主体tbody --><!-- 标题标签：只能用在table中 --><caption>半脱产班级花名册</caption><!-- 表头用th可以实现加粗居中效果 --><!-- 第一行 --><thead><tr><th>序号</th><th>姓名</th><th>性别</th><th>学号</th><th>班级</th></tr></thead><!-- 第二行 --><tbody><tr><td>1</td><td>泽锋</td><td rowspan="2">男</td><td>10001</td><td rowspan="4">web公共</td></tr><!-- 第三行 --><tr><td>2</td><td>乾隆</td><!-- <td>男</td> --><td>10002</td><!-- <td>web公共</td> --></tr><!-- 第四行 --><tr><td colspan="2">3</td><!-- <td>玉叶</td> --><td rowspan="2">女</td><td>10003</td><!-- <td>web公共</td> --></tr><!-- 第五行 --><tr><td>4</td><td>玉棉</td><!-- <td>女</td> --><td>10004</td><!-- <td>web公共</td> --></tr></tbody></table>

1、合并单元格步骤

​ 1、判断合并方式：跨行还是跨列
​ 2、跨行：rowspan 跨列：colspan
​ 3、把合并的属性写在第一个要合并的单元格
​ 4、把合并数写在对应的属性
​ 5、把多余的单元格注释

2、table布局的缺点是?

a.太深的嵌套,比如table>tr> td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。
b.灵活性差,比如要将tr设置border等属性,是不行的,得通过td
c代码臃肿,当在table中套用table的时候, 阅读代码会显得异常混乱
d.混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱。
e.不够语义

六、表单

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>表单</title></head><body><!-- 表单：采集数据、提交数据 --><!-- 表单由三部分组成：表单标签，表单域，提交按钮 --><!-- 一、表单标签 --><!-- action:提交的地址method：提交的方式 GET POSTname:表单的名字      --><form action="" method="GET" name="form1"><!-- 二、表单域 --><!-- 标记标签 作用：当label的for属性的属性值与input的属性值一样时，单机label可以获取焦点 --><div><label for="user">姓名：</label><!-- input控件标签type:类型 text:文本value:输入框的值name:名称size:输入框的尺寸--><input type="text" id="user" value="张三" name="user" size="40" /><!-- 获取焦点 当光标再输入框中时，能输入文本时即获取了焦点 --></div><div><label for="pwd">密码：</label><!-- 密码框 当type的属性值未password时为密码框 --><input type="password" id="pwd" name="pwd" /></div><div><!-- 单选框：type="radio" --><!-- 当两个单选框的name属性一样时才有单选效果 --><input type="radio" name="sex" checked /><span>男</span><input type="radio" name="sex" /><span>女</span><!-- 默认单选框的值：1、checked="checked"2、checked=true3、checked--></div><div><!-- 多选框：type="checkbox" --><input type="checkbox" checked /><span>打篮球</span><input type="checkbox" /><span>打游戏</span><input type="checkbox" checked /><span>游泳</span><input type="checkbox" /><span>跑步</span><input type="checkbox" checked /><span>看美女</span><!-- 默认多选框的值：1、checked="checked"2、checked=true3、checked--></div><div><!-- 选择框 --><span>家庭住址：</span><!-- 组合标签：类似ul li --><select name="address" id=""><option value="">石家庄</option><option value="">沧州</option><option value="">邯郸</option><option value="">邢台</option><option value="" selected>张家口</option></select><!-- 默认选中：1、selected="selected"2、selected=true3、selected--></div><div><span>个人名言：</span><!-- 多行文本框 --><!-- cols:宽度rows：高度--><textarea rows="5" cols="30">宝剑锋从磨砺出，梅花香自苦寒来</textarea></div><!-- 重置按钮 --><input type="reset" value="我要重新设置" /><!-- 普通按钮 --><input type="button" value="我是一个普通按钮" /><br /><!-- 提交按钮 --><input type="submit" value="把信息提交到百度" /></form></body>
</html>

七、H5新增的语义化标签

1、header 头部标签

2、section 段落标签

3、footer 底部标签

4、nav 导航标签

5、aside 侧边栏标签

6、article 文章标签

7、progress 进度条标签

例子：

<progress max="100" value="50"></progress>

八、H5新增的表单标签

1、新加标签：datalist

<input type="text" list="list01" id = "list">
<datalist id="list01"><option value="影流之主"></option><option value="圣枪游侠"></option><option value="山隐之焰"></option><option value="赏金猎人"></option><option value="曙光女神"></option>
</datalist>
<!--这里datalist的id要和input的list的值保持一致-->

2、新添属性

		<!-- 1、placeholder 提示信息 --><!-- 2、maxlength:最大长度 --><!-- 3、minlength:最小长度 --><!-- 4、required: 非空 --><!-- 5、autofocus: 自动获取焦点 --><!-- 6、autocomplete:off 自动完成关闭，on自动完成打开 --><inputtype="password"id="pwd"name="pwd"size="20"placeholder="请输入你的密码"maxlength="6"minlength="3"required/>

3、新添的type值

	  <!-- 1、邮箱：email --><!-- 2、网址：url--><!-- 3、拾色器： color --><!-- 4、搜索框 search 在最后面有一个×号可以清除搜索框的内容 --><!-- 5、时间：time --><!-- 6、日期：date --><!-- 7、月份：month --><!-- 8、周：week -->

九、H5新增的视频和音频标签

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>H5新增的视频和音频</title></head><body><!-- 音频标签：audio --><!-- 控件属性 controls 必须有这个才能显示出来 --><!-- 循环播放：loop --><!-- 默认静音：muted --><audio src="media/yang.mp3" controls loop muted></audio><audio controls loop><source src="media/yang.mp3" /></audio><!-- 视频标签：video --><!-- 宽高：width，height --><videosrc="media/test.mp4"controlsloopmutedwidth="200"height="300"></video><video controls loop muted width="200" height="300"><source src="media/test.mp4" /></video></body>
</html>

本文标签： 公共课

版权声明：本文标题：公共课 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1694452601h252196.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。