1.网页的构成
1.1.1 现在的软件开发的整体架构主要分为B/S架构与C/S架构：
-
B/S：浏览器/服务器
-
C/S：客户端/服务器
客户端：需要安装在系统里，才可使用 浏览器：浏览网页，读取HTML并显示 服务器：处理浏览器的请求
1.1.2 B/S 与 C/S优劣
-
b/s只要能上网就能使用，因为基本每台电脑都会有浏览器，维护方便。
-
c/s必须安装在系统中，安装成功才可使用。在新的系统中没有安装不能使用，便携性差，维护成本高。
1.1.3 网页
浏览器中显示的内容，浏览器是网页的展示器。编写好的网页，放在浏览器中即可运行。编写网页我们使用的就是HTML语言。
1.2 网页的构成
| 摘要 | 说明 |
|---|---|
| 结构(HTML) | HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 |
| 表现(CSS) | CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 |
| 行为(JavaScript) | JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有购物网站中图片的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的 |
2.HTML简介
HTML基础
https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics
2.1.HTML简介
-
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
-
超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素
-
HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言
-
标记语言是一套标记标签 (markup tag)，由一组<>包围的关键字
-
HTML网页的后缀名一般为.html
2.2.常用主流浏览器
-
谷歌浏览器(chrome)： 浏览器使用配额最高的一款浏览器。占有份额百分之四十以上。速度快。对HTML5支持最好。
-
火狐浏览器(firefox)：小巧方便快捷。对HTML5支持也很好。
-
欧朋浏览器(opera)：速度快，但是其使用起来有很多的不方便之处，很多播放器都要其内部的专门的插件。并且下载插件不支持中文界面，使用起来尤为的不方便。
-
IE浏览器(IE)： windows系统自带的一款浏览器。兼容性最差，这源于微软的垄断性质。市场份额逐年下降
3.HTML语法
3.1.HTML文档基本结构
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- 这里是html注释 -->
hello world!
</body>
</html>
HTML语言不区分大小写。
meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
更多meta标签的知识可以参考这个博客：HTML meta标签总结与属性使用介绍
3.2.head部分的HTML标签
1.标题标签
<title>我的第一个html文件</title>
<!-- title标签会显式在选项卡位置 -->2.meta标签
<meta charset="UTF-8" /> <!-- 设置本文档字符编码 -->3.3.body部分的HTML标签
3.3.1.常用的HTML标签
1. 标题标签（块级标签：独占一行）
<h1>这是一级标题标签</h1>
<h2>这是二级标题标签</h2>
<h3>这是三级标题标签</h3>
<h4>这是四级标题标签</h4>
<h5>这是五级标题标签</h5>
<h6>这是六级标题标签</h6>2. 段落标签（块级标签：独占一行）
<p>这是一个段落标签</p>3. 换行标签（单标签）
<p>这是一个段落标签。<br>这个段落的内容是：如何更好的学习html</p>4. 无序列表
<ul type="square">
<!-- 定义导航栏 -->
<!-- ul unorder list无序列表 -->
<!-- li list item -->
<li>网页</li>
<li>新闻</li>
<li>视频</li>
<li>贴吧</li>
</ul>5. 有序列表
<ol>
<li>HTML语言</li>
<li>CSS样式表</li>
<li>javaScript语言</li>
</ol>6. 图片标签（内联标签：不独占一行）（单标签）
<!--
图片标签属性：
alt:图片无法显示时显示的描述性文字
src:图片的地址（或路径）。这里分为相对路径和绝对路径。
title:鼠标放在图片上时显示的描述性文字
-->
<img src="img/pic.jpg" alt="航拍崇明东平国家森林公园" title="点击查看图片来源">图片素材链接 html中的相对路径与绝对路径
相对路径：以当前文件所在路径为基准
./ 表示当前文件所在目录
../ 表示上级目录
比如当前文件夹下有个图片pic.jpg，则可以使用./pic.jpg的方式引入图片
其中如果表示当前目录下的某个文件./可以省略，所以上面的写法也可写成pic.jpg
绝对路径：
本地绝对路径：
盘符:\目录1\目录2\文件名
实际开发中不会使用这种方式
网络绝对路径：
http://ip:端口号/工程名/资源名
7. 超链接标签（内联标签：不独占一行）
<a href="http://www.baidu.com" target="_blank">跳转百度首页</a>-
href：指向一个链接地址
-
target：定义被链接的文档在哪里显式
-
"_self"：在当前窗口打开链接网页（默认）
-
"_blank"：在新的窗口打开
-
注意：a标签中可以放置任何可视标签，比如：img、h1、p等。
使用超链接实现锚点跳转
<!-- 什么是锚点： 当一个页面的内容过长时，浏览起来就会非常的费劲，需要不停的来回拖动。 解决方案是：可以在页面上的某个内容处设置锚记，然后使用超链接快速跳转到此处。 所以说：锚点类似于书签的功能。 -->
<a href="#shuqian">书签</a>
<p>页面内容1</p>
<p>页面内容2</p>
<p>页面内容3</p>
<p>页面内容4</p>
<p>页面内容5</p>
<p>页面内容6</p>
<p id="shuqian">页面内容7</p>
<p>页面内容8</p>8. 转义字符
-
在HTML中想使用多个空格，编辑代码的时候直接敲很多空格不行
-
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签的起始和结束标志
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| © | 版权 | © | © |
说明1：如需显示小于号，我们必须这样写：< 或 < 说明2：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）
9. 分割线标签
<hr />标签在 HTML 页面中创建水平分割线。用于分割内容、文章的小节。补充说明： 块级元素：各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。width、height、padding、margin有效。 行内元素：在一条直线上排列，都是同一行的，水平方向排列。设置width、height、padding、margin无效。
可替换元素的介绍：链接 常见的可替换元素：img|input|select|textarea|button等 要注意上面提到的这几个元素是属于行内元素
3.3.1. 表格标签
表格标签多用于显示表数据。基本结构如下：
<!--
表格标签：
table：整个表格的最外层标签
tr：行标签 row
th：表格标题标签 head
td：列标签，一个td，就是一个单元格
表格标签属性：
border：边框宽度
-->
<table border="1">
<tr>
<th>第一列</th>
<th>第二列</th>
</tr>
<tr>
<td>这是第一行第一列</td>
<td>这是第一行第二列</td>
</tr>
<tr>
<td>这是第二行第一列</td>
<td>这是第二行第二列</td>
</tr>
</table>表格合并：
-
colspan：合并列 column
-
rowspan：合并行
<table border="1">
<tr>
<td colspan="2">这是第一行第一列</td>
<td>这是第一行第三列</td>
</tr>
<tr>
<td rowspan="2">这是第二行第一列</td>
<td>这是第二行第二列</td>
<td>这是第二行第三列</td>
</tr>
<tr>
<td>这是第三行第二列</td>
<td>这是第三行第三列</td>
</tr>
</table>3.3.2. 表单标签
表单是用户和应用程序交互的工具
3.3.2.1表单中的常用控件
3.3.2.2. form标签
<!--
form是表单最外层标签。
action属性：提交服务器地址
method属性：提交方式：get、post
-->
<form action="XXXX" method="get">
… … …
</form>3.3.2.3. 其他标签
-
文本框
<!-- placeholder属性为HTML5新增属性：提供可描述输入字段预期值的提示信息 -->
<input type="text" placeholder="用户名" value="zhangsan" />-
密码框
<input type="password"/>-
单选按钮
<input type="radio" name="sex" value="0" checked="true"/>男
<input type="radio" name="sex" value="1"/>女-
复选框
<input type="checkbox" name="like" value="0" checked=" true" />读书
<input type="checkbox" name="like" value="1" />体育
<input type="checkbox" name="like" value="2" />游戏-
下拉列表
<select name="nationality">
<option value="0" selected="true">中国</option>
<option value="1">美国</option>
<option value="2">英国</option>
</select>-
文件域
<input type="file" name="files" />-
文本域
<textarea name="brief" rows="5" cols="30">--这里输入个人简介--</textarea>-
提交按钮
<!-- 将表单全部内容，提交给action属性指定的服务器。一个表单都应该有一个提交按钮。-->
<input type="submit" value="提交" />-
重置按钮
<input type="reset" value="重置" />3.3.2.4. 表单元素中的一些属性
<!--
readonly： 不可编辑,但可以选择和复制;值可以传递到后台
disabled： 不能编辑,不能复制,不能选择;值不可以传递到后台
checked： 设置单选按钮和复选按钮的默认选中项
selected： 设置下拉列表option的默认选中项
注意：以上都属于布尔类型的属性，布尔类型属性都有以下三种写法：
checked="true"
checked="checked"
checked
这三种写法的效果都是一样的。
-->
<input type="text" name="username" readonly/>
<input type="text" name="username" disabled/>3.3.3. 容器标签div和span
div标签：块级标签（独占一行），默认是没有视觉上的效果，一般使用CSS来设置样式 span标签：内联标签（不会独占一行），默认是没有视觉上的效果，用CSS来设置样式
<div>
<h1>html语言</h1>
<p>html语言是超文本标记语言</p>
</div>
<p>今天气温<span>40</span>度</p>3.3.4. HTML5新增语义化标签
<header></header> <!-- 页眉、头部 -->
<footer></footer> <!-- 页脚、底部 -->
<nav></nav> <!-- 导航 -->
<section></section> <!-- 区块 -->
<article></article> <!-- 文章、博客、说明 -->
<aside></aside> <!-- 侧边、边栏 -->
692
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
