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

时间 2019-11-18

标签前端开发工程师页面制做 html 栏目 HTML 繁體版

原文原文链接

第3章--HTML

HTML简介

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

history：css

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

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

HTML文档：web

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

HTML文档头部：segmentfault

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

<title>...</title>app

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, 若是你认为本次测试成绩不理想，你能够选择再作一次。