我所了解的HTML5
我所了解的HTML5
行走迪拜 发表于2年前
我所了解的HTML5
  • 发表于 2年前
  • 阅读 2
  • 收藏 0
  • 点赞 1
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。 2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成。


1> 什么是HTML 5 ?

HyperText Markup language 超文本标记语言  -  网页的本质就是超文本标记语言


2> HTML 5 的作用是什么 ?

UI界面跨平台写一份HTML 5 的代码,这个界面就可以运行到任何手机平台


3> HTML 5 怎么使用 ?

运行平台 : 浏览器


4> HTML 5 什么时候使用 ?

1. HTML 5 之前的版本是专门为PC准备的 (非手持设备)

2. HTML 5 新概念 : 移动先行优先考虑移动端


5> 手机APP的开发模式有哪两种 ?

1. 原生 : 访问手机相册\打电话\拍照

2. 原生 + HTML 5  - 网易新闻案例


6> 一个有具体功能的完整网页,一般由哪3部分组成的呢 ?

  • λ HTML  网页的具体内容和结构

  • λ CSS  网页的样式 (美化网页最重要的一块)

  • λ JavaScript  网页的交互效果,比如对用户鼠标事件作出响应  


7> 工程师大致有几种分工类型  ?

  • λ 前端工程师 (HTML + JS) 将动态数据渲染到静态页面

  • λ 后台工程师 (服务器 + 数据库) : 动态数据

  • λ 平面设计师 (HMTL + CSS) : 静态页面

  • λ 移动工程师 (iOS, Android) UI界面 + 服务器交互 



补充 : HTML5HTML4的区别

HTML5标准取代HTML4标准的一个重要目标就是 ,让浏览器摆脱需要安装各种插件才能显示或播放不同格式文件的情况.







1> 第一个HTML程序

首先创建一个新项目 --> New -> HTML File

// 新创建html文件,自动生成代码如下 :


<!DOCTYPE html>  文档类型

<html>  剩下的全部为html内容, html里面还有两个标签,一个为head,另一个为body.

<head>  head标签内部一般放一些CSSJS

    <meta charset="UTF-8">  字符集编码 (HTML5中定义文字的编码)

    <title></title>  网页的标题

</head>

<body>  body标签里面会放html(网页) 的具体内容


</body>

</html>


常见的HTML标签

  • ν 标题:h1h2h3h4h5....

  • ν 段落:p

  • ν 换行:br

  • ν 容器:divspan(用来容纳其他标签)[div标签没有任何具体意义的标签,其功能相当于OC中的UIView控件]

  • ν 表格:tabletrtd

  • ν 列表:ulolli

  • ν 图片:img

  • ν 表单:input

  • ν 链接:a


<body>

<p>这里是第一段</p>

<p>这里是第二段</p>

<p>这里是第三段</p>

</body>



<body>

<div>这里是第一段</div>

<div>这里是第二段</div>

<div>这里是第三段</div>

</body>



<body>

<span>这里是第一段</span>

<span>这里是第二段</span>

<span>这里是第三段</span>

</body>



其它需要使用到的一些标签


<input type="button" value="我是按钮">

<a href="http://www.baidu.com" target="_blank">百度</a>

<img src="01.png">



2> 什么是CSS ?

  • λ CSS的全称是Cascading Style Sheets,层叠样式表

  • λ 它用来控制HTML标签的样式,在美化网页中起到非常重要的作用

  • λ CSS的编写格式是键值对形式的,比如 :

color: red;

background-color: blue;

font-size: 20px;


冒号: 左边的是属性名,冒号: 右边的属性值






3> CSS有哪三种书写形式 ?

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

<body>

<a href="http://www.baidu.com" target="_blank" style="font-size: 50px;">百度</a>

<p style="color: red; font-size: 20px; background: blue;">这里是第一段</p>

<p style="color: blue;">这里是第二段</p>

<p>这里是第三段</p>

</body>




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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>  // 特别注意 : head标签内部创建一个style标签,这叫做页内样式

        p {

            color: red;

            font-size: 40px;

            background: orange;

        }

        a {

            font-size: 10px;

        }

    </style>

</head>

<body>

<a href="http://www.baidu.com" target="_blank" style="font-size: 50px;">百度</a>

<a>谷歌</a>

<p>这里是第一段</p>

<p>这里是第二段</p>

<p>这里是第三段</p>

</body>

</html>




  • λ 外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用

首先创建一个New  -->  File 文件 名称叫做 common.css 

div {

    color: red;

    font-size: 50px;

    border: 5px solid blue;

    border-redius: 10px;

    text-align: center;

}

其次创建一个second.html 文件

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="common.css">

</head>

<body>

    <div>second</div>

</body>

</html>


再然后创建一个third.html 文件

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="common.css">

</head>

<body>

    <div>second</div>

</body>

</html>








CSS的两大核心内容  属性 和 选择器  (待完善)








4> 关于CSS的选择器 ?

  • λ 标签选择器 根据标签名找到标签 作用 : 选择对应的标签,为之添加样式


  • λ 类选择器  书写格式.类名  可以重复和设置多个


  • λ id选择器  书写格式 :  #id  必须保证唯一性


  • λ 并列选择器 书写格式 :  中间使用逗号隔开  分隔不同的选择器


  • λ 复合选择器  书写格式 : 中间没有空格和逗号,相连在一起  表示同一个整体


  • λ 后代选择器  书写格式 : 中间使用空格隔开不同的选择器  后代和子后代都有效果


  • λ 直接后代选择器  书写格式 : 使用 > 分隔  只有直接后代才有效果







  • λ 相邻兄弟选择器  书写格式 : 使用 + 分隔  只有外部相邻的选择器才有效果


  • λ 属性选择器  书写格式 : 使用 [ ] 表示  相同属性的相应标签才有效果




1> 关于CSS选择器的小结

  1. 1> div .tom : 后代选择器,找到div里面class= “tom” 的所有子标签

  2. 2> div > .tom : 直接后代选择器,找到div里面 class= “tom” 的直接子标签

  3. 3> div.tom : 复合选择器,找到class= “tom”div标签

  4. 4> div, .tom : 并列选择器, 找到div标签 或者 class= “tom” 的标签

  5. 5> div + .tom : 相邻兄弟选择器,找到跟div标签相邻的 class= “tom”的标签


2> CSS 选择器的优先级原则是什么

1> ! important 的样式.

2> style属性中的样式 (行内样式)

  1. 3> 先比较选择器的优先级,选择器优先级高的会覆盖优先级低的.

  • λ 针对性越强,(范围越小)的选择器,优先级越高

  • λ 针对性越弱,(范围越大)的选择器,优先级越低

  1. 4> 再比较选择器的先后顺序,后面的会覆盖前面的. 条件: 在选择器优先级相等时.

  2. 5> * , 通配符. 一般都不用,效率低,无意义!

总结概括 : 选择器的针对性越强,它的优先级就越高.


3> HTML有哪三种标签类型

  • λ 块级标签  

特点 : 独占一行的标签  能随时设置宽度和高度 (比如divph1h2ulli)









  • λ 行内标签  

特点 : 多个行内标签能同时显示在一行  宽度和高度取决于内容的尺寸 (比如spanalabel)



  • λ 行内-块级标签 (内联-块级标签)

特点 : 多个行内-块级标签可以显示在同一行  能随时设置设置宽度和高度 (比如inputbutton)







共有 人打赏支持
粉丝 0
博文 2
码字总数 4628
×
行走迪拜
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: