HTML5网页前端设计 基础入门（一）—— My note

程序学习元
320 阅读9分钟

一、网页制作知识

1、Web前端开发

(1)、Web基础

Web直译是蜘蛛网和网的意思，现广泛译作网络、互联网等。

网站开发技术分为前端和后端技术

  • Web前端技术有HTML、CSS、javas等
  • Web后端技术有CGI、PHP、JSP、Python、ASP.NET、Ruby等

主要技术有：HTML静态页面开发、CSS层叠样式表、JavaScript前端语言给网页增加动态和交互功能、PHP HTML内嵌式语言、JSP动态页面技术、python程序设计语言、ASP.NET使用嵌入网页脚本技术

表现形式

  • 超文本（HyperText）
  • 超媒体（UltraMedia）
  • 超文本传输协议（HyperText Transfer Protocol，HTTP)

环球网

对于普通用户，web是互联网使用的环境、氛围等

对于网页制作、设计、开发工程师来说是一系列技术的符合总称。

网页

网页：是网站中的页面，构成基本元素，实际上是一个纯文本文件，通常为HTML格式（文件扩展名为.html、 .htm、 .asp、.aspx、 .php）

网页可分为静态网页（没有后台和不含开发程序和不可交互网页）和（以数据库技术为基础）动态网页

Internet定义：是在全球范围，由采用TCP/IP协议的众多计算机网相互连接而成的最大的开放式计算机网络，是世界范围内网络和网关集合体，是一个开放的网络系统。

起源于，美国国防部高级研究计划局DARPA建立用于支持军事研究的计算机试验网ARPANET，1969年投入使用。

Web协议

  • HTTP
  • HTTPS
  • FTP

URL和域名

完整的URL

（Uniform Resource Locator）统一资源定位符

通常三个部分：协议代码、主机地址、具体的文件名

  • 协议
  • 服务器名称
  • 路径
  • 文件名

域名

是由一串用点分隔的名字组成的

Web标准不是某一标准，而是一系列标准的集合

Web标准定义网页主要三个部分

  • 结构
  • 表现
  • 行为

对应的标准三个

  • 结构化标准语言，主要由XHTML、XML和HTML5
  • 表现标准语言，主要CSS
  • 行为标准，主要包括对象模型W3C DOM 、ECMAScript等

(2)、Web运行

浏览器主要将用户选择Web资源呈现

主要组件七个方面：

  • 用户界面
  • 浏览器引擎
  • 渲染引擎
  • 网络
  • UI后端
  • JS解析器
  • 数据存储

2.认识HTML5

创始人：英国人蒂姆·伯纳斯·李 1982年

HTML：是Hypertext Markup Language缩写，中文为超文本标记语言

HTML是构成网页文档主要语言，HTML文档是由HTML元素组成描述性文本，HTML标签可以识别文字、图形、动画、声音、表格和链接等网页组成部分。

2014年HTML5标准规范

​

HTML5开发由三个重要组织：WHATWG、W3C、IETF

HTML5的优势：跨浏览器的兼容性、增强交互功能、更好的存储技术、用户优先、更简单的代码、通用访问

（1）、简单的HTML结构

​

二、HTML5基础

内容类型：text/html 扩展名：.html或.htm

版本兼容性：可以省略标记元素、具有布尔值的属性、省略引号

HTML5标记元素可分为六类：内嵌、流、标题、交互、元数据、短语

1.功能划分

基础、格式、表单、框架、图像、音频/视频、连接、列表、表格 、样式/节、元信息、编程。

基础元素：

定义文档类型 定义HTML文档 定义 文档标题 定义文档主体 to 定义HTML标题 定义段落 定义简单的换行
定义水平线 定义注释

格式元素：
定义只取首字母的缩写
定义缩写

定义文档作者或拥有者的联系信息 定义粗体文本 定义文本的文本方向，使其脱离其周围文本的方向设置

定义文字方向
定义大号文本

定义长的引用 不赞成使用。定义居中文本 定义引用(citaton) 定义计算机代码文本 定义被删除文本 定义项目 定义强调文本 定义文本的字体、尺寸和颜色 定义斜体字 定义被插入文本 定义键盘文本 定义有记号的文本 定义预定义范围内的度量 
 定义预格式文本  
 定义任何类型的任务的进度  
 定义短的引用  
 定义若浏览器不支持 ruby元素显示的内容  
 定义 ruby注释的解释  
 定义ruby注释  
 不赞成使用。定义加删除线的文本  
 定义计算机代码样本  
 定义小号文本  
 不赞成使用。定义加删除线文本  
 定义强调文本  
 定义上标文本  
 定义下标文本

