第七周 web前端基础（html+css）
Web开发之Web前端基础(HTML)开发技术概述
文章目录
- Web开发之Web前端基础(HTML)开发技术概述
-
- Web开发技术概述
-
- CS架构与BS架构
-
- CS
- BS
- 相关技术介绍
-
- Web前端
- Web后端
- HTML概述
-
- 开发工具
-
- 文本编辑器
- 集成开发环境
- 第一个HTML页面
- 基础语法
-
- 元素(Element)
- 标签(Tag)
- 属性(Attibute)
- HTML实体
- 色彩使用
- HTML文本与格式标签
-
- 行级元素和块级元素
-
- 行级元素（inline）
- 块级元素（block）
- 列表标签
- 超链接和iframe标签
-
- iframe
- 锚链接
- 媒体标签
- 表格标签\
- 表单标签\
-
- html5新增表单标签
- span&div
-
- span
- div
- HTML5语义化标签
- CSS入门
-
- 概述
- 基本单位
-
- 尺寸
- 颜色
- 基础语法
-
- 样式引入html中的方式包含三种
- CSS选择器
-
- **通配选择（*）**
- **id选择器（#id）**
- **类选择器（.class）**
- **元素选择器（标签选择器）**
- 子选择器（P > S ）
- 层级选择器（E E2）
- 分组选择器（s1,s2,s3...）
- 伪类和伪对象选择器
- CSS
-
- 选择器补充
-
- 选择器优先级
- CSS常用属性
-
- 尺寸
- 边框与背景
- 字体与文本
- 列表与表格
- 定位与盒模型
-
- 定位
- DIV+CSS布局
-
- 盒子模型
-
- Margin和Padding
- 盒子模型
- DIV+CSS布局案例
- JavaScript
-
- JS入门
-
- 概述
- JS和java的区别
- Javascript组成部分
- JS基础语法
-
- Javascript入门案例
- JavaScript在html页面中使用三种方式
- 数据类型
- 分支与循环
- 分支语句
- 循环语句
- 函数与事件
-
- 函数
- 事件
Web开发技术概述
CS架构与BS架构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GXwI5vs2-1597582850112)(D:\带班资料\2020\j2003\线下\part4-web前端\20200810\笔记\assets\1597025283914.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PYOG5mNc-1597582850114)(D:\带班资料\2020\j2003\线下\part4-web前端\20200810\笔记\assets\1597055386802.png)]
CS
Client/Server；客户端/服务器模式，在以前网络传输效率比较底下的时候，是CS架构软件盛行的时代，在这个时代，所有的软件使用都离不开客户端程序，即需要先从远程下载一个客户端安装包，在本地安装，然后才能够正常使用，对本机硬件要求较高。
优点：
- 响应速度快
- 对网络速度要求低
- 用户体验好
- 使用稳定
缺点：
- 对客户端硬件要求高
- 维护成本高，更新需要所有客户端都更新
- 跨平台性不好，针对不同的操作系统需要不同的客户端
BS
Browser/Server;浏览器/服务器模式，在当今高速网络带宽的时代，很多以往需要下载客户端才能正常使用的软件，只需要打开浏览器，绝大部分都可以实现；BS架构的软件项目对硬件要求不高，只需要使用的操作系统支持浏览器即可。
优点：
- 对硬件要求低
- 维护成本低，更新时只需要服务端更新即可
- 跨平台性好，只需要操作系统支持浏览器即可
缺点:
- 对网络要求高
- 用户体验不如客户端程序
相关技术介绍
Web前端
web前端技术主要应用于客户端浏览器，主要技术包含以下三大：
- HTML：HyperText Markup Language超文本标记语言
- CSS：Cacading Style Sheet 层叠样式表
- JavaScript：脚本语言
网页三剑客（Adobe）：
Dreamweaver、Flash、Firework
Web后端
web后端(java)技术也称之为服务端技术，主要包含:
- web容器：服务器(tomcat/jetty/jboss/weblogic)
- 动态网页技术JSP/freemark/thymleaf
- Servlet
HTML概述
HTML（HyperText Markup Language）超文本标记语言，主要应用于浏览器(网页的母语)，作为一个网页的结构设计语言；HTML不是一门程序设计语言，严格来说HTML是一种标记型语言，学习成本很低。
HTML目前主流的版本是HTML5,不是基于SGML的子集（html4.01和xml一样都是基于SGML）。HTML5的出现不是由W3C组织提出，而是由浏览器的厂商联盟(WHATWG)
开发工具
文本编辑器
- 记事本
- Editplus
- Notpad++
- Atom
- SublimeText
- VSCode
集成开发环境
- Webstome
- HBuiler/HubilderX(Eclipse)
第一个HTML页面
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
Hello Html!!!
body>
html>
具体解释:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是我的第一个HTML页面title>
head>
<body>
Hello Html!!!
body>
html>
基础语法
元素(Element)
元素用于结构化HTML文档，并告知浏览器如何呈现网页。一般来说，元素由首标签（start tag）、内容（content）和尾标签（end tag）构成。
例如:
<p>这是一个段落p>
<div>
<a href="http://www.softeem.com">软帝信息a>
<a href="http://www.ruandy.com">软帝联合a>
<a href="http://www.guaqivip.com">呱奇编程a>
div>
标签(Tag)
标签（tag）指示元素的起始与结束。所有标签都具有相同的格式：以小于号“<”开头，以大于号“>”结尾。 一般说来，有两种标签——首标签（start tag）（如）和尾标签（end tag）（如）。它们唯一的区别在于，尾标签多一条斜杠“/。你通过把内容放在首标签和尾标签之间来对内容进行标记。
例如:
<div>div>
<a>a>
单标签
<br/>
<hr/>
<img/>
<video/>
<audio/>
<input/>
属性(Attibute)
一般为开始标签之内，用于设置当前标签的相关的属性配置，通常由属性名以及属性值构成或者只有属性名，属性值使用双引号包裹，一个标签中可以包含多个属性，具体如下:
<a href="" target="_blank" title="百度一下，你就知道">百度a>
以上属性有:
- href
- target
- title
HTML实体
HTML中除了元素，标签和属性等元素构成外，另外还包含一些特殊的字符串(html实体)，比如：需要在页面上显示一个版权符号可以使用 ©
显示结果 描述 实体名称 实体编号
空格
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
￠ 分（cent） ¢ ¢
£ 镑（pound） £ £
¥ 元（yen） ¥ ¥
€ 欧元（euro） € €
§ 小节 § §
© 版权（copyright） © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
色彩使用
HTML中支持以下颜色表示方式
- 16进制颜色编码
- 颜色英文单词
- rgb值
HTML文本与格式标签
<h1>文本和格式标签h1>
<h2>文本标签h2>
<h3>3级标题h3>
<h4>4级标题h4>
<h5>5级标题h5>
<h6>6级标题h6>
<p>床前明月光p>
<p>疑似地上霜p>
<p>举头望明月p>
<p>低头思故乡p>
<b>这是一段加粗的文本b>
<i>这是一段斜体文本i>
<u>下划线文本u>
<del>删除线文本del>
<b>x<sup>2sup>b>
<b>x<sub>2sub>b>
<cite>引用方式的文本cite>
<em>强调的文本em>
<strong>加重的文本，一般为黑体加粗体strong>
<font size="20px" face="华文行楷" color="#0f0">过时的文本font>
<h2>格式标签h2>
<hr/>
<p>hello<br/>worldp>
<p>这是一段很长很长很长很长很长很长很长很长很长很长很长很长的文本，<nobr>这段内容不能换行nobr>p>
<blockquote>
HTML（HyperText Markup Language）超文本标记语言，主要应用于浏览器(网页的母语)，作为一个网页的结构设计语言；HTML不是一门程序设计语言，严格来说HTML是一种标记型语言，学习成本很低。
blockquote>
<pre>
这是预处理文本，一般用于显示代码块
pre>
行级元素和块级元素
html中的标签根据显示效果的不同划分为行级元素和块级元素
行级元素（inline）
行级元素也称之行内元素，即元素中的内容所占据的宽度由内容决定，后面跟随的行内元素会紧邻之前的元素显示。常见的行级元素：
- b
- i
- strong
- img
- a
- span
块级元素（block）
块级元素不论元素中内容的宽度是多少，始终会占满整个一行
- h1~h6
- p
- div
列表标签
在网页中经常会看到一些列表信息，比如菜单，数据列表等，html中的列表主要包含以下几类:
- 无序列表
- 有序列表
- 普通列表
具体使用如下:
<h1>列表标签h1>
<h2>无序列表h2>
<hr>
<ul>
<li>菜单项01li>
<li>菜单项02li>
<li>菜单项03li>
<li>菜单项04li>
<li>菜单项05li>
ul>
<h2>有序列表h2>
<hr>
<ol>
<li>注意事项li>
<li>注意事项li>
<li>注意事项li>
<li>注意事项li>
<li>注意事项li>
ol>
<h2>普通列表h2>
<hr>
<dl>
<dt>HTMLdt>
<dd>HyperText Markup Languagedd>
<dd>超文本标记语言dd>
<dt>CSSdt>
<dd>Cascading Style Sheetsdd>
<dd>层叠样式表dd>
<dt>JSdt>
<dd>JavaScriptdd>
dl>
<h2>列表嵌套h2>
<hr>
<ul>
<li>菜单项01
<ul>
<li>子菜单1-1li>
<li>子菜单1-2li>
ul>
li>
<li>菜单项02
<ul>
<li>子菜单2-1
<ul>
<li>子菜单2-1-1li>
<li>子菜单2-1-2li>
<li>子菜单2-1-3li>
ul>
li>
<li>子菜单2-2li>
ul>
li>
<li>菜单项03
<ul>
<li>子菜单3-1li>
<li>子菜单3-2li>
ul>
li>
ul>
超链接和iframe标签
html中使用a标签作为一个超链接标签，通过对a标签中的href设置关联的超文本资源可以实现页面跳转，另外也可以通过设置锚链接的方式实现页面内跳转，如:
<a href="http://www.softeem.com">软帝信息a>
<a href="page1.html" target="_blank">首页a>
<a href="javascript:alert('你真乖，叫你点就点')">点我试试a>
<a href="mailto:[email protected]">发送邮件a>
<a href="tel:110">拨打电话a>
<a href="#">当前页面a>
<a href="#part1">第一章 无名小子初出茅庐a>
a标签中包含以下几个常见的属性：
-
href：用于设置需要跳转的目标位置，包含如下一些内容
- 网页地址
- 当前项目其他资源文件路径
- 邮箱地址(如 href=“mailto:[email protected]”)
- 设置js的函数(如 href=“javascript:void(0)”)
- 设置为“#”
-
target：用于设置跳转的方式以及目标
-
四个固定的取值
- _blank:在新的标签页打开链接
- _self(默认):在本页中打开链接
- _parent:在父页面中打开链接（一般常见于框架页面内部）
- _top:在顶层页面中打开链接(一般用于多层框架嵌套内部)
-
自定义name
<ul> <li><a href="page1.html" target="content">page1.htmla>li> <li><a href="page2.html" target="content">page2.htmla>li> <li><a href="page3.html" target="content">page3.htmla>li> ul> <iframe src="" name="content" frameborder="1" width="100%" height="400px">iframe>
-
iframe
iframe是一个内嵌框架标签，在html5之前浏览器支持一系列的框架标签（frameset/frame/iframe），用于将网页结构划分为几个子页面构成；但是由于框架标签对于SEO不太友好，因此html5之后除了iframe之外，其余的全部被淘汰.
对于iframe的使用：
<iframe src="" name="content">iframe>
注意事项：
html5之后i’frame中的所有属性仅剩src受到支持，其余全部标记过时：
- framespacing
- frameborder
- scrolling
- width
- height
锚链接
a标签除了可以实现其他页面跳转之外，还能有支持页面内设置锚点，进行页面内跳转，具体使用方式如下:
<a href="#part1">第一章 无名小子初出茅庐a><br>
<a href="#part2">第二章 少年小有所成a><br>
<a href="#part3">第三章 大侠大杀四方a><br>
<a href="#part4">第四章 英雄迟暮，魂归故里a><br>
<h2><a id="part1">第一章 无名小子初出茅庐a>h2>
...
<h2><a id="part2">第二章 。。。a>h2>
...
<h2><a id="part3">第三章 。。。a>h2>
...
<h2><a id="part4">第四章 。。。a>h2>
...
媒体标签
HTML5中新增了很多媒体标签，同时也将4.01中部分标签标记为过时，比如bgsound，embed ,html5中主要支持的媒体标签包含以下：
- img 图片标签
- audio 音频标签
- video 视频标签
- canvas 画布元素
- svg 矢量图
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
<img src="imgs/girl.jpg" alt="这是一幅美女图片" width="200px">
<audio src="mp3/周杰伦-晴天.mp3" autoplay controls loop="-1">audio>
<video autoplay controls width="1000px">
<source src="video/4KHD_VP9TestFootage.webm">
<source src="video/ogg-19M.ogg">
<source src="video/test.mp4">
<source src="video/Psy%20-%20Gentleman.mkv">
video>