码迷,mamicode.com
首页 > Web开发 > 详细

前端开发 - HTML

时间:2018-08-28 21:19:31      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:应用   密码   val   ice   距离   表单标签   https   max   编号   

1.index
2.head标签相关内容
3.常用标签一
4.常用标签二 table
5.常用标签二 form
6.标签分类

1.index
<!--声明文档的类型 标记该文档为HTML5的文件-->
<!DOCTYPE html>

<!-- 页面的根节点 -->

<!--
html中的标签都是闭合标签  闭合标签包含 双闭合和单闭合
双闭合:<html></html>
单闭合:<meta />
 -->

<html>
    <head>
        <!-- 声明头部的元信息  对我们文档 规定编码格式 -->
        <meta charset="utf-8">
        <!-- 包含头部的信息  是一个容器 包含 style title meta script link等 -->
    </head>
    <body>
        <!-- 包含浏览器显示的内容标签 div p a img input等等 -->
        这是我们的文档结构
    </body>
</html>

 

2.head标签相关内容
<!DOCTYPE html>
<!--en 能翻译网页-->
<html lang="en">
<head>
    <!-- 文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用(移动端) -->

    <!--文档的标题-->
    <title>路飞学城</title>

    <!-- 常用两个属性
        http-equiv:它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
      -->
    <!--指定文档的内容类型和编码类型 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <!-- 5秒之后 重定向 到路飞学城的网站 -->
    <meta http-equiv="refresh" content="5;URL=https://www.luffycity.com" />

    <!--告诉IE浏览器以最高级模式渲染当前网页-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <!-- 为了我们的SEO优化  工作的时候下面这两句 要写-->
    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
    <meta name="description" content="路飞学城">

    <!-- 定义我们的网站图标 -->
    <link rel="icon" href="fav.ico">

    <!-- 引入外部样式表 -->
    <link rel="stylesheet" type="text/css" href="index.css">

    <!--定义内部样式表-->
    <style type="text/css">

    </style>

    <!--定义内部脚本文件-->
    <script type="text/javascript">

    </script>

    <script src="index.js"></script>


</head>
<body>

</body>
</html>

<!--这里是用 html:5 + Tab 自动生成的!!-->
<!--<!doctype html>-->
<!--<html lang="en">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<meta name="viewport"-->
          <!--content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
    <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <!--<title>Document</title>-->
<!--</head>-->
<!--<body>-->

<!--</body>-->
<!--</html>-->

 

