第3章--HTML

HTML简介

Hyper Text Markup Language：超文本标记语言--用于标记网页的内容

history：

html(1991)雏形 -> html4.01(1999) -> w3c:xhtml1.0(2000)-xhtml2.0(2005) 但xhtml不被浏览器厂商看好

w3c也意识到xhtml的方向不对，于是跟厂商合作推出html5草案 -> html5(2014正式发布）

HTML文档：

HTML文档声明：首行、顶格 <!DOCTYPE> 告诉浏览器如何解析文档：html5--<!DOCTYPE html>

HTML文档头部：

<head>描述文档的基本属性

HTML文档主体：见下

HTML标签

语法：闭合 (有的是自闭合)；可包含一个或多个属性值；可嵌套；注释

书写规范 name convention：标签和属性名：小写；属性值：双引号；嵌套：缩进

常用属性：

id：规定了元素的id (unique)

class：规定了元素的类名，页面中具有统一的样式或功能的元素可归为同一个类，供js和css使用

style：控制css样式，但将表现和样式混杂在一起，不利于后期维护。

title：规定了元素额外的信息，当鼠标停留在该元素上时会显示

标签：

文档章节：表示页面的章节结构

html5之前一般使用div标签分隔的

<body> 页面内容的容器

<header> 页面头部、章节头部

<nav> 导航区

<aside> 与主要内容不相关的区域（比如侧边栏、工具性内容、广告等）

<article> 独立的正文，可嵌套（如博客评论article标签可嵌入博客文章article标签中）

<section> 标题组（带有一个标题），相邻section是有联系的

<footer> 尾部

<hx> 标题<h1>--<h6> 差别：重要性

文本标签：

<a></a> 超链接：

创建指向另一个文档的链接 (点击时跳转到另一个文档 href="url", target="_self"//同一窗口(default) ；

target="_blank"//新窗口；target="inner"，并使用iframe标签：同一页面内部显示）

创建一个文档内部的锚点 href="#flag"; <div id="flag">

链接到Email地址 href="mailto:email" (手机里连接到拨打电话 href="tel:number")

<-em> <strong> 强调：

<-em> 语义上的强调 italic

<strong> 更强调 bold

<span> 无语义，结合class等属性用css给予样式

<br> 换行

<cite> <q> ：引用

cite：引用的出处

q: 作品中的一段文字等

code: 代码

格式化：

b：粗体但不想强调（比如关键字、产品名等）

i：斜体但不想强调（如技术术语等）

组合内容：

<div>：用于分区，作为其他标签的容器

<p>：段落

<ol>：有序列表：<ol> <li>...</li> ... </ol>；属性type="a"/start="2"以abc顺序，从b开始

<dl>：自定义列表：i.e. <dt>：列表的项；<dd>对该项的描述；dd有缩进，每个dt可有多个dd描述

<dl>

    <dt>作者</dt>

    <dd>Cbuck Musciano</dd>

    <dd>Bll Kennedy</dd>

    <dt>出版年</dt>

    <dd>2007-4</dd>

</dl>

<pre> <blockquote> ：组合内容

<pre> 若内容是需要格式化的，需要放在pre里，会保留换行符和空格等

i.e. <code>中的代码

<blockquote> 大块的引用；属性cite="url引用出处"

嵌入资源：

<img> 嵌入图片，自闭合 src="url"，alt="图片含义"，当图片显示出错时，会显示图片含义

<object type="application/x-shockwave-flash">

    <param name="movie" value="http://pdfReader.swf">

    <param name="flashvars" value="http://book.pdf">

</object>

<video> 嵌入视频（高版本浏览器）autoplay 页面加载时视频自动播放，loop循环播放

controls显示播放器的控制条 poster插入视频的封面；track引入字幕

浏览器的兼容问题：需要多个source文件，浏览器自动选择。

src资源的地址，type资源类型；若只有一个source，可将url放在video的src属性中

<video controls="controls" poster="/img/poster.jpg">

    <source src="movie.mp4" type="video/mp4">

    <source src="movie.webm" type="video/webm">

    <source src="movie.ogg" type="video/ogg">

    <track kind="subtitles" src="video.srt" label="English">

    您的浏览器不支持video标签

</video>

<audio> 和video标签类似

<canvas> <svg> 图形

<canvas> 基于像素绘制图像，提供了绘制函数，可使用脚本绘制（对于性能要求高、场景复杂比如实时数据展示、游戏，可使用canvas）

<map> <area> 热点区域：点击不同区域会跳转到不同页面

<img src="url" alt="sport" width="1090 height="995" usemap="#Map2">

<map name="Map2">

    <area shape="rect" coords="669,75,1075,682 href="url" target="_blank">

    <area shape="rect" coords="26,93,391,337 href="url" target="_blank">

    ...

</map>

(usemap = map name)

表格 <table>

<caption> 标题

<thead> 表头

<tbody> 表格内容

<tfoot> 表格尾部

<tr> 每一行

<th> 表头单元格

<td> 普通单元格

属性colspan/rowspan="number"：合并行/列

表单 <form>

i.e. 登陆窗口

<form action="/login.php" method="post">

    <fieldset>

        <legend>照片选择</legend>

        <label for="file">选择照片</label>

        ...

    </fieldset>

    <fieldset>

        <legend>综合设置</legend>

        <div>选择尺寸：</div>

        ...

    </fieldset>

    ...

</form>

action：表单提交的后台地址/接口

method：表单提交方式，常用post

fieldset 分区，legend标题

<input>

<form ...>

    <input type="file name="file>　　// upload file

    <input type="checkbox" name="size" value="5">　　// multi-choice, disable property:禁止用户选中

    <label for="cb_0">5寸</label>

    <input type"radio" name="material" value="fushi">　　// single-choice

    <label for="rd_0">富士</label>

    <input type="text" name="desc">　　// default，placeholder显示提示信息，value自动填充的默认信息，readonly，hidden

</form>

name: 提交给后端的variable name

<input type="submit"> // submit button

<input type"reset"> // reset button

但一般使用<button>标签：

<button type="submit">提交</button> // submit button

<button type"reset">重置</button> // reset button

<select> 下拉选择框：

<label for="delivery">shipping method</label>　　// prompt for select, use "for" property to link to select id
<select id="delivery>

    <option value="0">Express</option>

    <option value="1">EMS</option>

</select>

<optgroup> 将选项分组 label属性：组名

<textarea> 多行文本框：

html5中input的新type：

email 会对输入进行格式检验

range 一定范围内的数据

color 拾色器

data picker 选择选定的数据

url、number、tel、search等

语义化：

用正确的标签来描述页面内容

语义化的作用：

SEO（Search Engine Optimization) 通过语义化的标签来确定权重

可访问性：盲人通过屏幕阅读器来访问页面，屏幕阅读器对不同标签发出不同声音

可读性：开发人员开发效率、维护

实体字符：

output: 这是个标签

how to display <span> in the browser?

实体字符表示方法：

&entity_name; i.e.   空格

&#entity_number; 空格

常用实体名称：

空格： /

引号："/ "

大于小于：>/ > </ <

版权符：©/ ©

&：&/ &

HTML单元测试：https://segmentfault.com/n/1330000004215946

HTML的单元测试

本次得分为：24.66/26.00, 本次测试的提交时间为：2017-07-29, 如果你认为本次测试成绩不理想，你可以选择再做一次。

1单选(2分)

下面哪一项是HTML5的文档声明（）

A.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
B.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
C.<?xml version="1.0" encoding="UTF-8" ?>
D. <!DOCTYPE html>2.00/2.00

2单选(2分)

下面哪个标签不具有src属性（）

A.embed
B.video
C.table2.00/2.00
D.img

3多选(4分)

以下表示列表的标签有哪些（）

A.ul1.33/4.00
B.dl1.33/4.00
C.option
D.ol1.33/4.00

4多选(4分)

以下哪些是input标签type属性的可选值（）

A.textarea
B.text1.33/4.00
C.button
D.radio1.33/4.00

5判断(1分)

<head>标签中的内容会显示在页面中。

A.√
B.×1.00/1.00

6判断(1分)

HTML注释格式是 /* 注释内容 */。

A.√
B.×1.00/1.00

7填空(2分)

“<”的实体字符为：

8填空(2分)

请补全以下代码，实现表单提交功能（要求小写）：

action

9填空(2分)

请补全以下代码（要求小写）：

charset

10填空(2分)

“>”的实体字符为：

11填空(2分)

超链接对应的标签为：

12填空(2分)

利用表格标签的（要求小写）属性可以实现跨列效果。

colspan

前端开发工程师 - 01.页面制作 - 第3章.HTML的更多相关文章

前端开发工程师 - 01.页面制作 - 第4章.CSS
第4章.CSS CSS简介 Cascading Style Sheet 层叠样式表:定义页面中的表现样式 history: CSS1(1996)--CSS2(1998)--着手CSS3草案(拆分成很多 ...
前端开发工程师 - 01.页面制作 - 第1章.Photoshop切图
第1章--Photoshop切图工具.面板.视图什么是切图? 1. 从设计稿(.psd)中切出网络素材,如按钮.图标.logo.背景图等 2. 编写代码,在代码中使用图片,生成静态页面 --给网页 ...
前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化
04.页面架构第1章--CSS Reset 第2章--布局解决方案居中布局课堂交流区水平列表的底部对齐如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...
前端开发工程师 - 02.JavaScript程序设计 - 第2章.进阶篇
第2章--进阶篇类型进阶类型: Undefined Null Boolean String Number Object 原始类型(值类型):undefined, null, true, " ...
前端开发工程师 - 02.JavaScript程序设计 - 第1章.基础篇
第1章--基础篇 JS介绍 html 网页的内容:css 网页的样式:javascript 网页的行为 i.e. hello world <!DOCTYPE html> <html& ...
[转] Web前端开发工程师常用技术网站整理
1.常用工具相关有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...
Web前端开发工程师常用技术网站整理
1.常用工具相关有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...
Web前端开发工程师养成计划【转载】
Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...
上海洋码头(www.ymatou.com)急招技术人才(职位：互联网软件开发工程师，.NET网站架构师，Web前端开发工程师，高级测试工程师，产品经理）
对公司招聘职位有兴趣的童鞋可以把简历发送到zhangzhiqiang@ymatou.com,我们HR会快速给你答复. 互联网软件开发工程师岗位职责: 1.参与洋码头各个平台(www.ymatou.c ...

随机推荐

SignalR 教程二服务端广播
转帖官方教程:Tutorial: Server Broadcast with SignalR 2 http://www.asp.net/signalr/overview/getting-started ...
Oracle 创建触发器实现自增长
Oracle中没有主键,要实现自增长,需要创建触发器,每次插入数据的时候进行ID赋值. 环境:Oracle11,Navicat工具连接创建了一个表,字段如下(字段名,表名都需要大写,你小写了还无效. ...
direct path write 等待事件导致数据库hang
同事反应十几分钟前数据库好像挂起了一会,让我排查数据库是否存在什么问题. 第一反应看当前数据库还是否有什么等待事件,结果有direct path write等待事件. 于是抓了问题时间段20分钟的AS ...
jQuery 遍历 - children() 方法获取指定id下子元素的值
<a id="Aobj_2_2" class="" specid="2" specvid="2" href=&qu ...
ABAP术语-Technical Object
Technical Object 原文:http://www.cnblogs.com/qiangsheng/archive/2008/03/18/1111205.html Generic term f ...
爬虫——Scrapy框架案例一：手机APP抓包
以爬取斗鱼直播上的信息为例: URL地址:http://capi.douyucdn.cn/api/v1/getVerticalRoom?limit=20&offset=0 爬取字段:房间ID. ...
JQuery制作网页——第九章表单验证
1. 表单验证:减轻服务器的压力.保证输入的数据符合要求: 2. 常用的表单验证:日期格式.表单元素是否为空.用户名和密码.E-mail地址.身份证号码等: 3. 表单验证的思路: 1. ...
php的基础知识（二）
7.系统常量: 常量的定义:常量是程序运行的时候是不可以改变的量定义格式:define(‘常量名字’,‘常量的值’): 注意: ·不能重复定义 ·常量的名字最好用大写字母. ·常量的值只能是标量. ...
PHP读取excel
$file = '';//文件名称 $file_ext = explode('.',$file);$file_ext = $file_ext[1];$data['file_ext'] = $file_ ...
MFC非模态添加进程控件方法一（线程方法）
由于非模态对话框的自己没有消息循环,创建后无法进行消息处理.需要和父窗口共用消息循环.如果单独在子窗口进行控件由于自己没有单独的消息循环,更新是无法进行的. 如果在父窗口更新控件会造成程序假死.如以下 ...

前端开发工程师 - 01.页面制作 - 第3章.HTML