HTML5入门最最基础篇

新手入门记得笔记的可能不如某些大神的意 请勿喷 各自有各自的学习习惯 能进步就
--原iOS程序猿一枚 坐标北京 如有误人子弟之处 敬请各位大神指点

网页的组成

一个具有功能的完整网页,一般由三个部分组成

• 1□HTML

✅网页的具体内容和结构

• 2□CSS

✅网页的样式(美化网页最重要的一项)

• 3□JavaScript

✅网页的交互效果,比如对用户的鼠标事件做出相应

HTML全称是HyperText Markup Language 超文本标记语言

注 : HTML5中新增了27个标签元素,废弃了16个标签元素,主要包括:结构性标签,集块性标签,行内语义性标签,交互性标签

---

一个基础的网页结构

                                    DTD声明 ! 不要忘  H5版本的声明 不属于标签`
                                   本网页是否自动转换英文
         
                             编码格式  
              
        
         
             
常用标签
                    空白标签
             
我是最大的
                    h1 ~ h6 h1最大
     
                                           是根标签

• 具体各种标签的功能请去http://www.w3school.com.cn网站 各种姿势的标签都有,标签的那就这样吧,某些标签的大小值是由百分比与PX像素值组成。

---

CSS

CSS的全称是Cascading Style Sheets , 层叠样式表,它是用来控制HTML标签的样式,在美化网页中起到非常重要的作用。

CSS的编写格式是键值对形式. 冒号左边是属性名,冒号右边是属性值。

CSS的三种样式

• 1.行内样式:(内联样式)直接在标签的style属性中书写 。
  例:

注: 边框属性默认三个值,一个是宽度,样式(虚线,实线,颜色)。

• 2.页内样式:在本网页的style标签中书写
  

注: style标签写在里面拿到需要修改的标签名的.

• 3.外部样式:在单独的CSS文件中书写,然后在网页中使用link标签引用
  
  //stylesheet是层叠样式表的意思,index是文件名.也是需要写在里面
  样式的规律: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中的伪类 当你去触发某个操作的时候它才会去改变一些样式

 ###第一天的学习结束-.- , 

我知道转行很难,但是不坚持怎么会知道结果呢? 以后要去习惯做笔记,毕竟人笨。坚持就是胜利✌️! 一起加油!