4月2日学习成果
1 学习了网页的组成结构设计思路
1.1 网页的组成
由head 和body组成
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>标题</title></head><body><!-- 用户看到的内容 --></body></html>
1.2 网页中的代码解析
| 代码 | 解析 |
| ——————-|————————————|
|<!DOCTYPE html>| 告诉浏览器这是html的文档|
|<html>...</html>|根元素 HTML文档现在这里面|
|<html lang="en">|使用的语言|
|<head>...</head>|搜索引擎使用 设置编码，可视窗口|
|<meta charset="UTF-8" />|设置的编码集|
|<meta name="viewport">|可视区|
|content=width=device-width|内容是与设备同宽|
|initial-scale=1.0|缩放比例是1.0|
|<title>...</title>|标题|
|<body>...</body>|用户看到的内容|
|<!-- 用户看到的内容 -->|注释|
2 元素,属性与值与其它
- 2.1 元素分为空元素和非空元素 空元素是单标签 非空元素是双标签
- 2.2 属性和值
属性必须写到起始元素中
语法：属性名=”属性值” - 2.3 三大通用样式
id：唯一标识
class：类
style：样式
3 层级关系
正确嵌套，一层套一层 盒子模型
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>元素的标签,属性和值,正确的嵌套关系</title></head><body><!-- 元素之间应该保持正确的嵌套 --><form action=""><div><label for="email">邮箱:</label><!-- 元素值: 预定义值, 指定值, 布尔值,数值 --><input type="email" name="email" id="email" maxlength="100" required /></div><div><label for="password">密码:</label><inputtype="password"name="password"id="papassword"placeholder="至少8位"required/></div><div><button>提交</button></div></form></body></html>
4. 网页中的文本字符
- 多个空格,制表符,回车符,换行符,只识别一个空格
<,>,&等字符具有特殊意义,需要转义后才允许添加到 html 文档- 转义字符语法:
& + 字符实体名称 + ;, 如<,使用:<表示 - 常用转义字符表
| 序号 | 字符 | 描述 | 转义字符 | 实体编号 |
|---|---|---|---|---|
| 1 | ' ' |
空格 | nbsp; |
|
| 2 | < |
小于 | < |
< |
| 3 | > |
大于 | > |
> |
| 4 | & |
&符号 |
& |
& |
| 5 | " |
双引号 | " |
" |
| 6 | © |
版权 | © |
© |
| 7 | ® |
已注册商标 | ® |
® |
| 8 | × |
乘号 | × |
× |
| 9 | ÷ |
除号 | ÷ |
÷ |
5.规范
文件文件夹命名都小写
扩展名用html
用-链接文件名 不用下划线
6.url语法
http：//主机名/路径/文件名
绝对url：http://php.cn/courses/123.html
相对url：../123.html
