什么是HTML
超文本标记语言：Hyper Text Markup Language
这都不重要，重要的是：
HTML是Web网页的基本组成部分
HTML中定义的元素，决定了网页的内容和结构
Python：编程语言，编写程序
HTML：标记语言，像画画一样，画出网页的内容
基本结构
--------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
--------------------------------------------------------------------------------
常用标签
单标签、双标签
<meta charset="UTF-8"/>
<title>我是一个标题</title>
块级标签、內联标签
<h1>我是一号标题</h1>，块级
<h6>我是六号标题</h6>，块级
<p>我是一个默默无闻的段落</p>，块级
<a href="http://zhanghonglun.cn" target="_blank">带你去一个好地方</a>，内联
<img src="logo.png" width="200" height="200"/>，内联
<br/>
<div>我是块级元素</div>
<span>我是内联元素</span>
表格：table、tr、th、td
列表：ul、ol、li
下拉：<select><option></option></select>
元素的属性
id、class、style
<a href="#id">跳转到某个id的元素</a>
HTML注释
表单
--------------------------------------------------------------------------------
<form action="" method="post">
用户名 <input type="text" placeholder="默认文本" name="username"/>
密码 <input type="text" placeholder="密码" name="password"/>
一大段文本 <textarea rows="10" cols="10" placeholder="想说的话" name="content"></textarea>
<button type="submit">登陆</button>
</form>
--------------------------------------------------------------------------------
input的type：button、checkbox、color、date、datetime、email、file、month、number、password、radio、range、submit、text、time
HTML颜色
十六进制：#FFF
RGB：rgb(255, 255, 255)，rgba(255, 255, 255, 1)
颜色名称：red，green，blue
DOM
文档对象模型：Document Object Model
HTML5
新标签：canvas、svg、audio、video、embed
svg：http://www.runoob.com/svg/svg-tutorial.html
canvas：http://zhanghonglun.cn/blog/canvas初探：基本语法
新的语义元素：header、nav、section、article、aside、figcaption、figure、footer
新功能：元素拖放、地理定位、video、audio、更丰富的input type、Web存储（localStorage和sessionStorage）
HTML补充学习
http://www.runoob.com/html/html-tutorial.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>我爱HTML</title>
</head>
<body>
<h1>这里是一级标题</h1>
<h2>这里是二级标题</h2>
<h3>这里是三级标题</h3>
<h4>这里是四级标题</h4>
<h5>这里是五级标题</h5>
<h6>这里是六级标题</h6>
<p>这里是段落内容</p>
<a href="http://zhanghonglun.cn" target="_blank">一个干货满满的地方</a>
<img src="http://zhanghonglun.cn/blog/wp-content/uploads/2015/04/136670958113.jpg" width="200" height="200"/>
<img src="http://zhanghonglun.cn/blog/wp-content/uploads/2015/04/136670958113.jpg" width="200" height="200"/>
<p>这是一段<br/>换行的段落</p>
<div>
div里面可以包含其他HTML标签或者文本内容
<p>这个div是页面的第一块内容</p>
</div>
<div>
<p>这个div是页面的第二块内容</p>
<div>
<span>span是内联标签，后面的文本不换行</span>
<span>div里面还可以嵌套其他div</span>
<p>div的使用可以让页面内容更加结构化、有层次</p>
</div>
</div>
<table>
<tr>
<th>语言</th>
<th>难度</th>
<th>功能</th>
</tr>
<tr>
<td>Python</td>
<td>简单</td>
<td>强大</td>
</tr>
<tr>
<td>R</td>
<td>简单</td>
<td>强大</td>
</tr>
</table>
<ol>
有序列表
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ol>
<ul>
无序列表
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
<p id="main">这是最主要的一段话</p>
<a href="#main">跳到main所在位置</a>
<p class="content">这些段落都是普通内容</p>
<p class="content">这些段落都是普通内容</p>
<p class="content">这些段落都是普通内容</p>
<p style="color:red;">这是一段有颜值的内容</p>
<form action="" method="post">
用户名 <input type="text" placeholder="用户名" name="username"/>
密码 <input type="password" placeholder="密码" name="password"/>
<select>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
一大段文本 <textarea rows="10" cols="10" placeholder="一大段文本" name="content"></textarea>
<button type="submit">登陆</button>
</form>
<p style="color:rgb(255,0,0);">红色</p>
<p style="color:#0f0;">绿色</p>
<p style="color:blue;">蓝色</p>
<header>导航栏部分</header>
<div id="header">导航栏部分</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
