大小孩

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
Part12 – 前端之HTML

本节内容

  1. HTML

一、Web框架

Web框架本质参考 ： http://www.cnblogs.com/wupeiqi/articles/5237672.html

二、HTML

1、一套规则，浏览器认识的规则。
2、开发者：
    学习Html规则
    开发后台程序：
        - 写Html文件（充当模板的作用） ******
        - 数据库获取数据，然后替换到html文件的指定位置（Web框架）

3、本地测试
     - 找到文件路径，直接浏览器打开
     - pycharm打开测试
     
4、编写Html文件
    - doctype对应关系
    - html标签，标签内部可以写属性 ====> 只能有一个
    - 注释：  <!--  注释的内容  -->
    
5、标签分类
    - 自闭合标签
        <meta charset="UTF-8">
    - 主动闭合标签
        title>老男孩</title>
        
6、head标签
    - <meta  -> 编码，跳转，刷新，关键字，描述，IE兼容
            <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
    - title标签
    - <link /> 浏览器标签小图标，引用CSS样式文件
    - <style />    CSS样式
    - <script> 欠
    
7、body标签
     - 图标，      &nbsp;  &gt;   &lt;
     - p标签，    段落标签，段落间有间距
     - br，        换行
     - h系列    标题（加大加粗，块级标签）
     - div        白板（块级标签）
     - span        白板（行内标签）
     ======== 小总结  =====
        所有标签分为：
            块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
            行内标签： span（白板），a标签
        标签之间可以嵌套
        标签存在的意义，css操作，js操作
        ps:chorme审查元素的使用
            - 定位
            - 查看样式    
    
    - input系列 + form标签
        input type='text'     - name属性，value="赵凡" 
        input type='password' - name属性，value="赵凡" 
        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='rest'     - 重置

        <textarea >默认值</textarea>  - name属性
        select标签            - name,内部option value, 提交到后台，size，multiple
    
    - a标签
        - 跳转
        - 锚     href='#某个标签的ID'    标签的ID不允许重复
        
    - img 
        <img src="1.jpg" title="大美女" style="height: 200px;width: 200px;" alt="美女">
         src    图片路径
         alt    找不到图片的显示
         title    鼠标放在图片上的提示
         
    - 列表
        - 前边显示圆点
            ul
                li
        - 前边显示递增的阿拉伯数字
            ol
                li
        - 分层，dt是第一层，dd是第二层
            dl
                dt
                dd
    - 表格
        table
            thead            - 表头
                tr            - 表头的行
                    th        - 表头的列
            tbody            - 表内容
                tr            - 表内容的行
                    td        - 表内容的列
        colspan = ''        -合并列
        rowspan = ''        -合并行
        
    - label
        用于点击文件，使得关联的标签获取光标
        <label for="username">用户名：</label>
        <input id="username" type="text" name="user" />
        
    - fieldset（左上角带名称的方框）
        legend
    
- 20个标签
HTML笔记

1、结构说明

<!DOCTYPE html>

<!-- 类似html这种格式,<html>fasdfasdf</html>就是标签，称为html标签；lang="en"即标签内部的属性-->
<html lang="en">

<!--  头部  -->
<head>
    <meta charset="UTF-8">

    <!--  页面3秒自动刷新  -->
    <!--  <meta http-equiv="Refresh" Content="3">  -->

    <!--  页面3秒自动跳转  -->
    <!--  <meta http-equiv="Refresh" Content="3;Url=http://www.autohome.com.cn">  -->

    <!--  关键字  -->
    <meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部"/>

    <!--  描述，网站是做什么的  -->
    <meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全，最精彩的汽车新闻、行情、评测、导购内容，是提供信息最快最全的中国汽车网站。"/>

    <!--  标题  -->
    <title>老男孩</title>

</head>

<body>
    <div></div>

    <a href="http://www.oldboyedu.com">老男孩</a>
</body>
</html>
View Code

2、标签分类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
</head>
<body>
    <!--**块级标签**：h系列（标题，加大加粗），p标签（段落，不同段落间有间距），div标签（白板）-->
    <!--**行内标签**：span标签（白板），br标签（段内换行），a标签-->
    <p>12asdfasdfasdfasdfa<br />sdfasdfasdfasdf3</p>
    <p>123</p>

    <h1>Alex</h1>
    <h2>Alex</h2>
    <h3>Alex</h3>
    <h4>Alex</h4>
    <h5>Alex</h5>
    <h6>eric</h6>

    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>

    <div>1</div>
    <div>2</div>
    <div>3</div>

    <!--<a href="http://www.oldboyedu.com">李&nbsp;&nbsp;&nbsp;&nbsp;&gt;&lt;a&gt;杰</a>-->
</body>
</html>
View Code

3、标签嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    asdfasdf
    <div>
        <!--标签可以嵌套，根据标签id区分，id不可重复-->
        <div id="i1" style="position:fixed;bottom:0;right:0;">asdf</div>
        <div></div>
        <span></span>
    </div>
</body>
</html>
View Code

4、form表单、input

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- **form表单**，如果要提交内容需要加上这个标签 -->
    <!-- action 提交的地址 -->
    <!-- method 分GET(提交内容拼接在url即请求头中发送)、POST(提交内容在请求体中发送)-->
    <form action="http://localhost:8888/index" method="POST">
        <input type="text" name="user" />
        <input type="text" name="email"/>
        <input type="password" name="pwd"/>
        <!--{'user': '用户输入的用户','email': 'xx', 'pwd': 'xx' }-->
        <input type="button"  value="登录1"/>
        <input type="submit"  value="登录2"/>
    </form>
    <br/>
    <form>
        <input type="text" />
        <input type="password" />
        <input type="button"  value="登录1"/>
        <input type="submit"  value="登录2"/>
    </form>
