Web标准的构成
结构、表现、行为三层分离。
html :超文本标记语言
作用:网页结构布局
css (Cascading Style Sheets)层叠样式表
作用:页面效果优化
Javascript
作用:网页动效与数据交互
为什么要使用web标准?
Web标准:让不同的浏览器按照相同的标准显示结果,让展示的效果统一。
html基本结构 都是拿来干嘛?
<!DOCTYPE html> <!-- 文档声明 html5版本 --> <html lang="en"> <!-- 表示当前文档使用的 超文本标记语言 html标签 lang="en" 英语--> <!-- 页面头部 --> <head> <meta charset="UTF-8"> <!-- 页面字符编码格式设置 万国码 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- ie浏览器兼容处理 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端视口适配 --> <title>Document</title> <!-- 页面标题 --> </head> <body> <!-- 页面身体:内容显示区域 --> </body> </html>
快捷键:shift+! 、 doc 、 html 出现html结构 ctrl +/ 注释
常用基本标签
标题 h 段落p 图片 img 超链接a 换行 br
有啥特点? h1~h6 p换行 img 链接 a 放链接页面调转 br强制换行
标题标签h
特点:
1、标签的文字都有加粗
2、标签的文字都有变大,从h1~h6文字逐渐减小 h1只能用一次
提高权重
3、每一个标题独占一行 块级元素
段落标签p
特点:
1、段落之间存在间隙
2、每个段落是独占一行
图片标签img
通过src属性引入到页面中显示
绝对路径:是指目录下的绝对位置,直接到达目标位置
相对路径:以当前文件资源所在的目录为参照基础,链接到目标文件资源 (或文件夹)的路径。
./
当前位置.../
上一级../ ../
上两级设置图片宽高 在实际开发中只单独设置
alt 替换文本
超链接a标签
点击之后跳转网页
href 路径
1、外部链接:互联网上的绝对路径 网络协议
https:/
2、内部链接:使用相对路径
本页面打开:target="_self" 默认覆盖本页面显示;新页面窗口打开: target="_blank"
换行标签br
单标签 强制换行
页面布局标签
列表 ul ol
无序列表<ul> 有序列表<ol>
有序的是有大写字母和小写字母、数字、罗马数字等,而无序列表是实心圆、空心圆、实心正方形。 但是共同点是都有前缀。
表格 table
th 表头 tr行 td 单元格
style="border-collapse: collapse;" 边框会合并为一个单一的边框。
合并单元格:rowspan 跨行合并 colspan 跨列合并
快捷键:ement语法
table>tr>th*6
兄弟关系 加号table>tr>th+td
表单 form
前后端数据交互 应用场景:登录、注册、搜索
语法格式: <form action="/login" method="get"></form>
action 表单交给了谁 method 设置的事表单提交的方式
get 、post 的区别 ?
get:提交的数据量要小于1024字节;post:传递的数据量不受限制
get所提交过程传输的数据会显示在地址栏里面,而post不会
get的提交方式所提交的数据,在服务器上是不需要保存的,而post的提交方式提交的数据服务器会永久保存.