3.常用标签一

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>常用的标签一</title>
</head>
<body>

    获得体面的               工作和


    生

    活

    获得体面的&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;工作和生活

    <div class="p1">
         <p style="height: 2000px;" id="p1">顶部</p>
    </div>

    <div class="heading" style="height: 700px">
        <!--body相关标签-->
        <!--heading:标题h1-h6 没有h7 不要随意的通过 h 标签改变文字的大小 h 标签换行了 -->
        囊括行业<h2>最前沿</h2>的技术,为你提供最全面、最优质、最精彩的精品专题课程
        <!--块级元素:独占一行 可以设置宽高-->
        <h1>路飞学城</h1><h2>路飞学城</h2>
        <h3>路飞学城</h3>
        <h4 style="height: 100px;width: 100px">路飞学城</h4>
        <h5>路飞学城</h5>
        <h6>路飞学城</h6>
        <!--<h7>路飞学城</h7>-->
    </div>

    <div class="p1">
        <!--段落标签 块级元素 独占一行-->
        <p><strong>路飞学城</strong>立志帮助有<b>志向</b>的<i>年轻人</i>通过<u>努力学习</u>获得<s>体面</s>的<sup>工作</sup>和<sub>生活</sub>!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>
        <p><em>路飞学城</em>立志帮助<br>有志向<br>的年轻人<hr>通过努力学习<hr>获得体面的工作和生活!<hr><span>路飞学员</span>通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>
        <p id="p2">我们</p>
    </div>

    <div class="anchor" >
        <!-- a 标签属于行内标签:在一行内展示 -->
        <!--
            _self:默认值:在当前网站啊打开资源
            _blank:在新的网站打开资源
        -->
        <a href="https://www.luffycity.com" target="_blank" title="luffy" >路飞学城</a>

        <a href="a.zip">下载压缩包</a>

        <!-- a 标签一行显示 设置高度 宽度 不起作用 -->
        <a href="mailto:zhaoxu@tedu.cn" style="width: 1000px;height: 300px">联系我们</a>
        <!--返回页面顶部内容-->
        <a href="#">跳转到顶部</a>

        <a href="#p1">跳转到顶部的段落标签</a>
        <a href="#p2">跳转到我们标签</a>

        <!--
            javascript:  是表示在触发<a>默认动作时,执行一段JavaScript代码
            javascript:; 表示什么都不执行,这样点击<a>时就没有任何反应。把a的默认动作取消了
        -->
        <a href="javascript:alert(1)">内容</a>
        <a href="javascript:">内容吧</a>

        <!--1. `<b></b>`:加粗-->
        <!--2. `<i></i>`:斜体-->
        <!--3. `<u></u>`:下划线-->
        <!--4. `<s></s>`:删除线-->
        <!--5. `<sup></sup>`:上标-->
        <!--6. `<sub></sub>`:下标-->
        <!---->
        <!--现在如果想在一段文字中特别强调某几个字,这时候就可以用到`<em>`或`<strong>`标签。-->

    </div>

    <div class="lists">
        <!-- ul ol li 块级元素-->
        <!--无序列表 默认时实心圆disc-->
        <ul type="square" style="height: 200px;width: 200px">
            <li>我的账户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;</li>
            <li>我的订单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;</li>
            <li>我的优惠券&nbsp;&nbsp;&gt;</li>
            <li>我的收藏&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;</li>
            <li>退出&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</li>
        </ul>
        <!--有序列表 默认是数字-->
        <ol style="list-style: none">
            <li style="height: 200px;width: 200px">我的账户 ></li>
            <li>我的订单 ></li>
            <li>我的优惠券 ></li>
            <li>我的收藏 ></li>
            <li>退出 ></li>
        </ol>
        <!--
            ol标签的属性:
            type:列表标识的类型
                1:数字
                a:小写字母
                A:大写字母
                i:小写罗马字符
                I:大写罗马字符
            列表标识的起始编号
            默认为1

            ul标签的属性: type:列表标识的类型
                disc:实心圆(默认值)
                circle:空心圆
                square:实心矩形
                none:不显示标识
        -->
    </div>
    
    <div class="image">
        <!--img 行内块标签 1.在一行内显示 2.可设宽高-->
        <img src="homesmall1.png" alt="python的图片" style="width: 200px; height: 200px; " />
        <img src="homesmall2.png" alt="linux的图片" style="width: 200px; height: 200px" />
    </div>

    <div class="image">
        <ul type="none">
            <li>
                <a href="javascript:"><img src="homesmall1.png" alt="python的图片" /></a>
            </li>
            <li>
                <img src="homesmall2.png" alt="linux的图片" style="cursor: pointer" />
            </li>
        </ul>

    </div>

    <!--
    总结:
        1.块级元素 特点:独占一行,可设宽高,如果不设宽度,则是浏览器的宽度 (div p h ul ol li )
        2.行内元素 特点:在一行内展示,不能设置宽高,它的宽高时根据内容去填充 (a span )
        3.行内块元素 特点:在一行内展示,可设宽高 (img)
    -->
    <!--
    小练习:
        展示两张图片独占一行,鼠标移上去显示小手的状态!
    -->
    <!--
    其他标签:
        <br> 换行
        <hr> 分割线
    特殊符号:
        浏览器显示时 会移除源代码中多余的空格和空行;所有连续的空格或空行都会被算作一个空格;
        注意:html代码中所有连续的空行(换行)空格 都会被显示为 一个空格

        空格:&nbsp;
        特殊符号对照表: http://tool.chinaz.com/Tools/HtmlChar.aspx
        eg:   <     &lt;
              >     &gt;
    -->


