HTML基础

Web开发分成前端(HTML+CSS+JS)+后台(Java/PHP/.net/JS)

1. 前端基本概念

• 网页 == 页面
• 网站(知乎、豆瓣、、淘宝、天猫、京东、百度、hao123)

网站好比一本书，网页就是书当中的一页。

2. 工作基本内容

• 开发：用代码编写网页
• 发布：把网页放到网站(服务器 == 特殊的计算机)

3. 理解概念

• 服务器：提供计算服务的计算机（提供网站访问功能的计算机）。
• 客户端：连接到服务器，代理服务器提供功能的软件(QQ客户端、微信)。
• 浏览器：访问网站的显示网页的客户端。
  浏览器软件：
  谷歌：Chrome
  火狐：FireFox
  微软：IE6~IE11、Edge

4. 前端开发语言

编写网页使用的语言

|语言|作用|类比|
|:-|
|HTML|结构|毛坯房|
|CSS |表示|装修 |
|JS |行为|家电器|

5. HTML (Hyper Text Markup Language 超文本标签语言)

5.1 背景

• 标准版本：HTML4.01 HTML5
• 标准制定者：W3C

5.2 简介

• 超文本 --> 普通文本(由文字构成的文件)/超文本(图片、视频、音频、超链接、游戏、软件)
• 标签语言 --> 由标签/标记构成语言

5.3 标签语法

• 标签的基本写法：
  以<开始，>结束，中间书写英文关键字。
  成对标签(双标签)：开始标签与结束标签构成，结束标签比开始标签多一个/。
• 标签功能：
  在页面上是不显示的，指示浏览器如何显示标签里面的内容。
• 举例：

5.2 页面基本套路

    
        
    
    
        Hello World
    

注意事项：

1. 标签可以嵌套，但是只能包含嵌套，不能交叉嵌套。
2. 关键字可以全部小写()，也可以全部大写()，也可以大小混合()，但是通常使用全部小写。
3. html/head/body三个标签是可以省略的，通常，这三个标签必须写。

6 HTML标签

• 标题标签h1~h6
  效果：字体加粗，上下有空白行。从h1到h6字体从大变小。
  注意：在HTML如果使用没有定义的标签，标签会被忽略掉。

• 段落标签p
  效果：文字在同一个段落中，上下有空白行。
  注意：如果没有p标签，所有的文字默认在同一个段落中。

• 水平分割线hr
  效果：增加一条水平线
  注意：hr是单标签

• 无序列表 ul(unorder list) li (list item)
  ul效果：单独产生一个段落。
  li效果：在每个项目文字前加上了一个项目符号(小黑点)，并且每个项目前增加空白。

• 有序列表 ol(order list) li(list item)
  ul效果：单独产生一个段落。
  li效果：在每个项目文字前加上了一个项目符号(序号)，并且每个项目前增加空白。

注意：

1. li不要单独使用，需要与ul/ol成套使用。
2. 列表项目文本要放在li标签内部，不要在其他位置放置文本。

• 列表的嵌套：只需要把列表写在对应的li内部即可。
  无序列表嵌套时，项目符号会发生改变，从实心圆(disc)变成空心圆(circle)，最后变成实心方块(square)。

在window下默认扩展名是隐藏的，需要把扩展名显示出来。
Win7下：组织->文件夹与搜索选项->查看，在高级设置中，去掉[隐藏已知文件类型的扩展名]勾选，点击确定。win10可参考点击这里

• 字符实体/转移字符：显示页面中特殊符号。

|符号|字符实体|含义|
|:-|
|<|& lt;| less than|
|>|& gt|greater than|
|半角空格|& nbsp;|||

• 在标签中文本多个连续的半角空格只显示一个，全角空格不受影响。
  如何在段落中增加多个连续空格？

1. 使用全角空格
2. 使用字符实体

• 在标签中文本有多个连续回车换行显示一个半角空格
  如何在段落中增加回车？
  使用单标签


• 加粗标签 b (bold)
  效果：字体加粗

• 下划线标签 u (underline)
  效果：字体下划线

• 斜体标签 i (italic)
  效果：字体斜体

• 文本预处理pre
  效果：可以显示标签中文本中的多个连续半角空格和回车换行

---

小结

结构标签：html、head、body、title

• head标签主要给浏览器提供信息
• body标签主要负责在页面中显示内容

文本标签

• 标题h1~h6
• 段落p
• 文本预处理pre
• 水平线hr
• 回车br
• 无序列表 ul li
• 有序列表 ol li
• 定义列表 dl dt dd
• 字体标签 font
color 字体颜色
  size 字体大小(1~7)
  face 字体
