更新时间: 2017-8-21
容器
span 创建单行元素的容器
div 多行
form 输入信息
-
action 属性，提交给服务器
-
子标签: name value
-
input 子标签
text 文本框
password 密码框
radio 单选
submit 提交按钮 -
HTML新类型
range 滑块
number 数字选择
email Email
url 网址
placeholder 占位符
required 必填字段
readonly 只读
disabled 禁用
size 尺寸字符数
maxlength 最大允许输入字数
autofocus 自动焦点
-
下拉菜单select
option 菜单项 -
多行标签
textarea
-
按钮 button onclick
-
媒体标签: video
width 宽度
height 高度
control 播放控件
src 源
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<form>-->
<!--<input type="text" name="user" id="" placeholder="请输入用户名"> <br>-->
<!--<input type="password" name="password" id="" placeholder="请输入密码"><br>-->
<!--<input type="radio" name="sex" id="" checked value="man"> 男-->
<!--<input type="radio" name="sex" id="" value="woman"> 女<br>-->
<!--<input type="submit" value="提交注册">-->
<!--</form>-->
<!--新特性-->
<!--<form action="">-->
<!--<input type="number" name="number" id="" min="1" max="100" step="1" value="5" readonly><br>-->
<!--<input type="range" name="range" id="" min="1" max="100" step="10"> <br>-->
<!--<input type="email" name="email" id="" size="10" required> <br>-->
<!--<input type="url" name="url" id="" placeholder="请输入网址" maxlength="15" autofocus><br>-->
<!--<input type="date" name="date" id="" disabled>-->
<!--<input type="submit">-->
<!--</form>-->
<!--<form action="">-->
<!--<select name="lesson" id="">-->
<!--<option value="手机">3天打飞机</option>-->
<!--<option value="电脑"> 电脑习大大</option>-->
<!--<option value="美女">美女来一下</option>-->
<!--</select>-->
<!--<input type="submit" >-->
<!--</form>-->
<!--<form action="">-->
<!--<textarea name="article" id="" cols="30" rows="10">-->
<!--1天干点什么好-->
<!--2天吃点什么好-->
<!--3天玩点什么好-->
<!--</textarea>-->
<!--<input type="submit">-->
<!--</form>-->
<!--<button onclick="alert('我被你点了一下')"> 点击我啊</button>-->
<video width="600" height="400" controls src="http://blog.xiaoboswift.com/wp-content/uploads/2017/08/hckz.mp4">
</video><br>
<audio controls src="http://blog.xiaoboswift.com/wp-content/uploads/2017/08/hckz.m4a">
</audio>
</body>
</html>
-- ----------------------------分割线--------------------------------
直接上零基础的学习笔记，持续更新...!!!
Html
Html文档模型
- 根元素 —HTML
- 头+体 — head + body
-
子元素— title 标题 meta 元信息 script脚 本引用 link 链接 div 子内容块1
文本标签:
p 段落
h 标题
br 换行
hr 水平分割线
格式文本
b 粗体
i 斜体
u 下划线
sub 下标
sup 上标
图像
img 图像
属性:
src 来源
alt 替代文字
表格
table 标签
tr 行
td 单元格
th 表头
border 边框
子标签属性
rowspan 跨行单元格
colspan 跨列单元格
表列
ol 有序列表
ul 无序列表
li 子标签
-
源代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<p>-->
<!--我一定可以3天学会html5 <p> 静静 </p> hellow-->
<!--</p>-->
<!--<p align="center"> 中国好，经测好大啊</p>-->
<!--<h1> 我在天学会H5</h1>-->
<!--<h2> 我在天学会H5</h2>-->
<!--<h3> 我在天学会H5</h3>-->
<!--<h4> 我在天学会H5</h4>-->
<!--<p>附送移动开发的视频，iOS和Android</p>-->
<!--<p>-->
<!--<b> 今日头条 </b> <br>-->
<!--<i> 选学内容</i>-->
<!--<br>-->
<!--<u> 重点考试内容 </u>-->
<!--<br>-->
<!--人民日报<sup>sas</sup>-->
<!--<br>-->
<!--x<sub>1</sub>+y<sub>2</sub>-->
<!--</p>-->
<!--<br>-->
<!--<!––>-->
<!---->
<!--表格-->
<!--<table border="1">-->
<!--<!–表头–>-->
<!--<th>标签</th>-->
<!--<th> 子标签</th>-->
<!--<th> 含义 </th>-->
<!--<th> 场景 </th>-->
<!--<!–行–>-->
<!--<tr>-->
<!--<!–单元格–>-->
<!--<td rowspan="3">1</td>-->
<!--<td>2</td>-->
<!--<td>3</td>-->
<!--<td rowspan="3">4</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>3</td>-->
<!--<td>4</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>3</td>-->
<!--<td>4</td>-->
<!--</tr>-->
<!--</table>-->
<!--有序列表-->
<ol>
<li>学习H5</li>
<li>学习React</li>
<li>React Native</li>
</ol>
<!--无序列表-->
<ul>
<li>hello</li>
<li>world</li>
<li>mary</li>
</ul>
</body>
</html>
网友评论