</body>
</html>

4.常用标签二 table

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!--表格 给table 对象添加属性 cellspacing 单元格之间的距离 -->
    <table border="1" cellspacing="0">
        <!--表格头-->
        <thead>
            <tr>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>

        <!--表格主体-->
        <tbody>
            <!--表格主体的每一行-->
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
        </tbody>

        <!--<tfoot></tfoot>-->
    </table>

    <table border="1" cellspacing="0">
        <!--表格头-->
        <thead>
            <tr>
                <th></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>

        <!--表格主体-->
        <tbody>
            <!--表格主体的每一行-->
            <tr>
                <td rowspan="3">上午</td>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td rowspan="2">下午</td>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td colspan="6">课程表</td>
            </tr>
        </tfoot>
    </table>

</body>
</html>

5.常用标签二 form

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>表单控件</title>
</head>
<body>
    <div class="form">
        <!--form标签是一个块级元素 被提交-->
        <form action="https://www.baidu.com" method="get">

            <!--label标签行内元素--><!--input是行内块元素-->
            <p>
                <label for="user">用户名:</label>
                <input type="text" name="username" id="user" placeholder="请输入用户名" >
            </p>

            <p>
                <label for="password">密码:</label>
                <input type="password" name="password" id="password" placeholder="请输入密码">
            </p>

            <!--单选框 checked 会被默认选中 产生互斥 name 值要相同-->
            <p>
                用户性别:
                <input type="radio" name="sex" value="" checked><input type="radio" name="sex" value=""></p>

            <!--复选框-->
            <p>
                用户的爱好:
                <input type="checkbox" name="checkfav" value="" checked="checked"><input type="checkbox" name="checkfav" value=""><input type="checkbox" name="checkfav" value="" checked><input type="checkbox" name="checkfav" value=""></p>

            <!--文件上传 file 表单的method的方法是 post 不能是get -->
            <p>
                <input type="file" name="textfile">
            </p>

            <!--文本域-->
            <p>
                自我介绍
                <textarea cols="20" rows="5" name="txt" placeholder="请做自我介绍"></textarea>
            </p>

            <!--下拉列表 size设置高度 multiple可多选 selected默认选中 -->
            <p>
                <label for="sel">城市:</label>
                <select name="sel" id="sel" size="3" multiple>
                    <option value="北京">北京</option>
                    <option value="上海" selected>上海</option>
                    <option value="广州">广州</option>
                    <option value="深圳">深圳</option>
                </select>
            </p>

            <!--按钮-->
            <p>
                <!--显示普通的按钮-->
                <input type="button" name="btn" value="提交" disabled>
                <!--重置按钮-->
                <input type="reset" name="" >
                <!--提交form表单使用 type=submit 按钮-->
                <input type="submit" name="btn" value="submit">
            </p>

        </form>
        <button type="button">按钮</button>  <!--类似 普通的按钮-->

        <!--
        总结:
            按钮: button  reset  submit
            文本: label text password radio checkbox file textarea
            下拉框: select option
        -->
        <!--
        总结:
            html标签:
                head 标签:
                    title 标签,显示网站的标题
                    meta  标签,提供有关页面的原信息
                    style 标签,定义内部样式表
                    link  标签,链接css资源文件、网站图标
                    script 标签,链接脚本js文件
               body 标签:
                    h1 - h6 标题标签
                    p       段落标签
                    ul      无序列表标签
                    ol      有序列表标签
                    div     盒子标签
                    table   表格标签
                        th 定义表头
                        tr 定义表行
                        td 定义表单元格数据
                   form     表单标签
                        ...
                        action
                        method
                        enctype
                        表单控件分类:
                            textarea
                            select option
                            input
                            label
                        ...
                   img      标签
                   br       换行标签
                   hr       分割线标签
                   &nbsp;   空格字符
                   a        超链接标签
                   span     标签
                   button   按钮
        -->
    </div>

