黑马程序员技术交流社区

标题: 技术贴 [打印本页]

作者: 忽而半夏 时间: 2019-11-24 00:18
标题: 技术贴
在黑马经过20多天html5+css的学习，已经可以独立的写出一个完整的静态页面，虽然有点慢，但还是感觉每天过的很充实，虽然学习了不到一个月，却比我在大学半年学到的东西还要多。
Html阶段
什么是网页？
网页是指在因特网根据一定的规则展示特定内容的数据，就是html文件;
网页的构成：
图片，文字，超链接，声音，视频等元素组成
什么HTML？（重点）
超文本标记语言，不是编程语言，是用来描述网页的一种语言，是以标签格式组成的一种标记语言
网页形成的过程
前端人员开发代码 --- 浏览器显示代码（解析、渲染）---- 生成web页面
浏览器和浏览器内核（记住）
常见的浏览器内核和常见5大浏览器
IE内核：Trident       火狐内核： Gecko
苹果内核：Webkit       谷歌/欧朋：Blink
内核的作用：读取网页的内容；
注意：实际开发中移动端的浏览器使用的内核都是Webkit
web标准
web标准： web标准是由W3C组织和其他标准化组织制定的一系列标准的集合
为什么需要web标准？
由于浏览器的内核不同，解析代码时候可能会不统一，我们可以通过web标准规范各大浏览器的解析规范，达到元素最终显示的样式统一；
web标准的组成（死记硬背）
结构标准 html
表现标准（样式标准） css
行为标准 javascript
HTML语法规范
HTML标签是由尖括号<>包围的关键字
标签的分类
HTML标签通常有双标签和单标签两种
成对出现的 --- 称为双标签 ,一个开始标签一个结束标签; 例如：<html></html>
单独出现的 --- 称为单标签，只有开始标签没有结束标签；例如：<br />
标签关系：
分为包含关系和并列关系
包含关系（父子关系）:有父子级嵌套关系的盒子
并列关系（兄弟关系）:并列的兄弟关系；
表单域
1、作用：在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
2、默认属性：
action=“url地址” -----  用于指定接收并处理表单数据的服务器程序的url地址。
method=“ 提交方式”  ---- 取值 get/post，get是明文提交，post是密文提交；
name=“名字”  设置不同的取值名称用于后台提交分类入库；
注意：一个页面中可能会出现多个form标签，我们需要用添加name属性设置不同的表单名称来区分；
  <form action="" method="post" name="表单名称1"></form>
  <form action="" method="post" name="表单名称2"></form>
Css的概述（作用）：
Cascading Style Sheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化；
使用css的价值：
能够将结构html和样式css分离书写，简化代码，提高可阅读性；
Css的语法结构
选择器 { 属性1:属性值; 属性2:属性值;…… }
Css的书写位置
目前我们将css书写在一对style标签中，放在head标签中title标签下面
注意：css属性和属性值之间要用冒号:连接，每一个属性和属性之间要用封号隔开；
文字属性
font-family文字字体，
取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推；如果是汉语的文字或者多个英文单词要用英文状态的引号引起来；font-family:Arial,”Microsoft Yahei”，“微软雅黑”；
font-size文字大小，
常用的单位是px像素；
font-weight字体粗细
加粗：font-weight:bold;    font-weight:700;
不加粗：font-weight:normal; font-weight:400;
font-style字体样式
倾斜：font-style:italic;  不倾斜：font-style:normal;
实际开发中我们一般不会设置文字倾斜，但是我们需要将倾斜标签em和i标签默认的倾斜设置为不倾斜；
字体的综合写法font
font：是否倾斜是否加粗文字大小/ 行高字体；
综合写法注意:
   使用font的综合书写的时候一定要按照顺序书写，属性之间用空格隔开，如果没有的属性可以省略不写，文字大小和字体是必须要书写的；
   实际工作中一般只用：font:文字大小字体；
清除浮动
为什么清除浮动
用浮动布局的时候我们必须要嵌套一个父级盒子，分为以下两种情况：
1、有些父级盒子能够设置固定的高度，一定要设置；
2、有些页面由于页面的需要不能设置高度，所以子元素浮动之后脱离了文档流，父级盒子不会被撑开，会影响我们后面的布局，所以要清除浮动的影响；
清除浮动的方法
清除浮动的方法：额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动；
额外标签法：
在浮动元素的末尾添加一个空的标签，也就是找到最后一个浮动的子元素，紧跟着在后面添加一个div盒子设置清除浮动的样式clear:both;
Html5新增的input控件
H 5新增的常用的input标签，改变不同的type值来实现
type=“email”    限制用户输入的必须是Email邮箱
 type=“url”    限制用户输入的必须是URL类型
type=“date”    用户点击弹出对应的日期设置控件
type=“time” 用户可以设置对应的时间
type=“month” 用户点击弹出对应的月份设置控件
type=“week”  用户点击弹出对应的周设置控件
type=“number” 限制用户输入的必须是数字l类型，字母e除外
type=“tel”       限制用户输入的必须是电话号码
type=“search” 搜索框功能
type=“color”    生成一个颜色生成表单

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2