标签
基本标签
注释快捷键 ctrl+/ <!-- -->
标题标签 <h1>内容</h1> h1-h6
段落标签 <p>内容</p>
换行标签 <br/>
水平线标签 <hr/>
粗体标签 <strong></strong>
斜体标签<em></em>
特殊符号 格式 & ;
1. 空格
2.大于> 小写<
3.版权符号 ©
图像标签
src 和 alt 必填
快捷键 imp+tap键
<img src="图片地址" alt="(当图片显示不成功显示文字)图片加载不成功"
title="(鼠标放在图片上显示文字)悬停文字"
wdith="300" height="300"/>
超链接标签
href 必填
快捷键 a+tap键
1.文字链接<a href="https://www.baidu.com">点击我</a>
2.图片链接 嵌套一个图片标签
<a href="https://www.baidu.com">
<img src="图片地址" alt="(当图片显示不成功显示文字)图片加载不成功"
title="(鼠标放在图片上显示文字)悬停文字"
wdith="300" height="300">
</a>
3. target 表示链接是否覆盖当前网页还是新建网页
_self覆盖窗口 _blank 新建窗口
<a href="https://www.baidu.com" target="_blank">点击我</a>
4.锚链接 （跳转链接）
先要标记 锚
锚(定义关键词“top”)：<a name="top">顶部</a>
跳转锚(#+关键词)：<a href="#top">回到顶部</a>
跳转其他网页的锚
<a href="https://www.baidu.com#top">回到百度的顶部</a>
列表
有序列表
<ol>
<li></li>
<li></li>
</ol>
无序列表
<dl>
<li></li>
<li></li>
</dl>
自定义列表
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>c++</dd>
<dt>位置</dt>
<dd>江西</dd>
<dd>北京</dd>
</dl>
表格标签
tr 行 td 列
border ="宽度" 添加表格样式 <table border="1px">
rowspan 跨行 colspan 跨列 <td rowspan>
<table border="1px">
<tr>
<td></td>
</tr>
</table>
媒体元素
src 资源路径
controls 控制条
autoplay 自动播放
<video sec="视频地址"controls autoplay></video>
<audio src="音频地址"controls autoplay></audio>
页面结构分析
iframe内联框架(嵌套网页)
1.直接在iframe中建立嵌套网页
<iframe src="嵌套的网页"frameborder="0"
width="1000px" height="800px"> </iframe>
2.通过关键词来将网页嵌套到iframe中
<!--用关键词在 -->
<iframe src="" name="hello"frameborder="0"
width="1000px" height="800px"> </iframe>
<!--将百度嵌套在 "hello" 中 -->
<a href="https://www.baidu.com"target="hello">点击跳转</a>
表单
post和get
<!--method 存在两种提交方式 (post和get)
get 会在uil中显示信息 不安全，高效
post 安全，可传输大文件-->
<!--表单 form -->
<form action="02.html"method="get">
<!--文本输入框 text-->
<p>名字:<input type="text"name="username"></p>
<!-- 密码输入框 text-->
<p>密码:<input type="password"name="pwd"></p>
<p>
<!--提交-->
<input type="submit">
<!--重置-->
<input type="reset">
</p>
</form>
各种表单元素
3种元素功能
隐藏元素信息 hidden
只读 readonly
禁用 disabled
<form action="02.html"method="get">
<!--文本框 type = "text"
value 默认初始值
maxlength 最长写几个字符
size 文本框的长度-->
<p>名字:<input type="text"value="love"name="username"></p>
<!--密码输入框 password-->
<p>密码:<input type="password"name="pwd"></p>
<!--单选框 type = "radio"
value 单选框的值
name 表示组-->
<p>单选框: <!--男女的 name组名需要一致,不然会出现男女同时可选-->
<input type="radio"value="boy"name="sex"/>男
<input type="radio"value="girl"name="sex"/>女
</p>
<P>多选框：<!--多选框的 name组名也需要一致-->
<input type="checkbox"value="sleep"name="hobby">睡觉
<input type="checkbox"value="chat"name="hobby">聊天
<input type="checkbox"value="game"name="hobby">游戏
</P>
<p>下拉框：<!--最开始默认选择第一个选项 selected 可以改变默认-->
<select name="列表名称">
<option value="china">中国</option>
<option value="us" selected >美国</option>
</select>
</p>
<P>文本域:
<textarea name="textarea"cols="30" rows="10">文本内容</textarea>
</P>
<p>文件域:
<input type="file"name="files">
<input type="button"name="submit"value="提交">
</p>
<p>邮箱:
<input type="email"name="email">
</p>
<p>URL:
<input type="url"name="url">
</p>
<p>音量 (滑块):
<input type="range"name="voice"min="0"max="100"step="2">
</p>
<p>搜索框
<input type="search"name="search">
</p>
<!--自带的 提交和重置按钮-->
<p>
<!--提交-->
<input type="submit">
<!--重置-->
<input type="reset">
</p>
<!--自定义按钮-->
<p>文字按钮：<!--button-->
<input type="button"name="btn1"value="自制按钮">
</p>
<p>图片按钮：<!--image-->
<input type="image"src="../1.jpg"width="1000"height="800">
</p>
</form>
表单验证
<form action="02.html"method="get">
<!--placeholder 提示性信息
required 非空判断
pattern 添加正则表达式-->
<p>名字:<input type="text"name="username"
placeholder="请输入用户名"
required></p>
<p>密码:<input type="password"name="pwd"></p>
</form>
