HTML5入门最最基础篇
2016-11-09 本文已影响53人
_心暖
新手入门记得笔记的可能不如某些大神的意 请勿喷 各自有各自的学习习惯 能进步就👌
--原iOS程序猿一枚 坐标北京 如有误人子弟之处 敬请各位大神指点
网页的组成
一个具有功能的完整网页,一般由三个部分组成
- 1□HTML
✅网页的具体内容和结构
- 2□CSS
✅网页的样式(美化网页最重要的一项)
- 3□JavaScript
✅网页的交互效果,比如对用户的鼠标事件做出相应
HTML全称是HyperText Markup Language 超文本标记语言
注 : HTML5中新增了27个标签元素,废弃了16个标签元素,主要包括:结构性标签,集块性标签,行内语义性标签,交互性标签
一个基础的网页结构
<!DOCTYPE html> DTD声明 ! 不要忘 H5版本的声明 不属于标签`
<html lang="en"> 本网页是否自动转换英文
<head>
<meta charset="UTF-8"> 编码格式
<title>这是标题标签</title>
</head>
<body>
<div>常用标签</div> 空白标签
<h1>我是最大的</h1> h1 ~ h6 h1最大
</body>
</html> 是根标签
- 具体各种标签的功能请去http://www.w3school.com.cn网站 各种姿势的标签都有,标签的那就这样吧,某些标签的大小值是由百分比与PX像素值组成。
CSS
CSS的全称是Cascading Style Sheets , 层叠样式表,它是用来控制HTML标签的样式,在美化网页中起到非常重要的作用。
CSS的编写格式是键值对形式. 冒号左边是属性名,冒号右边是属性值。
CSS的三种样式
- 1.行内样式:(内联样式)直接在标签的style属性中书写 。
例: <body style = "background-color:red;font-size:25px;border: 5px solid red">
注: 边框属性默认三个值,一个是宽度,样式(虚线,实线,颜色)。
- 2.页内样式:在本网页的style标签中书写
<style>
body{
color:red;
}
</style>
注: style标签写在<head>里面拿到需要修改的标签名的.
- 3.外部样式:在单独的CSS文件中书写,然后在网页中使用link标签引用
<link rel = "stylesheet" href = "index.css">
//stylesheet是层叠样式表的意思,index是文件名.也是需要写在<head>里面
样式的规律:CSS遵循就近原则,叠加原则.(那个样式离内容近用那个,如果你有,我就用你的.你没有我在选择别的)
CSS两大重点
CSS常用选择器
标签选择器 :根据标签名找到标签
类选择器 :可以给多个使用 class = "test1" 设置标签时.test{ font-size:20 }
ID选择器 :独一无二的, id= "main" 设置标签时#maim{ font-size:20 }
并列选择器 : '或 ' div ,.height{ font-size:20 }用于多个标签设置相同的内容
符合选择器 : '与' div.height { font-size:20 }用于精准定位标签
后代选择器 : div p { font-size:20 }用于选择父类中的子类
直接后代选择器:div > p { font-size:20 } 只管自己里面的子类标签
CSS:遵循:
1.相同级别的选择器遵循:a > 就近原则 b > 叠加原则
2.相同级别的选择器遵循: ID选择器 > 类选择器 > 标签选择器
选择器的针对性越强,他的优先级就越高
HTML标签类型
块级标签
1.能够独占一行的标签 2.能随时随地设置宽度和高度(比如div,p,,h1)
行内标签
1.多个行内标签能够同时现在一行 2,宽度和高度取决于内容比如(span ,a,label)
行内-块级标签
1.多个行内-块级可以显示在一行 2,能够随时设置宽高(比如input,button)
修改标签显示类型 --->通过display修改属性
none :隐藏
block:让标签变为块级标签
inline:让块级标签变为行内标签
inline-block:让行内标签变为行内块级标签
CSS的属性
根据继承性分为两大类
可继承属性 :父标签的属性值会传递给子标签, 一般是文字控制属性
不可继承属性:父标签的属性值不能传递给子标签,一般是区块控制属性
CSS中的伪类 当你去触发某个操作的时候它才会去改变一些样式
###第一天的学习结束-.- ,
