Html5/css3
一、 Html：超文本标记语言，搭建页面骨架
超级文本：.txt 文本，字符，图片，视频，音频，超链接，地图，统计图…
标记语言
<h1>
hello world
</h1>
<p>
this is a para...
</p>
特点：
1. 语法简单
2. 容量小
3. 功能强大
4. 字符
二、计算机网络
http协议 （B/S）：超文本传输协议
url：统一资源定位符
作用：定位网络中唯一的一个资源
三、 Html编程
1，编写html代码（客户机）
2，测试html代码 (客户机，浏览器)
3，部署发布
四、Html版本
Html4
XHtml
H5
三个角色：
1. w3c 标准
2. 程序员
3. 浏览器厂商
五、 H5与H4区分
1，结构
2，兼容性
h4兼容性更好一些
h5 主要用于webapp的开发
3，新增了很多新特性
语义化标签
表单input新增了type
画布 cavas
本地存储
缓存
定位
…
六、 html的主体结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个网页</title>
</head>
<body>
<h1>one</h1>
<div>first</div>
<p>hello</p>
</body>
</html>
1，head
头部，不会显示到浏览器视口中
设置，配置
告诉给浏览器，我当前这个文档是使用utf8编码
nihao 汉语拼音
hello 英语
编码：编辑器(sublime utf-8)
utf-8 万国码
GBK 国标码
Big5 繁体字 （环球新闻导报社）
解码：浏览器
<link rel="stylesheet" href="style.css">
<style>
css
</style>
<script src="index.js"></script>,
2，body
显示（架构，填充物）
七、语法
1，注释
记录编程思路
增加代码量（行）
2，元素
<head>
<title>hello world</title>
</head>
组成：开始标签
子元素/内容
结束标签
3，属性
<div 属性名=属性值 属性名=属性值>helloworld
属性一般添加在开始标签内，属性名与属性值通过’='隔开，属性与属性通过空格隔开
3.1 核心属性
绝大多数元素都可以添加的属性
id ：唯一
class：分类
<div class="box aaa">box1</div>
<div class="box bbb">box2</div>
<div class="box">box3</div>
title：描述
style：样式（取值为css规则）
css规则键值对组成，键与值之间通过冒号隔开，规则之间通过分号隔开
style=“color:#333;background:#fff”
3.2 特有属性
某一些元素才可以添加的属性
img
src、alt
a
href、target
…
3.3 自定义属性（h5）
data-xxx
<div data-name='one'>
</div>
八、 元素
1. 块元素（box）语义化
用于搭建页面框架
特性：
1) 独占一行空间
2) 默认宽度为父元素的100%,默认高度由子元素或者内容决定
3) 可以为块元素指定宽度和高度
div 无意义的块元素
h1~h3 标题
margin
font-size
font-weight
p
margin
ul,li
margin
padding
list-style
ol,li
margin
padding
list-style
dl,dt,dd
dl - margin
dd - margin
html
body
margin
h5新增的语义化标签(样式与div类似)
header
nav
footer
address
article
section
aside
2. 行内元素（inline）
用于页面填充或者装饰
1)特性：
多个行内元素共享一行空间
默认宽高都由内容决定
不可以指定宽高
行内元素中不可以嵌套块元素
2)元素
1，span 无意义的行内元素
2，a 超级链接(默认事件) open link
href="" 跳转的路径
锚点
url
相对路径
绝对路径
mailto：打开邮件系统
…
3，img 图片
src
与a标签中href属性类似
url
相对路径
决定路径
4，alt
图片找不到的时候的文本替换
5，装饰类型 行内元素(逐步淘汰)
strong：强调加粗
b：加粗
em：强调
i：倾斜
del：删除线
sub/sup：下标/上标
…
3. 元素使用策略
总体策略：先使用块元素搭建页面框架，再使用行内元素填充页面。
列表性质用 ul,ol,dl
标题性质用 h1~h3
段落 p
不知道用什么的时候使用div
4. 功能性标签
1）表格（展示数据列表）
table
属性：width border cellspacing cellspading
caption 标题
thead 表头(属性: align )
tbody 表体（属性： rowspan合并行,colspan合并列）
tfoot 表底
注意：
表格中每一行的列在计算后列数应该相等
2）表单（获取用户输入）
注意：
1. 所有的表单元素,都必须添加name属性
input
2. 不可输入但是可以选择的表单元素，一定要添加value值；可输入的表单元 素的value为用户输入的值
<form action="http://192.168.0.100:8080/sms/register.action" type="" enctype="">
</form>
form的属性
action 后台接口地址
type http协议请求方式
get 参数拼接在浏览器的地址栏 url?k=v&k=v
请求报文格式：
GET /sms/register.action?name=terry&password=123
Content-size:12
user-agent:mac safari
post 参数放到请求报文请求体中进行传递
请求报文格式：
GET /sms/register.action
Content-size:12
user-agent:mac safari
name=terry&password=123
查询字符串：
enctype:‘application/x-www-form-urlencoded’
username=terry&passwd=123321&gender=1&status=1
js编程
json
‘{“username”:“terry”,“password”:123321}’
表单元素
1. input
单行文本框
<input type="text">
密码框
<input type="password">
单选按钮
<input type="radio">
复选按钮
<input type="checkbox">
附件
<input type="file">
提交按钮
<input type="submit">
h5拓展：搜索框，日期框，数字框，email框…
<input type="search">
<input type="date">
<input type="number">
<input type="email">
input的属性
type
name 参数的key(不能缺省)
value 参数的value(按钮的时候不能缺省)
placeholder 提示语
checked 用在单选按钮和复选按钮中表示默认选中
selected 用在下拉菜单中表示默认选中
【注意】：checked和selected可以为单值属性
2. select
下拉菜单
<select name="shenfen">
<option value="shanxi">山西</option>
<option value="jiangxi">江西</option>
<option value="甘肃">甘肃</option>
</select>
select中的子元素一定为option,option中一般要添加value表示当选中该元素的时候，select的参数值为该value值,option中的value值可以不设置，那么value默认为文本值。
-
textarea 多行文本域
<textarea name="" placeholder="" cols="30" rows="10"></textarea> -
插件（日期选择，地址选择，富文本）
实体
空格
大于号 >
小于号 <
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
