HTML学习笔记

HTML学习笔记

1.网页基本信息

(1) head标签：网页头部 (2) meta标签：描述性标签 (3) body标签：网页主体

2.网页基本标签

(1) h+数字标签：标题标签 (2) p标签：段落标签 (3) br/标签：换行标签 (4) hr/标签：水平线标签 (5) strong标签：粗体标签 (6) em标签：斜体标签 (7)  ；：换行 (8) >：大于号 (9) <：小于号 (10)©:版权符号

3.图像标签

<img src=../resources/images/1.jpg" alt="图片" title="新式神" width="100px" height="80px"/>

src：图像地址 alt：图像的代替文字 title：鼠标悬停提示文字 width：图像宽度 height：图像高度

4.超链接标签

4.1页面间链接

第一种：

<a href="http://www.baidu.com" >点击跳转</a>

第二种：

<a href="http://www.baidu.com" > <img src=../resources/images/1.jpg" alt="图片" title="新式神" width="100px" height="80px"/> </a>

4.2锚链接

1.需要一个锚标记 2.跳转到锚标记 锚标记：

<a name="top" >top</a>

跳转到标记：

<a href="#top" >回到顶部</a>

4.3功能性链接

邮件链接（mailto）

<a href="mailto:11111117@qq.com">点击联系我</a>

5.列表

1.有序列表

<ol> <li>java</li> <li>python</li> <li>c</li> </ol>

2.无序列表

<ul> <li>java</li> <li>python</li> <li>c</li>u </ul>

3.自定义列表

<dl> <dt>书籍</dt> <dd>c</dd> <dd>python</dd> <dd>java</dd> <dt>数量</dt> <dd>100</dd> <dd>1000</dd> <dd>10000</dd> </dl>

dl:标签 dt:列表名称 dd:列表内容

6.表格

<table border="1px"> <tr> <td colspan="4">1-1</td> </tr> <tr> <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> </tr> <tr> <td>3-1</td> <td>3-2</td> </tr> </table>

colspan:跨列 rowspan:跨行

7.媒体元素

1.视频元素

<video src="../resources/video/1.mp4" controls autoplay></video>

controls：表示控制条 autoplay：表示自动播放 2.音频元素

<audio src="../resources/audio/Faded.mp3" controls autoplay></audio>

8.页面结构

(1) header元素：标题头部区域内容 (2) footer元素：标记脚部区域内容 (3)section元素：独立区域 (4) article：独立的文章内容 (5) aside：相关内容和应用 (6) nav：导航类辅助内容

9.iframe内联框架

第一种：

<iframe src="http://www.baidu.com" frameborder="0" width="500px" height="400px"/>

第二种：

<iframe src="" name="hello" frameborder="0" width="500px" height="400px"/> <a href="http://www.baidu.com" target="hello">点击跳转</a>

10.表单

<form action="1.html" method="get"> <p>姓名：<input type="text" name="username"></p> <p>密码：<input type="password" name="pwd"></p> <p> <input type="submit"> <input type="reset"> </p> </form>

action : 表单提交位置，可以是网站，也可以是一个请求地址 method ： post ，get 提交方式 get : 可以在url中看到我们提交的信息，不安全，但高效 post : 比较安全，可以传输大文件

1.表单元素格式 type : 指定元素类型 name : 指定表单名称 value : 元素的初始值。type为radio时必须指定一个值 size : 指定表单元素的初始宽度 maxlength : type为text或password时，输入的最大字符数 checked : type为radio或checkbox时，指定按钮是否被选中 2.单选框(radio)

<p>性别： <input type="radio" value="girl" name="sex">女 <input type="radio" value="boy" name="sex" checked>男 </p>

name相同，表示为一个组，只能选一个 checked表示默认选中 3.多选框

<p>爱好: <input type="checkbox" value="sleep" name="hobby" checked>睡觉 <input type="checkbox" value="watch" name="hobby">看片 <input type="checkbox" value="run" name="hobby">跑步 </p>

checked表示默认选中 4.按钮

<p> <input type="button" name="btn" value="提交"> <input type="image" src="../resources/images/1.jpg"> </p>

注：点击后直接提交 5.下拉框

<p>选择游戏： <select name="列表名称"> <option value="选项的值" selected>dnf</option> <option value="选项的值">lol</option> <option value="选项的值">csgo</option> </select> </p>

selected表示默认选中 6.文本域

<p>发表你的意见： <textarea name="textarea" cols="20" rows="20">你的想法</textarea> </p>

cols表示行，rows表示列 7.文件域

<p> <input type="file" name="files"> <input type="button" value="上传"> </p>

8.邮件,url,数字验证验证

<p>邮箱： <input type="email" name="email"> </p> <p>URL: <input type="url" name="url"> </p> <p>数量： <input type="number" name="num" max="100" min="0" step="1"> </p>

9.滑块

<p>voice： <input type="range" name="voice" min="0" max="100" step="3"> </p>

10.搜索框

<p>search: <input type="search" name="search"> </p>

11.表单验证 placeholder设置提示性信息 required 设置属性不能为空 pattern(正则表达式) 12.其他属性设置 readonly 设置仅读 disable 设置禁用 hidden 设置隐藏域