HTML：

HTML不是编程语言，而是标记语言，用来描述网页

HTML基础语法及标签

标签 说明
<!DOCTYPE> <!DOCTYPE> 不是HTML标记语言，而是声明，它是指示 web 浏览器关于页面使用哪个
HTML 版本进行编写的指令 <!DOCTYPE html>
<meta charset="utf-8"> 对于中文网页需要声明编码方式，否则会乱码
<meta charset="gbk"> 设置gbk编码
<!--- ---> 注释
<!---这是一个注释--->
完整的HTML页面
<!DOCTYPE html> 声明
<html></html> 最外层框架，告知是html框架
<head></head> 头部元素，包含编码语言和页面标题
<meta charset="utf-8"> 声明编码
<title></title> 网页标题
<title>Hello</title>
<body></body> 网页主题，是网页的内容部分
<body> <p>这是正文</p> </body>
上述标签关系如图，是网页的最小构成单元 02A7DD95-22B4-4FB9-B994-DDB5393F7F03
常用标签
<h1></h1> 标题 h1-h6，标题级别（字体大小）由大到小
<h1>这是最大级别标题</h1>
<p></p> 段落
<p>这是一个段落</p>
<hr> 线
<pre></pre> 预格式化文本容器,会保留空格和换行符
<br/> 换行，直接插入段落，没有闭合标签
<a></a> 链接
<a href="https://www.baidu.com">这是百度链接</a>
<img> 图片，注意，图片标签不是成对出现
<img src="1.jpg">
<ul></ul>：无序列表
<ol></ol>：有序列表
<li></li>：列表项		 列表
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
</ol>
<table></table>：表格
<tr></tr>：行
<td></td>：格
<th></th>：表格头(加粗加黑) 		创建表格
<table>
<tr>
<th>Month</th> <th>Savings</th>
</tr>

<tr>
<td>January</td> <td>$100</td>
</tr>
</table>
HTML表单
<form></form> 定义表单
<form action="www.baidu.com" method="get" enctype="application/x-www-form-urlencoded">
这是表单
</form>

action：表明表单将要提交到哪里
method：表示提交用的方法分别为get和post可选
enctype：规定在发送表单数据前对数据进行编码格式
<INPUT> 表单域标记
<INPUT type= "text" name= "文本框名称" value= "文本框值" size= "文本框的宽度" maxlength= "文本框中能输入的最大长度" >
value：输入框默认文本
type 表单类型
text：单行文本框
password：密码框，输入值以点代替
checkbox：复选框
radio：单选按钮
submit：提交按钮
button：自定义按钮
value 默认文本
placeholder 提示文字
<div></div> 块元素，可以存放文本、图片等，用来对整体设置属性
<textarea></textarea> 格式及属性
<TEXTAREA name= "名称" rows= "最大可视行数" cols= "最大可视列数" >默认多行文本
</TEXTAREA>
<select></select>
<option></option>		 多选表单
<SELECT name= "" size= "" >
<OPTION value= " " > 选项1 </OPTION>
<OPTION value= " " > 选项2 </OPTION>
</SELECT>

补充：

HTTP请求方式

方法 说明
GET 发起一个请求来获得服务器上的某一资源，通过一组HTTP头和呈现数据返回客户端，GET请求中永远不会包含呈现数据
HEAD 与GET类似，但是HEAD只含有HTTP头信息，不含有呈现数据。侧重判断某个资源是否存在。
POST 向服务器提交数据，使用最为广泛
PUT 与POST类似，但是PUT指定了资源存放的位置，POST数据存放位置则由服务器决定。少见
DELETE 删除资源。少见。
OPTIONS 获取当前URL所支持的方法，若请求成功，会在HTTP头中更包含一个名为Allow的头，值是所支持的方法

CSS

CSS是一种用来装饰HTML的标记集合，是对HTML标记的一种扩展，可以进一步美化HTML页面

语法

选择符+声明（声明=属性+属性值）

           属性 值              属性 值

   h1{   color:red;     front-size:14px}

  选择器    声明          声明

引用方式

方式 说明
内联样式 在HTML元素中使用style属性，只对当前标记里的内容有效
<p style="display:none"></p>
内部样式表 在HTML文档头部head区域使用<style>元素，包含CS，全局声明，调用
<style type="text/css">
选择符 { 样式属性:属性值; 样式属性:属性值;……}
选择符 { 样式属性:属性值; 样式属性:属性值;……}
</style>
外部引用 外部CSS，通过<link>标签引入外部的CSS文件
<link rel="stylesheet" type="text/css" href="样式表文件的地址">

内部样式表总结

样式 语法
类选择符 <style type="text/css">
.sfont{ font-size:12px;
color:red; }
</style>
<p class="sfont">…</p>
ID选择符 <style type="text/css">
#sfont{
font-size:12px;
color:red; }
</style>
<p id="sfont">…</p>
类型选择符 <style type="text/css">
p{
font-size:12px;
color:red; }
</style>
<p>…</p>

样式表冲突

当多种样式作用于同一标记的同一属性时，会发生样式表冲突

优先原则

同一选择符：按就近原则

不同选择符：内联 > ID > 类 > 类型 > 外部

定位符

方式 说明
position
fixed
绝对定位		 <view style='position:fixed;bottom:100rpx;right:100rpx'>
<image style=' width:102rpx; height:110rpx' src="/images/music/music-start.png"></image> </view>
absolute
绝对定位		 <view style='position:absolute;'>
<image style=' width:102px; height:110px' src="/images/music/music-start.png"></image> </view>
在没有使用 “left”, “top”, “right” 以及 “bottom” 属性之前，基于文档流的位置停留在在文档流之外， 随着滚动并不一直停留在屏幕中。

<view style='position:absolute;bottom:100rpx;right:100rpx'>
<image style=' width:102rpx; height:110rpx' src="/images/music/music-start.png"></image> </view>
在使用 “left”, “top”, “right” 以及 “bottom” 属性之后，位置就不是基于文档流时候的位置， 而是根据这些设置的属性基于整个屏幕的位置确定的。随着滚动并不一直停留在屏幕中。
relative
相对定位		 <html> <head>
<style type="text/css">
h2.pos_left { position:relative; left:-20px }
h2.pos_right { position:relative; left:20px }
.container{ margin-left:100px; border:5px solid #405f80; }
</style> </head> <body>
<div class="container">
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
</div> </body> </html>