Head first HTML & PHP

深入浅出学习html+CSS

Posted by CHY on October 7, 2020

html学习

1. <html>标记:通知浏览器文件属于html文件。
2. <style>元素放置在HTML的头部中。其中type属性用来告诉浏览器所使用的样式种类。
3. <a>元素创建超文本链接到另外一个网页。
4. 网页构建流程
    * 构建粗略的设计草图
    * 通过草图绘制出略图
    * 从略图绘制出网页
    * 细节完善
5. <q>进行简短的引用;<blockquote>引用大段文字并进行独立显示。
6. 创建HTML列表需要两个元素,第一个元素用来标记列表项目;第二个元素决定创建列表的类型:有序还是无序。
7. <q>/<em>/<a>是内联元素,需要和其他内容一起跟随在文字流中。
8. 网页发布--web主机代理商
    * 找到一个主机代理商
    * 选择网站的名字
    * 寻找把文件从电脑传到主机的途径
9. FTP文件传输协议 SFTP安全文件传输协议
10. URL统一资源定位符
11. 定位默认文件,通常默认文件名为“index.html"
12. 相对路径只能用于链接同一网站内的页面,而URL通常用来链接到其他网站
13. <a>中title属性用于指定鼠标放置于链接上的显示信息
14. JPEG是一种"有损"格式(适用于照片和复杂图像),GIF通过压缩文件来减小尺寸,是种"无损"格式(适用于logo和简单文本图像)
15. <img>的alt属性用于指定图片不显示时的文本
16. 构建图像链接,在<a>元素中放置<img>元素
17. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
18. 块元素不能再内嵌在块元素中
19. XHTML是HTML的扩展版本,通过三个步骤即可将严格的HTML转化为XHTML,Tidy自动转换HTML到XHTML
    * 将DOCTYPE改为严格的XHTML 1.0
    * 添加xmlns属性、lang属性和xml:lang属性到<html>元素;xmlns指定html属于哪一种XML语言
    * 所有的空标记都应以"/>"结尾,而不是">"

CSS样式

1. 父元素中的子元素会从父元素中继承关于CSS样式的设置(可以设置属性上移)
2. 在子元素中重新设定属性的话会覆盖它继承的属性
3. CSS可以指定特定的类的相关属性,通过class属性设置
4. 用px、em、%或关键字定义font-size,em和%定义字体大小意味着字母的字体大小将是父元素字体大小的相对值

#### 盒模式
1. 从CSS的角度看,每个元素是一个盒子
2. 每个元素都可以看作盒子,盒子包括内容、补白、边框和边界
3. 结合类与盒模型进行设定
4. 每个元素只能有一个id,而且同一页面中不能有一个以上的元素用同一个id
5. CSS中设定类元素使用点号,id采用#
6. 链接多个样式表时,一个样式表会覆盖在它之前链接的样式表中的样式

div和span

1. div元素一般和id属性联合使用
2. div可以存在嵌套结构子div
3. <div>是块元素
4. 整个元素的宽度是不能设置的,整个元素的宽度是通过定义内容区、补白、边框和边界的宽度
5. <div>中text-align属性用于设置内容格式
6. <span>用于将内联内容分成不同的逻辑部分,<span>把块级的内容分成不同的逻辑部分
7. 对于需要强调某些单词,就用<em>;需要重点强调就用<strong>;仅仅是放置一些样式,使用<span>来进行设置
8. Pseudo-class伪类只存在于CSS样式表中,不存在于HTML文件中,是由浏览器来进行选择
9. 样式表的优先顺序:网页作者的样式、读者的样式、浏览器的默认样式
10. 层叠就是浏览器决定采用哪种样式的方法,根据具体度计算

页面布局和排版

1. 浏览器用流来布置页面上的XHTML元素,块元素从头流到尾,每两个元素之间有换行,内联元素在水平方向上一个接一个地流,从左上方到右下方。
2. 并排放置两个内联元素,边界会进行加和;并列放置两个块元素时,边界会进行重叠
3. float设置块元素的漂移
4. 冻结布局:利用div框架结构针对对应id改变其CSS布局
5. 凝胶物布局锁定了页面中内容区的宽度,但把它放在浏览器的中央,通过margin-right属性
6. 绝对布置对其他元素没有任何的影响,还是正常的流运行,当绝对布置多个元素时,重叠关系是通过z-index属性来进行设置的
7. 固定位置设置通过position属性设置为fixed来完成

网页表格制作

1. <table>元素制作表格,其中<tr>定义每一行,<td>定义每个单元格,<th>定义表头
2. summary属性定义表格摘要,并不会在网页中显示;<caption>定义表格的标题

交互活动–表单

1. <form>元素创建一个表单;<input>输入文本框元素;<textarea>输入多行文本;<select>与<option>元素为网页创建菜单控件
2. POST将表单变量打包后隐藏在后台发送给服务器;GET把表单变量打包,附加在URL末端然后向浏览器发送请求

各章要点复习链接

《Head First HTML与CSS、XHTML》第一章要点
《Head First HTML与CSS、XHTML》第二章要点
《Head First HTML与CSS、XHTML》第三章要点
《Head First HTML与CSS、XHTML》第四章要点
《Head First HTML与CSS、XHTML》第五章要点
《Head First HTML与CSS、XHTML》第六章要点
《Head First HTML与CSS、XHTML》第七章要点
《Head First HTML与CSS、XHTML》第八章要点
《Head First HTML与CSS、XHTML》第九章要点
《Head First HTML与CSS、XHTML》第十章要点
《Head First HTML与CSS、XHTML》第十一章要点
《Head First HTML与CSS、XHTML》第十二章要点
《Head First HTML与CSS、XHTML》第十三章要点
《Head First HTML与CSS、XHTML》第十四章要点