HTML

注释

<!--   -->  （Ctrl + /）

块元素

占一行的代码

行内元素

不占一行的代码

基本标签

• 标题标签

<h1>一级标签</h1> <h2>二级标签</h2> ···

• 段落标签

<p>段落</p>  （ P + Tab ）

• 换行标签

换行<br/>

• 水平线标签

<hr/>

• 字体样式标签

粗体：<strong>i love you</strong>   斜体：<em>i love you</em>

• 特殊符号

空&nbsp；&nbsp；&nbsp；&nbsp；格
>: &gt;   <: &lt;  

图像标签

<img src="../resources/image/1.jpg" alt="图像的替代文字" title="悬停文字" width="" height="">

超链接标签

• a标签

href:超链接
target:
    blank:跳转新页面;
    self:本页面跳转

• 锚标签

<a id="top">顶部</a>  --使用id作为标记
<a href="#top">回到顶部</a>
<a href="https://www.baidu.com"target="_self">点我跳转</a>

• 功能性链接

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

列表标签

• 有序列表 order list

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

• 无序列表 unorder list

<ul>
    <li>java</li>
    <li>python</li>
</ul>

• 自定义列表 design list dt：列表标题 dd：列表内容

<dl>
    <dt>位置</dt>
     <dd>china</dd>
     <dd>america</dd>
     <dd>england</dd>
</dl>

表格标签 table

<!--lpx 表格-->
<table border="lpx">  
    <tr>
        <!--colspan 跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <!--rowspan 跨行-->
        <td rowspan="2">2-1</td>
    </tr>
</table>

媒体元素

<!-- 视频video   音频：audio
src：资源路径
controls：控制条
autoplay：自动播放
-->

网页结构分析

<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>

iframe内联框架

<iframe src="" id="hello" frameborder="0" width="1000px" height="800px"></iframe>

<a href="1.我的第一个网页.html" target="hello">点击跳转</a>

表单

<form action="1.我的第一个网页.html" method="post">  action:表单提交的位置，可以是网站，一个请求处理地址

<!--文本输入框-->
<p>名字：<input type="text" id="username"></p>
<p>密码: <input type="password" id="pwd"> </p>

<p>
    <input type="submit">
    <input type="reset">
</p>

</form>

<!--    单选框标签 type: raio
value:单选框的值
name：表示组
-->
    <p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

<!--    多选框 type = checkbox-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="game" name="hobby">游戏
    </p>
<!--
普通按钮 type = button
图像按钮 type = image
-->

<!--    下拉框
selected 默认
-->
    <p>国家：
        <select name="列表名称" >
            <option value="china" selected>中国</option>
            <option value="us">美国</option>
        </select>
    </p>

<!--    文本域-->
    <p>
        <textarea name="textarea" cols="30" rows="10">文本</textarea>
    </p>

<!--    文件域-->
    <p>
        <input type="file" name="file">
    </p>

<!--    滑块-->
    <p>音量：
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>

隐藏域 hidden
只读 readonly
禁用 disabled
用户提示 placeholder
非空判断 require
正则表达式 pattern