HTML5的特性,发展,及使用

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #ffffff }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #eb905a }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #4bd156 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #ff4647 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #ff4647 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #527eff }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #8b87ff }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #ffffff; min-height: 21.0px }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #eb905a }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #4bd156 }
span.s1 { color: #8b87ff }
span.s2 { }
span.s3 { font: 18.0px "PingFang SC" }
span.s4 { font: 18.0px Menlo }
span.s5 { color: #4bd156 }
span.s6 { color: #527eff }
span.s7 { font: 18.0px "PingFang SC"; color: #4bd156 }
span.s8 { font: 18.0px Menlo; color: #8b87ff }

1.html基础知识

# 01.使用html输出Hello world!

// 001.改变字体: file -> Default Setting -> Colors & Font

// 002.设置自动换行: file -> Default Setting -> Editor -> General

// 003.中国的编码格式: GBK, GB2312, UTF-8

# 02.HTML中常见标签

" 001.H家族: 标题标签

// h1, h2, h3, h4, h5, h6 (字体依次变小): <h1>我是H1</h1>

"  002.容器标签: 所见即所得

// <div>我是容器标签</div>

" 003.横线标签

// <hr>

" 004.表单标签: 输入框标签

// 输入框: <input>

// 换行: <br>

// <input placeholder="我是占位文字">

// <input value="我是默认文字">

// <input type="password">

// <input type="text">

// <input type="file">

// <input type="color">

// <input type="date">

// <input type="checkbox">

" 005.图片标签: 绝对路径: http:, https:, ftp / 相对路径: 资源在项目当中

// <img src="imgs/apple.jpg" width="50%" alt="苹果">

// <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo">

" 006.段落标签

// <p>我是段落标签</p>

" 007.超链接标签

// <a hre = "http://www.baidu.com" target="_blank">百度一下,你就知道</a>

" 008.列表标签

' 无序列表

// <ul type = "circle">

//    <li>111111</li>

//    <li>111111</li>

//    <li>111111</li>

// </al>

' 有序列表

// <ol = type = "A">

//    <li>111111</li>

//    <li>111111</li>

//    <li>111111</li>

// </ol>

# 03.新闻详情页

//    文章<

//    头部<

//    标题标签<>

//    标题标签<>

//    图片<>

//    >

//    正文<

//    组<

//    段落<>

//    段落<>

//    图片<>

//    >

//    组<

//    标题标签<>

//    段落<>

//    >

//    >

//    尾部<

//    标题标签<>

//    段落<>

//    >

//    >

# 04.HTML5中新增的特性

// <meter value="30" max="100"></meter>

// 进度条: <progress value="30" max="100"></progress>

// 视频播放器: <video src="Source/BigBuck.m4v" controls="controls" autoplay="autoplay" loop="loop"></video>

// 音频播放器: <audio src="Source/music.m4a" controls="controls"></audio>

2.CSS的基础语法

# 01.行内样式(内联样式)

// 容器标签: <div style="color: red; font-size: 20px">我是容器标签</div>

// 段落标签: <p style="color: blue; font-size: 30px">我是段落标签</p>

# 02.页内样式

// HTML是一门松散的解释性的语言

// CSS遵守的原则: 1.就近原则 2.叠加原则

// 创建index.css样式供调用

// 改变原有类型: <link rel="stylesheet" href="css/index.css">

# 03.外部样式

// 告诉网页这个外部资源用来当做什么(样式)

// <link rel="stylesheet" href="css/index.css">

3.HTML标签的类型

# 01.块级标签

" 001.独占一行,内容的宽度和高度可以随意更改

# 02.行内标签

" 001.一行内可以显示多个行内标签,内容的宽高只能随内容的尺寸而改变

# 03.行内-块级标签

" 001.一行内可以显示多个行内-块级标签,并且内容的宽高能随意改变sw