目录
1. 概念
静态网页：网页是写死的，不管谁在什么时候访问，都是一样的
动态网页：内容会依靠服务器端的程序来生成，不同人在不同时候访问，显示的内容都不一样，像现在的购物、新闻网站，会根据浏览记录来显示商品、新闻
HTML：超文本标记语言，是描述性语言，是网页的结构和内容，主要学习标签
CSS：层叠样式表，是给网页添加外观，主要学习选择器，属性
JavaScript：脚本语言，是网页的动作行为，动画，交互，主要学习基础语法，BOM,DOM
2. 基础
web开发本质：浏览器输入网址回车发生了什么
- 浏览器给服务端发送了一个消息
- 服务端拿到消息
- 服务端返回消息
- 浏览器展示页面
web本质：服务端，浏览器，文件
cs架构，bs架构
客户端和服务端，消息的格式是约定好的
HTTP协议：浏览器和服务器之间约定好的消息格式
3. HTML标签
<!DOCTYPE HTML>是文档声明，在第一行
<html></html>根标签，内容都在里面
<head></head>定义头部，常见的有<title>,<script>,<style>,<link>,<meta>
<body></body>定义内容，在浏览器显示，有<h1>,<p>,<a>,<img>,<input>
标签分类：
双标签，单标签<meta>
分类：
块级标签：display:block
h1~h6 div p hr li ol ul table form
默认占浏览器宽度一行，能设置长，宽，顶底
行内标签：display:inline
a u s i b span br em strong
根据内容决定长度，不能设置长和宽
行内块标签：display:inline-block
img input textarea select
在一行内，可设高，宽，顶底
display属性可转换
4. head标签
4.1 title标签
<title>Title</title>
4.2 meta标签
charset
<meta charset="UTF-8">编码格式http-equiv
向浏览器传递信息，与之对应的属性是content=变量值name
用于页面的关键字和描述，是给搜索引擎看的，内容也是content
4.3 其他
5. body标签
5.1 标题标签
h1-h6
5.2 段落标签
<p></p>
5.3 超链接a
不能设置高宽
百度 下载压缩包 联系我们 跳转到顶部 跳转到p1 内容
5.4 列表标签
- 我的账户
- 我的订单
- 退出
- a
- b
- c
5.5 盒子标签div
文档分区
5.6 图片标签img
在一行内显示，可以设置高宽，行内块标签
可以本地地址也可以网络地址
可以png,jpg,gif
5.7 其他特殊标签
海 燕
在苍茫的大海上，
狂风……
1<a> ©&¥®
5.8 表格
| 姓名 |
|---|
| 小强 |
| 哥 |
合并表格
在需要合并的第一个写上rowspan='n'，需要合并的单元格数，竖向合并 colspan，横向合并5.9 form表单
常用属性
- action，定义表单被提交时发生的动作，提交给服务器处理程序的地址
- method，定义提交方式
- get，默认值，明文提交，数据显示在地址上，数据最大2k
- post，隐式提交，不会显示在地址栏上，大小无限制
- enctype，表单的编码类型
- application/x-www-form-urlencoded 默认，允许普通字符，特殊字符，不允许提交文件
- multipart/form-data，允许文件，提交文件给服务器用这个，用post
- text/plain 只允许普通字符
- 表单控件
- textarea文本域，cols宽度，rows高度
- select和option选项框，size大于1是滚动条，默认是下拉条，selected预选中
- input
- type
- button 普通的按钮
- text 明文
- password 密文
- radio 单选
- checkbox，复选，checked默认选中 提交
- file 上传文件 期
- value 控件的值，要提交给服务器的数据
- name 控件的名称，服务器用
- disabled 禁用该控件
- label，关联文本与表单元素，点击文本时，如同点击表单元素一样
前后端有数据交互的时候用form表单
- 所有获取用户输入的标签都要放在form表单里面
- 提交数据是键值对，需要name
- 提交按钮，submit，清空按钮用reset
form表单实例
5.10 input
input系列:
- text
- value 设置默认值
- placeholder 设置占位内容
- password
- radio 单选框
- checkbox 多选框
- date 日期
- datetime 时间
- file 文件
- button 普通按钮,多用JS给它绑定事件
- reset 重置
- submit 提交
- 埋下伏笔:什么时候用
- textarea 大段文本
- select 下拉菜单
- option 具体的下拉选项
- optgroup 分组的下拉框
label
快捷操作
h1*4>a.c1[id=a$]{a标签$}a标签1
a标签2
a标签3
a标签4
div#di dic>p.c1*3 用alt可以实现多行一起操作
标签的嵌套规则
- 块元素可以包含内联元素或某些块元素
- 行内标签不能嵌套块级标签，只能嵌套内联元素
- h1-h6，p标签不能嵌套块级标签