HTML的介绍
超文本标记语言(HyperText Markup Language)是一种用于创建网页的标准标记语言. HTML 运行在浏览器上,由浏览器来解析
CSS 指层叠样式表 (Cascading Style Sheets) 定义如何显示 HTML 元素
-
HTML与其他语言的对比
语言 区别 XML (Extensible Markup Language)
可扩展标记语xml多用于存储数据,而且xml比html语法严格
并且xml标签可以自定义
xml用于 roslaunch 启动文件 和 android layout 布局文件Json (JavaScript Object Notation)
数据交换格式语言QML (Qt Markup Language)
qt专用标记语言QMLl用于 qt quick markdown
普通文本编辑器编写的标记语言markdown是会被浏览器解析成html然后展示
markdown便于编辑,像笔记本
HTML 环境配置
HTML 语法结构
-
基本语法
元素与属性
<a href="https://www.runoob.com"/> <!-- 其中a是元素(<a></a>或<a/>) 而href是属性后面"值"(name="value")-->
CSS 语法结构
-
基本语法
基本组成
选择器 {属性1:值;属性2:值;}
id与class选择器
1.id选择器 #para1{text-align:center;color:red;} /* id相当于人的身份证,不可以重复 以#开头 */ <p id="para1">Hello World!</p> 2.class选择器 .center{text-align:center;} /* class相当于人的名称可以重复 以.开头 */ <h1 class="center">标题居中</h1>
内部和外部样式表
1.内部样式表 <style> hr {color:sienna;} </style> /* 使用 <style> 标签在文档头部定义 */ 2.外部样式表 <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
HTML 常用标签
-
预处理标签
HTML版本声明
<!-- 一定要位于文档最前面得到位置,让浏览器知道用哪个版本的html --> <!DOCTYPE html>
头部预处理
<!-- 头部标签 --> <!-- 包含 <title>, <style>, <meta>, <script> --> <head> <meta charset="utf-8"> <title>文档标题</title> </head>
-
文本编辑标签
标题和段落
<!-- 标题标签 --> <!-- 1是标题等级 还有2 3 4.. --> <h1>这是一个标题</h1> <!-- 段落标签 --> <p>这是一个段落。</p>
超链接
<!-- 超链接标签 --> <a href="https://www.runoob.com"/>这是一个链接</a> <!-- 按键超链接 --> <a href="超链接地址"><input type=button value="按钮" ></a>
-
媒体
图片
<!-- 图片标签 --> <!-- 属性 1.比例缩放 style="zoom:33%;" 2. 自定义长宽 width="258" height="39" --> <img src="/images/logo.png"/>
视频
<!-- 视频标签 --> <!-- src: 要播放视频的url --> <!-- autoplay: 准备就绪就马上播放 --> <!-- controls: 需要点击播放按钮才进行播放 --> <video src="movie.ogg" controls="controls"></video>
画布
<!-- 画布标签:一个画布在网页中是一个矩形框,通过 <canvas> 元素来绘制 --> <!-- 在js创建对象: var context = canvas.getContext("2d"); --> <canvas id="myCanvas" width="200" height="100"></canvas>
[canvas标签](https://www.runoob.com/html/html5-canvas.html) [更多处理画布的方法](https://www.webhek.com/post/save-canvas-to-image.html)
- ### 事件标签
##### 按钮标签
```html
<!-- 按钮标签 -->
<button id="xxx">点我!</button>
<!-- 按下属性,触发JavaScript脚本的函数: -->
<button onclick="script()">复制文本</button>
<!-- 按下属性,触发链接 -->
<a href="超链接地址"><input type=button value="按钮" ></a>
-
其他标签
表单标签
<!-- 与服务器php交互的表单标签 --> <!-- action: 填url 指定发送给的php --> <!-- enctype: 编编码格式 --> <!-- method: 指定的$_POST变量 --> <form action="form_action.php" method="get"> xxxx </form>