HTML(Hyper Text Markup Language)超文本标记语言。超文本为超级文本,能够包含:图片,音频,视频,超连接,表格等等。html
历史更新迭代,html的历史浏览器
HTML5 是最新版本 HTML4.01 是上一个版本服务器
document 文档架构
c/s架构模式 客户端/服务器ide
有LOL,淘宝字体
须要不断维护客户端编码
b/s架构模式 浏览器/服务器 brower 浏览器spa
有QQ空间,微博code
方便快捷 简便视频
如下是HTML文档的初始格式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>这是个人第一个文档</title> </head> <body> </body> </html>
<!DOCTYPE html>
声明式语句,声明一下当前的html版本是HTML5<title>这是个人第一个网页</title>
标题标签<meta charset="UTF-8">
说明一下当前文档的解读编码为中文<body></body>
网页中能看到的内容,写在body中<head></head>
一般放置网页的设置<html></html>
全部标签的根标签<!--这是一个注释-->
注释快捷键 ctrl+/
是空格(转义符)< >
分别是< 和 ><p></p>
段落标签<span></span>
纯粹的文本标签<img>
图片标签width height
<audio controls="controls" src=""></audio> <video controls="controls" src=""></video> <!--controls 控件是否可见-->
由于不一样浏览器显示效果不一样的缘由,将在第二阶段详细解释。
代码以下
<!--type的值能够为,“a”,“A”,“i”,“I”,“1”--> <ol type = "1"> <li></li> <li></li> <li></li> </ol>
效果实现以下:
1. 2. 3.
代码以下
<!--type的值能够为,square 正方形 desc 实心圆 circle 空心圆 none--> <ul type = "none"> <li>明天放假</li> <li>好开心</li> <li>Yeah</li> </ul>
效果实现以下:
明天放假 好开心 Yeah
代码以下
<!--起始于<dl>标签,每一个列表项以<dt>开始,列表项注释<dd>--> <dl> <dt>我是王超</dt> <dd>来自山西临汾</dd> </dl>
效果实现以下:
我是王超 来自山西临汾
<!--href能够是本地连接,也能够是线上连接 target是指打开当前网页的方式,self为默认自身窗口打开,_blank为在新窗口打开 --> <a href="http://www.baidu.com" target="self">请跳转到百度</a>
<!--id 属性 是一个全局属性,每一个标签均可以有的属性 id表示惟一性 每一个标签只有一个id属性 id属性不能够重复 禁止以数字开头 -->
<!--同页面跳转 须要有两个值: href:#id; 要跳转的地方要有id属性 --> <a href = "#hello">跳转到指定位置</a> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <p id = "hello">你好,大舅哥</p>
代码以下
<table border="1px"> <!--tr表明行--> <tr> <!--colspan横跨多少列--> <!--td表明列--> <td colspan="5">swt2007开班</td> </tr> <tr> <!--th表示加粗--> <th>序号</th> <th>学生姓名</th> <td>联系方式</td> <td>毕业院校</td> <td>专业</td> </tr> <tr> <td>1</td> <td>杨涛</td> <td>1234567897</td> <td>山大</td> <td>软工</td> </tr> </table> <table border="1px"> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <!--rowspan竖跨多少行--> <td rowspan="3">2.1</td> <td>2.2</td> <td>2.3</td> </tr> <tr> <td>3.1</td> <td>3.2</td> </tr> <tr> <td>4.1</td> <td>4.2</td> </tr> </table> <!--cellpadding 单元格内容和边框中间的间距 cellspacing 单元格和单元格之间的间距 --> <table border="1px" cellpadding="10" cellspacing="20"> <!--表格的标题--> <caption>我的简历</caption>
代码以下
<!--表单 注册--> <!-- 注册 搜索 --> <span>用户名:</span><input type="text"><br> <span>密码:</span><input type="password"><br> <label> <input type="radio" name="sex" checked="checked">男 </label> <label> <input type="radio" name="sex">女 </label> <!-- <input>单行文本框 <input type="password">密码框 <input type="radio">单选框 如何让单选框关联起来? 给这些须要关联的单选框一个 name属性 属性值相等 如何给能够选择的框 默认选中效果? 给其添加 checked属性 属性值为checked 如何能点击文本实现单选效果? 给其外面添加label标签,括起来 --> <!--多选框--> <p>请说出您的兴趣爱好有哪些?</p> <label> <input type="checkbox" checked="checked">读书 </label> <label> <input type="checkbox">看报 </label> <label> <input type="checkbox">嗑瓜子 </label>
代码以下
<!--下拉列表--> 省: <select> <option>山西省</option> <option>陕西省</option> <option>河南省</option> </select> 市: <select> <option>太原</option> <option>大同</option> <option>忻州</option> </select> <!--文本域--> <!--查询 如何设置文本域宽高,如何禁止拉伸--> <textarea name="" id="" cols="30" rows="10"></textarea> <!--按钮--> <button>提交</button> <!--value 值 也就是input的内容(value的值就是框框里的内容)--> <input type="button" value="肯定">
h1-h6 代码以下
<!--标题(h1-h6)--> <h1>我是最大的标题</h1> <!--h4和正常文本的字体大小一致--> <h4>标题</h4> <p>正常文本</p> <!--标签是有权重的-->
实现效果以下:
正常的文本
颜色:
三种方式 一、英文单词:red,black,white 二、16进制 0-9 a-f #000000(黑色) #ff0000(红色) #00ff00(绿色) #ffffff(白色) 三原色 rgb #000 #f00 #fff 越接近0就越深,越接近f就越浅 三、rgb() 每一个数值的取值范围是0-255 rgb(0,0,0) rgb(255,255,255)