• 加粗b 斜体i 下划线u

---

属性

• 语法：

<关键字 属性名="属性值">

<关键字 属性名="属性值" />

Sublime Text 快捷键

|快捷键|作用|
|:-|
|Alt+F3| 全选正当中当前选中的字段|
|Ctrl+Shift+g| 给当前选中的字段添加标签|

• 编码
• GBK/GB2312~ANCI -- 国家标准
• UTF-8 -- 国际标准

所有页面统一使用UTF-8编码
指定当前页面的编码方式：

问题：

• 如何使用记事本修改文件的编码方式？
• 如何使用SublimeText修改文件的编码方式？
• 页面出现乱码，如何修改浏览器显示页面的编码方式？

多媒体标签

• 图像/图片标签img
  属性

 src="图片路径"
 alt="图片说明"
 title="图片标题" 

• 路径：找到文件
• 绝对路径：从盘符开始直到文件名的路径。
• 相对路径：从当前文件出发找到相应的文件名的路径。
  当前路径：./
  上一层路径：../
  上上一层：../../
  上上上一层：../../../
  依此类推

路径中的斜线与反斜线

• / 通用的路径分隔符。适用于Windows / Linux / Mac
• \\ Windows专用的路径分隔符

注释

• 语法：

浏览器不作解释与显示处理

• 作用：

1. 代码说明
2. 使部分代码不被解释或者执行

SublimeText 添加与取消注释快捷键：Ctrl+/

超链接标签a

• 属性

    href="将要跳转到的网页路径"
    target="_self/_blank"

说明：

• _blank：在新的页面中打开要跳转的网页

• _self：在当前页面中打开要跳转的页面

• 文本超链接

说明文字

超链接默认效果：说明文字自带下划线，初始颜色为蓝色，点击时颜色为红色，点击之后为紫色。跳转到页面的开始部分。

• 图片超链接

    < img src="图片路径" />

• 锚效果：跳转到页面指定位置
  回到顶部

回到顶部

跳转到页面指定位置

1. 指定跳转的位置。
2. 添加超链接。
   例如：书签

• 邮件超链接

我的邮箱

表格table

• 表格默认效果：无边框、整体左对齐、文字左对齐
• table表格标签
  属性

  border 边框宽度
  width 表格宽度
  height 表格高度
  align="left/center/right" 表格整体水平(横向)对齐
  bordercolor 边框颜色(非标准属性)
  cellpadding 单元格边框与内容之间的间距
  cellspacing 单元格与单元格边框间距

• tr 行标签
  align="left/center/right" 行内文本水平(横向)对齐
• td 单元格标签
  align="left/center/right" 单元格内文本水平(横向)对齐
• th 表头单元格标签
  默认效果：文本加粗居中

单元格合并

• 跨列合并 colspan
• 跨行合并 rowspan

合并单元格的属性写在左上角的td里面，并删除多余的td

表格区域

• tbody：表格主区域(如果表格没有指定区域，默认所有的tr/td都属于tbody，并且会自动添加tbody标签)
• thead：表格头部区域
• tfoot：表格底部区域

tbody、thead、tfoot编码的顺序不会影响表格页面显示的顺序，即，thead永远显示在表格的开头，tfoot永远显示在表格的底部，tbody显示在thead与tfoot中间。

caption表标题标签

注意：除了caption，表格内部的内容，必须写在td标签内部，否则，显示到表格外部。

表单

• 作用

1. 收集数据
2. 向服务器提交数据

• 表单标签form
• 表单元素标签
• 输入框(默认为文本框) input
• 按钮 button

如何使文本框变成密码框？给input标签加上type="password"属性
如何使单选框/单选按钮实现单选功能？给同一组的单选框添加同名的name属性

• 提交按钮的实现方式：

1. button添加属性type="submit"

• 重置按钮的实现方式：

1. button添加按钮type="reset"

• 普通按钮的实现方式：

1. button添加按钮type="button"

• 图片按钮的实现方式：

1. < img src="图片路径" />

初始值

• 单选框初始值设置：添加属性checked="checked"
• 复选框初始值设置：添加属性checked="checked"
• 文本框初始值设置：添加属性value="任意文字"
• 下拉列表初始值设置：在对应的option标签添加属性selected="selected"
• 文本域初始值设置：在textarea标签内添加任意文字

在HTML5中给文本框和文本域提供了占位符属性placeholder，提示用户需要填写的内容。当用户填入内容时，提示信息消失，如果输入框内容为空的时候，提示信息会显示。