001 Python前端之HTML基础

开发工具

1. Hbuilder
2. Chrome浏览器

快捷键

1. Ctrl + Enter：在当前行进行换行
2. Shift+Enter：插入<br/>标签
3. Ctrl+R：运行项目
4. Ctrl+Shift+F：格式化代码
5. Alt+/：主动代码提示
6. Ctrl+1：修复提示

HTML注释

<!--我是要注释的内容-->

转义字符

<!--空格-->
&nbsp;
<!--大于-->
&gt;
<!--小于-->
&lt;

相对路径与绝对路径

1. 当前路径：./文件
2. 下一级路径：目录/文件
3. 上一级路径：../

标签特点

1. 标签大小写不敏感

属性特点

1. 属性总是在 HTML 元素的开始标签中规定

单标签

换行标签

<!--换行标签不写斜线也可以，能兼容，但是不要这样做，快捷键 Shift+Enter-->
<br/>

横线标签

<!--水平线，用于分隔内容-->
<hr />

图片标签

<!--
    src：图片路径
    alt：占位信息
    border：边框
    width：图片宽度
    height：图片高度
-->
<img src="图片路径" alt="正在加载">

双标签

标题标签

<!--<h1> 定义最大的标题。<h6> 定义最小的标题。-->

<h1>一级标题，加粗</h1>
<h2>二级标题，加粗</h2>
<h3>三级标题，加粗</h3>
<h4>四级标题，加粗</h4>
<h5>五级标题，加粗</h5>
<h6>六级标题，加粗</h6>

段落标签

<p>我是这个段落里面的内容</p>

列表标签

无序列表

<ul>
    <li>苹果</li>
    <li>葡萄</li>
    <li>香蕉</li>
    <li>荔枝</li>
</ul>

有序列表

<!--
    type：有序类型a|A|1
    start：开始序号
-->
<ol type="a|A|1" start="6">
    <li>苹果</li>
    <li>葡萄</li>
    <li>香蕉</li>
    <li>荔枝</li>
</ol>

自定义列表

<!--
    dl：自定义列表，
    dt：是自定义列表的项，
    dd：是列表的描述
-->
<dl>
    <dt>苹果</dt>
    <dd>苹果是一种水果</dd>
    <dt>香蕉</dt>
    <dd>香蕉也是一种水果</dd>
</dl>

超链接标签

<!--
    title：鼠标放上面会有描述
    target：
        _blank：在一个新的页面上打开一个页面
        _self：默认,在本页面基础上打开新网页
        ...
-->
<a href="www.hahaha.com" title="我是描述">点我</a>

块

<div style="height: 80px;background: red;"></div>

span标签

<!--
    分块标签，加上样式才有用
-->
今天是个<span>好</span>天气！

表格标签

<!--
    width="200px"：宽
    height="200px"：高
    border="1px"：边框
    bordercolor="red"：边框背景色
    cellpadding="5px"：单元格与内容之间的距离
    cellspacing="5px"：单元格与单元格之间的距离
    colspan="2"：横向合并
    rowspan="2"：纵向合并
-->
<table width="200px" height="200px" border="1px" bordercolor="red" cellpadding="5px" cellspacing="5px">
    <thead>表头</thead>
    <tr>
        <td>
            单元格1
        </td>
        <td>
            单元格2
        </td>
    </tr>
    <tr>
        <td>
            单元格1
        </td>
        <td>
            单元格2
        </td>
    </tr>
    <tfoot>
        <td>表脚</td>
    </tfoot>
</table>

form表单

<!--
    form：
        method：
            get：获取，得到，参数是明文的
            post：提交，参数不可直接看到
        action：
            响应服务器
    input：
        type：
            text：普通文本框
            password：密码，非明文文本框
            submit：提交按钮
            reset：重置表单内容的按钮
            radio：单选框，需要执行相同的name
            checkbox：多选框
        name：提交时候的key名字，提交必须写
-->

<form action="http://10.0.147.143/teach/get.php" method="get">
    用户名：<input type="text" name="username"/>
    密码：<input type="password" name="password"/>
    <input type="submit" value="提交"/>
</form>
<hr />
<form action="http://10.0.147.143/teach/post.php" method="post">
    用户名：<input type="text" name="username"/>
    密码：<input type="password" name="password"/>
    <input type="submit" value="提交"/>
</form>
<form action="" method="get">
    性别:<input type="radio" name="sex" id="sex" value="男" >男</input>
    <input type="radio" name="sex" id="sex" value="女" >女</input><br />
    爱好:<input type="checkbox" value="唱歌" name="hobby">唱歌</input>
        <input type="checkbox" value="跳舞" name="hobby">跳舞</input>
</form>

文本格式化标签

<b>     定义粗体文本。</b>
<big>   定义大号字。</big>
<em>    定义着重文字。</em>
<i> 定义斜体字。</i>
<small> 定义小号字。</small>
<strong>定义加重语气。</strong>
<sub>   定义下标字。</sub>
<sup>   定义上标字。</sup>
<ins>   定义插入字。</ins>
<del>   定义删除字。</del>