</body>
</html>

form、input
View Code

5、form表单提交示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 向搜索引擎提交-->
    <form action="https://www.sogou.com/web">
        <!-- **输入框**，value即默认值 -->
        <input type="text" name="query" value="赵凡" />
        <input type="submit" value="搜索" />
    </form>
</body>
</html>
View Code

6、用户输入、文件上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <div>
            <!--**多行文本输入**-->
            <textarea name="meno" >asdfasdf</textarea>

            <!--**点击选择**-->
            <!--下拉框，默认size=1即下拉框形式，multiple="multiple"可以多选-->
            <select name="city" size="10" multiple="multiple">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3" selected="selected">南京</option>
                <option value="4">成都</option>
                <!--分组-->
                <optgroup label="河北">
                    <option value="5">承德</option>
                </optgroup>
            </select>

            <input type="text" name="user" />

            <p>请选择性别：</p>
            <!-- radio单选框，加相同的name这样只能同时选择一个，加value使后台识别值，checked="checked"默认选中-->
            男：<input type="radio" name="gender" value="1"  />
            女：<input type="radio" name="gender" value="2" checked="checked"/>
            Alex：<input type="radio" name="gender" value="3"/>

            <p>爱好</p>
            <!--checkbox复选框，后台根据name获取到值的列表，name用来区分不同的模块（性别、爱好）-->
            篮球：<input type="checkbox" name="favor"  value="1" />
            足球：<input type="checkbox" name="favor"  value="2" checked="checked" />
            皮球：<input type="checkbox" name="favor"  value="3" />
            台球：<input type="checkbox" name="favor"  value="4" checked="checked"/>
            网球：<input type="checkbox" name="favor"  value="5" />

            <p>技能</p>
            撩妹：<input type="checkbox" name="skill" checked="checked" />
            写代码：<input type="checkbox" name="skill"/>

            <p>上传文件</p>
            <!-- 提交依赖 form的enctype="multipart/form-data" -->
            <input type="file" name="fname"/>
        </div>

        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>
</body>
</html>
textarea、input

7、a标签、div标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--**a标签**，做超链接（url）、锚（页面内标签id）-->
    <!--href跳转的地址，target="_blank"在浏览器的新标签页中打开-->
    <!--href='#某个标签的ID'  标签的ID不允许重复-->
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>

    <div id="i1" style="height:600px;">第一章的内容</div>
    <div id="i2" style="height:600px;">第二章的内容</div>
    <div id="i3" style="height:600px;">第三章的内容</div>
    <div id="i4" style="height:600px;">第四章的内容</div>
</body>
</html>
View Code

8、img、列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--**图片**，src图片路径,alt找不到图片的显示,title鼠标放在图片上的提示。点击图片跳转需要将img包裹在a标签内-->
    <a href="http://www.oldboyedu.com">
        <img src="1.jpg" title="大美女" style="height: 200px;width: 200px;" alt="美女">
    </a>

    <!--**列表**，成对使用-->
    <!--前边显示圆点-->
    <ul>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
    </ul>
    <!--前边显示递增的阿拉伯数字-->
    <ol>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
    </ol>
    <!--分层，dt是第一层，dd是第二层-->
    <dl>
        <dt>ttt</dt>
        <dd>ddd</dd>
        <dd>ddd</dd>
        <dd>ddd</dd>
        <dt>ttt</dt>
        <dd>ddd</dd>
        <dd>ddd</dd>
        <dd>ddd</dd>
    </dl>
</body>
</html>
View Code

9、table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--**表格**，tr表示行，td表示列，border="1"加边框（low）-->
<!--例子，实际写的话用下边的标准写法，不用这个-->
<table border="1">
    <tr>
        <td>主机名</td>
        <td>端口</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>1.1.1.1</td>
        <td>80</td>
        <td>
            <!--加a标签，做跳转-->
            <a href="s2.html">查看详细</a>
            <a href="#">修改</a>
        </td>
    </tr>
    <tr>
        <td>1.1.1.1</td>
        <td>80</td>
        <td>第二行，第3列</td>
    </tr>
</table>

<!--**标准写法**-->
<table border="1">
    <!-- thead表头，tr表头的行，th表头的列-->
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头1</th>
            <th>表头1</th>
            <th>表头1</th>
        </tr>
    </thead>

    <!-- tbody表的内容，tr表内容的行，td表内容的列-->
    <tbody>
        <tr>
            <td>1</td>
            <!--colspan="3"，td占用左右3格，合并列-->
            <td colspan="3">1</td>
        </tr>
        <tr>
            <!--rowspan="2"，td占用上下2格，合并行。下一行的同位置格要去掉-->
            <td rowspan="2">1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    </tbody>
</table>

</body>
</html>
View Code

10、fieldset、label

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--**fieldset**一个边框，legend边框左上角的名字-->
    <fieldset>
        <legend>登录</legend>
        <!--**label标签**通常与input标签联用（点击label的文字使关联的标签获取光标），通过input的id关联-->
        <label for="username">用户名：</label>
        <input id="username" type="text" name="user" />
        <br />
        <label for="pwd">密码：</label>
        <input id="pwd" type="text" name="user" />
    </fieldset>
</body>
</html>
View Code

参考：

http://www.cnblogs.com/wupeiqi/articles/5237672.html
posted on 2018-02-27 20:56  大小孩  阅读(152)  评论(0)    收藏  举报