HTML
标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="HTML基础学习"/>
<meta name="description" content="狂神学习笔记之HTML"/>
<title>HTML学习笔记</title>
</head>
<body>
<a name="top">顶部</a>
<h1>一级标签</h1>
<h6>六级标签</h6>
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
<hr/>
第一行<br/>
第二行<br/>
第三行<br/>
<strong>粗体</strong>
<em>斜体</em>
<img src="logo.jpg" alt="logo图片" width="500px" height="150px" title="我是logo">
<hr/>
<a href="http://www.baidu.com" target="_blank">新窗口打开百度</a><br/>
<a href="http://www.baidu.com" target="_self">本窗口打开百度</a><br/>
<a href="mailto:1234567890@qq.com">邮件</a>
<ol>
<li>华为</li>
<li>小米</li>
<li>苹果</li>
</ol>
<ul>
<li>华为</li>
<li>小米</li>
<li>苹果</li>
</ul>
<dl>
<dt>手机</dt>
<dd>华为</dd>
<dd>小米</dd>
<dd>苹果</dd>
</dl>
<table border="1px">
<tr>
<th colspan="3">手机</th>
</tr>
<tr>
<td rowspan="2">国内</td>
<td>华为</td>
<td>4999</td>
</tr>
<tr>
<td>小米</td>
<td>1999</td>
</tr>
<tr>
<td rowspan="2">国外</td>
<td>苹果</td>
<td>6999</td>
</tr>
<tr>
<td>三星</td>
<td>3999</td>
</tr>
</table><br/>
<video width="320" height="240" controls autoplay>
<source src="movie.ogv" type="video/ogg">
</video><br/>
<audio controls>
<source src="horse1.mp3" type="audio/mpeg">
</audio>
<embed height="50" width="100" src="horse.mp3">
<hr/>
<iframe src="https://www.baidu.com/" frameborder="no" framespacing="0" allowfullscreen="true" width="500px"></iframe><br/>
<iframe src="" name="baidu" frameborder="no" framespacing="0" allowfullscreen="true" width="500px"></iframe><br/>
<a href="https://www.baidu.com/" target="baidu">点击在内联框架打开百度百度</a><br/>
<form action="https://www.baidu.com/" method="get">
<p>名字<input type="text" name="userid" value="默认为1" placeholder="提示不可为空" required /></p>
<p>密码<input type="password" name="password" size="7" maxlength="6" placeholder="最大长度为6"/></p>
<p>爱好<input type="checkbox" name="hobby" value="1"/>唱歌<input type="checkbox" name="hobby" value="2" checked />滑雪<input type="checkbox" name="hobby" value="3"/>听歌</p>
<p>性别<input type="radio" name="sex" value="boy" checked />男<input type="radio" name="sex" value="gril"/>女</p>
<p>文件<input type="file"/></p>
<p>隐藏输入框<input type="hidden"/></p>
<p>城市<select name="city">
<option value ="武汉">武汉</option>
<option value ="上海" selected>上海</option>
<option value ="深圳">深圳</option>
</select></p>
<p>文本域<textarea rows="10" cols="50" readonly >456451</textarea></p>
<p>邮箱<input type="email"/></p>
<p>URL<input type="url"/></p>
<p>数字<input type="number" min="0" max="100" step="10"/></p>
<p>滑块<input type="range" min="0" max="100"/></p>
<label for="search">点击进入搜索框</label>
<p>搜索框<input type="search" id="search"/></p>
<p><input type="image" src="logo.jpg"/ width="200px" height="60px"></p>
<p><input type="submit"/><input type="reset"/></p>
<p>按钮<input type="button" value="按钮1" disabled /><button type="button">按钮2</button></p>
</form>
空 格 <br/>
><br/>
<<br/>
©版权所有<br/>
<a href="#top">回到顶部</a>
</body>
</html>
- DOCTYPE 告诉浏览器使用什么规范
- head 代表网页头部
- mata 描述性标签，描述网站的一些信息。一般用来做SEO
- title 网页标题
- body 网页主体
- h1~h6 标题标签，共六级
- p 段落标签
- hr 水平线标签
- br 换行标签
- 字体样式标签
- img 图片标签
- src 必填，图片路径，../ 上一级目录
- alt 必填，图片名字，路径有误时会以文字显示
- title 鼠标悬停在图片上时的文字
- a 链接标签
- href 必填，请求网址
- href="#top" 锚链接
- mailto:1234567890 @qq.com
- QQ推广
- target 表示窗口打哪里打开，默认_self
- 列表标签
- table 表格标签
- video 视频标签，controls，播放控件
- audio 音频标签，controls，播放控件
- embed 音频标签
- iframe 内联框架，可以和a标签配合在内联框架打开指定网页
- form 表单
- input 输入框
- type 属性，有text（文本）、password（星号隐藏）、checkbox（多选框）、radio（单选框）、submit（提交按钮）、reset（重置按钮）、file（文件）、hidden（隐藏）、image（图片提交按钮）、button（按钮）
- name 指定表单元素的名称
- value 元素初始值。type为radio时必须指定一个值
- size 指定表单元素的初始宽度。type为text或password时，表单元素的大小以字符为单位，其他类型以像素为单位
- maxlength type为text或password时，输入的最大字符
- checked type为radio或checkbox时，指定按钮是否被选中
- placeholder 提示信息
- disabled 禁用
- readonly 不可改变
- hidden 隐藏域
- 验证
- 邮箱 type="email"
- URL type="url "
- 数字 type="number"，min 最小，max最大，step 步长
- 滑块 type="range"，min 最小，max最大
- 搜索框 type="search"，输入框最右边有个x可以清除输入内容
- required 不可为空
- pattern 正则表达式 https://www.jb51.net/tools/regexsc.htm
- button 按钮
- select 下拉框，option选项
- textarea 文本域，rows 行长度， cols 列长度
- label 点击进入指定id的输入框
特殊符号
