html学习笔记

html注释

快捷键：ctrl+/

<!--这是一个注释符号-->

标题标签

快捷键：h1+tab

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

段落标签

快捷键：p+tab

这里
没有
段落标签

<p>这是</p>
<p>三个</p>
<p>段落标签</p>

换行标签

快捷键：br+tab

这里
没有
换行标签

这是<br/>
换行标签

水平线标签

快捷键：hr+tab

这里来个水平线
<hr>

粗体和斜体

<strong>i love you</strong>
<em>i love you</em>

特殊符号

空          格
空        格
大于号：>
小于号：<

图像标签

<img src="../resources/image/aaa.jpg" alt="泳池图片加载失败" title="悬停文字">

链接标签

页面间链接

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

也可以通过点击图片跳转

<a href="https://www.baidu.com">
    <img src="../resources/image/aaa.jpg" alt="跳转百度" width="96dp" height="36dp">
</a>

以上都是在原本的页面进行跳转，也可设置成在新的页面跳转

<a href="https://www.baidu.com" target="_blank">
    在新的页面打开百度
</a>

默认为target="_self"，即为在原本页面进行跳转

锚链接

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

把id加在img里面无法跳转，只能在a标签里面

功能性链接

邮件链接：

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

列表标签

有序列表
<ol>
    <li>java</li>
    <li>python</li>
    <li>C</li>
    <li>C艹</li>
</ol>
<hr/>
无序列表
<ul>
    <li>java</li>
    <li>python</li>
    <li>C</li>
    <li>C艹</li>
</ul>

<!--dl 自定义列表
dt 列表名称
dd 列表内容-->
<hr/>
自定义列表
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>C</dd>
    <dd>C艹</dd>

    <dt>位置</dt>
    <dd>广东</dd>
    <dd>广西</dd>
    <dd>福建</dd>
    <dd>海南</dd>
</dl>

表格标签

行：tr
列：td

<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>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

媒体元素

视频

src：路径
controls：控制条
autoplay：自动播放

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

音频

src：路径
controls：控制条
autoplay：自动播放

<audio src="../resources/audio/音乐.mp3" controls></audio>

内联框架

方法一：

<iframe src="https://www.bilibili.com/" frameborder="0" height="600px" width="900px"></iframe>

方法二：

<iframe src="" frameborder="0" name="window" height="600px" width="900px"></iframe>
<a href="https://www.bilibili.com/" target="window">点击跳转</a>

（点击前）

（点击后）

表单

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

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

value：默认初始值
maxlength：最长字符
size：文本框长度

单选框

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

加入name属性使其归在同一个组

多选框

<p>
        爱好：
        <input type="checkbox" name="hobby" value="sleep">睡觉
        <input type="checkbox" name="hobby" value="code">代码
        <input type="checkbox" name="hobby" value="game">游戏
        <input type="checkbox" name="hobby" value="chat">聊天
    </p>

按钮

<p>
        按钮：
        <input type="button" name="btn1" value="点击边长">
        <input type="image" src="../resources/image/aaa.jpg" width="100sp" height="40sp">
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>

下拉框

<p>
        国家：
        <select name="列表名称" id="s1">
            <option value="china">中国</option>
            <option value="usa">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="japan">日本</option>
        </select>
    </p>

文本域和文件域

<p>
        反馈：
        <textarea name="textarea" id="textarea_1" cols="30" rows="10">文本内容</textarea>
    </p>

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

搜索框和滑块

<p>
        邮箱：
        <input type="email" name="email">
    </p>
    <p>
        url：
        <input type="url" name="url">
    </p>
    <p>
        滑块：
        <input type="range" name="range" min="0" max="100" step="2">
    </p>
    <p>
        搜索：
        <input type="search" name="search">
    </p>

表单的应用

只读标签

readonly

禁用标签

disabled

隐藏标签

hidden

增加鼠标可用性

<label for="mark">你点我试试</label>
        <input type="text" id="mark">

表单的初级验证

提示信息及非空判断

姓名：
        <input type="text" name="username" placeholder="请输入您的姓名" required>

正则表达式
pattern