HTML技术概要

HTML

1，一套规则，浏览器认识的规则
2，开发者：

 学习Html规则
 开发后台程序：
     - 写Html文件（充当模板的作用）
     - 数据库获取数据，然后替换html文件的指定位置（Web框架）

3，本地测试

 - 找到文件路径，直接浏览器打开
 - pycharm打开测试

4，编写Html文件

 - doctype对应关系
 - html标签，标签内部可以写属性 --> 只能写一个
 - 注释：<!-- 注释的内容 -->

5，标签分类

 - 自闭合标签
     <meta charset="UTF-8">
 - 主动闭合标签
     <title>MR. Dong</title>

6，head标签中

- <meta   --> 编码，跳转，刷新，关键字，描述，IE兼容
     <meta http-equiv="Refresh" content="3"> 刷新
     <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8" />
- title标签
- <link />  搞图标
- <style />	css样式
- <script /> JavaScript代码

7，body标签

 - 图标，   $gt; <
 - p标签，段落
 - br，换行
 - hr，横线
 ===== 小总结 =====
     所有标签可分为：
         块级标签：div(白板)，H系列（h标签，h1加大加粗），p标签（段落和段落之间有间距）
         行内标签：（内联标签） span(白板（自身不带特性）)
     标签之间可以嵌套
     标签存在的意义，css操作，js操作
     ps:chorme审查元素的使用
         - 定位
         - 查看样式
 - h系列
 - div
 - span

- input系列 + form标签
input type=“text” - 文本输入框
input type=“password” - 密码输入框
input type=“submit” - value=“提交” 提交表单按钮
input type=“button” - value=“登录” 普通按钮

input type="radio"      - 单选框 value，checked="checked"，name属性（name相同则互斥）
input type="checkbox"   - 复选框 value，checked="checked"，name属性（批量获取数据）
input type="file"       - 依赖form表单的一个属性 enctype="multipart/form-data"
input type="reset"      - 重置
<textarea>默认值</textarea>     - name属性，多行文本输入

代码：

<form enctype="multipart/form-data">
    <div>
    <input type="text" name="texts"/>
    <p>请选择性别</p>
    男：<input type="radio" name="gender" value="1" checked/>
    女：<input type="radio" name="gender" value="2"/>
    Alex：<input type="radio" name="gender" value="3"/>
    <p>爱好</p>
    篮球：<input type="checkbox" name="favor" value="1"/>
    足球：<input type="checkbox" name="favor" value="2" checked/>
    皮球：<input type="checkbox" name="favor" value="3"/>
    台球：<input type="checkbox" name="favor" value="4"/>
    网球：<input type="checkbox" name="favor" value="5"/>
    <p>技能</p>
    撩妹：<input type="checkbox" name="skill" checked/>
    写代码：<input type="checkbox" name="skill"/>
    <p>上传文件</p>
    <input type="file" />
    </div>
    <textarea name="meno">默认值</textarea><br/>
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
</form>

-select标签
-name，内部option value，提交到后台，size显示长度，muiltiple多选

<select name="city" multiple="multiple" size="2" >
       <option value="BJ">北京</option>
       <option value="SH">上海</option>
       <option value="SZ" selected="selected">深圳</option>
       <option value="CD">成都</option>
</select>

- a标签
- 跳转
- 锚   href="#某个标签的ID" 标签的ID不能重复
例：

<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<div id="i1" style="height:600px">第一章内容</div>
<div id="i2" style="height:600px">第二章内容</div>

-img
src="" 图片路径
alt="" 图片不存在时，显示alt的内容
title="" 鼠标放在图片上时显示的字体

 <a href="http://oldboyedu.com">
    <img src="1.jpg" title="大美女" style="height: 200px;width: 200px" alt="努力">
 </a>

- 列表

ul  以点开头
    li
ol  以数字开头
    li
dl  以dt的内容为开头，dd内容前面一个Tab键
    dt
    dd

代码：

<ul>
    <li>你好</li>
    <li>你好</li>
</ul>
<ol>
    <li>世界</li>
    <li>世界</li>
</ol>
<dl>
    <dt>你好</dt>
    <dd>世界</dd>
    <dd>世界</dd>
    <dt>Hello</dt>
    <dd>World</dd>
    <dd>World</dd>
</dl>     

- 表格

table
     thead
         tr
             th
     tbody
         tr
             td

合并单元格
colspan="" 行合并(等于几表示占几格)
rowspan="" 列合并(等于几表示占几格)

<table border="1">
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
                <th>表头4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td colspan="3">1</td>
            </tr>
            <tr>
                <td rowspan="2">2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
</tbody> 

- label
用于点击文字，使得关联的标签获取光标

     <label for="username">用户名：</label>
     <input id="username" type="text" name="user"/>

- fieldset
legend 属性

	<fieldset>
    	<legend>登录</legend>
	   <label for="username">用户名：</label>
	   <input id="username" type="text" name="user"/>
	</fieldset>