表单元素：

定义供用户输入的HTML表单 定义输入控件 定义多行的文本输入控件 <button> 定义按钮 <select> 定义选择列表（下拉列表） <optgroup> 定义选择列表中相关选项的组合 <option> 定义选择列表中的选项 <label> 定义input元素的标注 <fieldset> 定义围绕表单中元素的边框 <legend> 定义 fieldset元素的标题 <isindex> 不赞成使用。定义与文档相关的可搜索索引 <datalist> 定义下拉列表 <keygen> 定义生成密钥 <output> 定义输出的一些类型

框架元素:

定义框架集的窗口或框架 定义框架集 定义针对不支持框架的用户的替代内容 定义内联框架

图像元素:
定义图像
定义图像映射
定义图像地图内部的区域
定义图形

定义 figure 元素的标题
定义媒介内容的分组，以及它们的标题

音频/视频元素
定义声音内容
定义媒介源

定义用在媒体播放器中的文本轨道 定义视频

链接元素:
定义锚

定义文档与外部资源的关系 定义导航链接

列表元素：

    定义无序列表
      定义有序列表
    1. 定义列表的项目 定义目录列表
      定义定义列表
      定义定义列表中的项目
      定义定义列表中项目的描述 定义命令的菜单列表 定义用户可以从弹出菜单调用的命令/菜单项目 定义命令按钮

表格元素：

定义表格 定义表格中的行 定义表格中的表头内容 定义表格中的主体内容 定义表格中的表注内容（脚注） 定义表格中一个或多个列的属性值 定义表格中供格式化的列组

样式/节元素：

定义文档的样式信息 <div> 定义文档中的节 <span> 定义文档中的节 <header> 定义section或page的页眉 <footer> 定义 section或page的页脚 <section> 定义 section <article> 定义文章 <aside> 定义页面内容之外的内容 <details> 定义元素的细节 <dialog> 定义对话框或窗口 <summary> 为<details>元素定义可见的标题

元信息元素:

定义关于文档的信息 定义关于 HTML 文档的元信息 定义页面中所有链接的默认地址或默认目标 定义页面中文本的默认字体、颜色或尺寸

编程元素:

2.HTML5元素属性

公共属性可分为：基本属性、语言属性、键盘属性、内容属性、延伸属性等。

基本属性：

class 定义类规则

id 定义元素唯一标识

style 定义元素的样式声明

未拥有基本属性：

html、head 文档和头部基本结构

title 网页标题

base 网页基准信息

meta 网页元信息

partam 元素参数信息

script、style 网页脚本和样式

语言属性：

lang 定义元素的语言代码和编码

dir 定义文本的方向

键盘属性：

accesskey 定义访问某元素的键盘快捷键

tabindex 定义元素的TAB键索引编号

内容属性：alt、title、longdesc、cite、datetime

全局属性：指可以对任何元素使用的属性
accesskey 规定激活元素的快捷键
class 规定元素的一个或多个类名（引用样式表中的类）
contenteditable 规定元素内容是否可编辑
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示data-* 用于存储页面或应用程序的私有定制数据
dir 规定元素中内容的文本方向
draggable 规定元素是否可拖动
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接

hidden 规定元素仍未或不再相关
id 规定元素的唯一id
lang 规定元素内容的语言
spellcheck 规定是否对元素进行拼写和语法检查
style 规定元素的行内 CSS 样式
tabindex 规定元素的 tab 键次序
title 规定有关元素的额外信息
translate 规定是否应该翻译元素内容

结构元素：

article：代表文档页面或应用程序中独立完整的可以被外部引用的内容，可嵌套使用，也可用来表示插件内嵌在页面中一样。

section：用于对网站或应用程序中页面上内容进行分块

nav：是一个可以用作页面导航的链接组，导航元素链接到其他页面的其他部分，一个页面可以拥有多个nav元素，menu元素不可代替nav元素。

aside：表示当前页面或文章的附属信息部分

time：代表24个小时的每一时刻，它表示时间时允许有时间差，时一个微格式。

header：一种具有引导和导航作用的结构元素，通常用来放置内容的标题

hgroup：是将标题及其子标题进行分组的元素

footer：可以作为其父级内容区块或是一个根区块的脚注，信息等

address：在文档中呈现联系信息

3.超链接

是网页必不可少的部分

绝对路径：指文件的完整路径一般用于网站的外部链接

相对路径：相当于当前文件的路径

元素是超链接，如未设置href属性，则是超链接的占位符，从一张页面链接到另一个页面

​

定义表格标题
定义表格中的表头单元格
定义表格中的单元
avatar
文章
阅读
粉丝