A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

忽而半夏

初级黑马

  • 黑马币:48

  • 帖子:12

  • 精华:0

© 忽而半夏 初级黑马   /  2019-11-24 00:18  /  425 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

在黑马经过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”     生成一个颜色生成表单

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马