HTML基础
前端开发介绍
1、前端开发是什么?
- 创建Web页面或app等前端页面呈现给用户
- 核心 HTML、CSS、JS以及衍生技术框架
- 应用场景PC、APP、小程序、游戏、服务端
2、学习路线
- HTML 语法、语义、SEO基础
- CSS 语法、页面布局、媒体查询、CSS3
- CSS进阶 预处理器、框架、架构规范
- JS 语法数据结构 WebAPI ES6+ 模块化 Tyscript
- 构建工具 npm
- 框架 VUE React Angular
- 持续学习 Node.js 服务器渲染
3、互联网原理
-
前端三层 HTML(结构)、CSS(样式)、JS(行为)
-
多媒体内容:图片、视频、音频、超链接
-
互联网运行过程
客户端—>发送HTTL请求—>服务器
服务器—>HTTL响应---->客户端
服务器:包括处理器硬盘内存系统总线等,业务处理、稳定性、可靠性、安全性方面要求较高,存储数据响应请求并处理
(云服务器:简单高效安全可靠、处理能力可弹性伸缩的计算服务)客户端:用户使用的中断,最常用的app浏览器(谷歌,ie,火狐)
HTTP协议:超文本传输协议,客户端与WEB服务器之间的应用层通信协议
4、纯文本格式（HTML、CSS、JS）
- 只能保存文本，不保存其他格式或非文本内容，有利于网络传输
- 可以直接更改扩展名方式保存格式
- 纯文本格式文件可以使用任意纯文本编辑器
5、HTML理论
概念
- 超文本 用于链接图片、音频、视频、程序的文本
- 标记 写给浏览器的一种语法格式，实现特殊语义或显示内容
功能
- 标记给普通的文本添加语义，描述超文本内容，搭建网页基本结构
- 语义化：添加特殊语义的标记，方便代码阅读维护，有利于网络爬虫，提高SEO搜索引擎优化
细节
- HTML元素从开始标签到结束标签的所有内容，包括开始标签、元素内容、结束标签
- 标签级别
容器级：内部可以存放任意内容
文本级：只可以进行文本的写入 - 标签外的空白是忽略不计，元素内容中的空白会进行折叠显示
- 标签的属性：属性名：“属性值”的格式，多个则用空格分开
骨架
<html><head><titile></title></head></html>
-
titile页面标题，关键字作为引擎关键字，SEO搜索优化，作为收藏夹默认网页标题，网页增加titile内容精简，提取网页关键字
-
body来存放页面显示内容
DTD、命名空间、字符集
-
DTD 语法解析的参照标准
-
xml 可扩展标记语言，被用来传输和存储数据，lang来设置命名空间
-
字符集，定义了当前的网页所使用的字符编码，不要求速度使用utf-8，要求速度则使用gbk
6、具体标签
标题标签
<h1> </h1>
-
给标签元素内部元素添加语义，标题标签之间是不能嵌套的
-
h1标题的权重是最高的，一般来放我们最重要的内容，只能出现一个h1
段落标签
<p></p> <br/>
-
P标签给内容添加一个完整语义，不负责内容自动换行的样式
-
br标签强制性的换行符，是一个空元素
文本格式化
- 标签用于加粗 b标签
- 标签用于斜体字 i标签
- 着重文字，自带斜体效果 em标签
- 定义下划线 u标签
- 插入下划线 ins标签
删除线 del标签
图像标签
<img></img> 支持格式png、jpg、jif
-
src属性：图片链接路径
相对路径：从html文件本身触发，根据相对位置查找，分别有同级，子级，上级查找
绝对路径：从电脑盘符根目录开始出发查找，一般是图片的地址 -
宽度高度的显示，title：鼠标放在图片上文字显示，alt：无法正常显示图片提示文本
音频标签
<audio></audio> 支持格式mp3、ogg、wav controls=“controls”
视频标签
<video></video>支持格式mp4、ogg、webm
超级链接
<a></a>锚
-
url跳转到页面
-
target：定义链接文档在何处进行跳转，_self默认值(在当前窗口)_blank：新窗口
-
title:鼠标停留时的文字提醒
锚点跳转
- 页面内锚点跳转
<h2 id="html"></h2> ——<a href="#html"></a> <a name="html"></a> ——<a href="#html"></a> -
页面外指定跳转
设置锚点<a href=“跳转页面”#具体位置>链接到锚点
列表
无序列表
<ul><li></li></ul>
注意：ul只能嵌套li,li不可以单独存在，但是可以嵌套ul
有序列表
<ol><li></li></ol>
表示出来的有序号排列
定义列表
<dl><dt>关键词</dt><dd>描述</dd></dl>
<dd>是用来描述最近的<dt>,为容量级标签，内部可以放东西
最好每个dl中只添加一组dt和dd，便于后期管理
布局标签
div
可以放任意内容，经典的容器级标签，比较大范围
span
小区域，在不改变整体效果的情况下，辅助进行局部调整
表格基础
<table><tr><td>/<th></th>/</tr></table>
布局显示
单元格合并
- rowspan：跨行合并，上下的合并，最后给一个属性值表示跨的行列数
- colspan：行列合并，左右的合并
技巧：划分单元格所在行时顶变对齐的属于同一行
表单
表单域
相当于一个容器，用来容纳所有的表单控件和提示信息，通过他定义处理表单数据所用程序的url地址，传送数据到后台服务器
- 通过对应属性规定提交数据的方法和提交位置
-
action：url 指定接收并处理数据的服务器的url地址
-
method：get/post 用于设置表单数据的提交方式
-
name：自定义名称，规定表单的名称
提示信息
说明性的文字，提示用户进行具体填写操作
<input>
type属性值不同表示输入内容不同
- text单行文本值,value值是用来设置默认显示内容
<input type="text"> value="请输入">
- password字段会被掩码处理
<input type="password">
- radio为单选框(互斥关系设置相同的name属性)，checked是用来设置默认选择
<input type="radio" name="sex" checked="男">男
- checkbox复选框(分组采用相同的name属性)
<input type="checkbox" name="hobby">绘画
- file属性定义文件上传按钮，选择本地文件上传服务器,multiple是用来设置一次上传多个
<input type="file" multiple="multiple"/>
表单控件
表单功能项，单行文本输入，密码输入，按钮
- 按钮
button：普通按钮，没有任何特殊功能
<input type="button" value="普通按钮">
reset：重置按钮，form中内容清空，恢复默认
submit：提交按钮，将数据提交到form指定的后台服务器，并且清空默认
image：作为图片
-
文本域,可以输入多行文字
rows行属性值，显示最大行数，cols列属性值，显示每行最大字节数(1个汉字有2个字节)
下拉菜单
<select><option></option></select>
- 默认选择，给option添加selected属性，属性值为它本身
- optgroup标签对选项进行分组，介于两者之间，label=“分组名”进行分组，不可以进行选择
label标签
- (距离比较远)给表单设置id属性，将绑定内容写进label标签内，并设置for属性，属性值为id属性值
- (距离比较近)，直接将input标签内容写进label中，可以直接进行绑定
字符实体
- W3C中有具体对应选项
- 以&开头，以;结尾，一般使用实体名称
7、错题汇总
- 程序员将网页源文件上传到服务器进行存储
- HTML元素是从开始标签到结束标签的所有内容，包含开始标签、元素标签、结束标签
- 段落标签P是双标签，且为文本标签，但是内部可以放置图片
更多精彩：
CSS基础回顾