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>
是用来设置表头的,默认有CSS样式
布局显示
单元格合并
- 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基础回顾