</body>
</html>

6.标签分类 

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>标签分类</title>
</head>
<body>
   <!--
    1.标签属性 注意事项:
        1.HTML标签除一些特定属性外可以设置自定义属性,一个标签可以设置多个属性用空格分隔,多个属性不区分先后顺序。
        2.属性值要用引号包裹起来,通常使用双引号也可以单引号。
        3.属性和属性值不区分大小写,但是推荐使用小写。
    2.标签分类:
        HTML中标签元素三种不同类型:块状元素,行内元素,行内块状元素。
        常用的块状元素:
            <div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
        常用的行内元素
            <a> <span> <br> <i> <em> <strong> <label>
        常用的行内块状元素:
            <img> <input>

        块级元素特点:display:block;
            1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。独占一行
            2、元素的高度、宽度、行高以及顶和底边距都可设置。
            3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
        行内元素特点:display:inline;
            1、和其他元素都在一行上;
            2、元素的高度、宽度及顶部和底部边距不可设置;
            3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
        行内块状元素的特点:display:inline-block;
            1、和其他元素都在一行上;
            2、元素的高度、宽度、行高以及顶和底边距都可设置
        注意
            我们可以通过display属性对块级元素、行内元素、行内块元素进行转换,为后面页面布局做好了准备。
    3.标签嵌套规则:
        块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素,例如:
            <div><div></div><h1></h1><p><p></div> ??
            <a href=”#”><span></span></a> ??  a 可以包含 img
            <span><div></div></span> ?
        某些块级元素不能放在p标签里面,比如
            <p><ol><li></li></ol></p> ??
            <p><div></div></p> ? 个别例外,大家注意
        有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:
            h1、h2、h3、h4、h5、h6、p
        li元素可以嵌入ul,ol,div等标签
            <ul>
                <li>
                    <ul>
                        <li>
                            <div>

                            </div>
                        </li>
                        <li>
                            <ol>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ol>
                        </li>
                    </ul>
                </li>
            </ul>

    -->
    <div class="wrapper">
        <!--块级元素: div p h1~h6 ol ul li table form
            块状元素:
                1.独占一行
                2.可以设宽度和高度,如果设置了宽度和高度,则就是当前的宽度和高度
                  如果没有设置,宽度就是父盒子的宽度,高度根据内容填充
        -->
        <div class="left">
            这是路飞学城的战场
            <div>这是我的段落
                <div style="width:500px;height: 100px">这是我的爱好</div>
                <ul>
                    <li>
                        <h2>读书</h2>
                    </li>
                     <li>
                        <ol>
                            <li>运动</li>
                            <li>学习</li>
                        </ol>
                    </li>
                </ul>
            </div>
        </div>

        <div class="right">
            <!--行内标签 a span br i en strong label
                hr 可以设置宽高;
                br 不可设置宽高;
                行内元素:在一行内展示,不能设置宽度和高度,宽度和高度根据内容填充
             -->
            <a href="#" style="width: 200px;height: 100px">百度</a>
            <a href="#">luffy</a>
            <span style="width: 100px;height: 100px">一些文本</span>
            <span>一些文本</span>
            <i>我是i</i>
            <hr style="height: 100px;width: 100px">
            <em>我是em</em>
            <br style="width: 200px;height: 100px">
            <strong style="height: 200px;width: 100px;">我是strong</strong>

        </div>

        <div class="inline-block">
            <!--行内块
                1.在一行内展示
                2.可设置宽高
            -->
            <img src="homesmall1.png" alt="一张图片" style="height: 500px;width: 500px">
            <label for="txt">测试</label>
            <input type="text" name="username" id="txt" style="width: 200px;height: 50px">
        </div>

    </div>


</body>
</html>

前端开发 - HTML

标签:应用   密码   val   ice   距离   表单标签   https   max   编号   

原文地址:https://www.cnblogs.com/mumupa0824/p/9550687.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!