博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

第一节 前端基础之HTML

Posted on 2017-03-20 19:39  Jasonhy  阅读(159)  评论(0)    收藏  举报

　　　HTML是什么？是一种超文本标记语言。超文本既页面内可以包含图片，链接，甚至音乐，程序等非文字元素；标记简单的说就是标签,比如:<h1>标题</h1>。标签分为单标签：<!DOCTYPE html>(注：我们在创建HTML文件的时候，基本都要写这个，那是因为每个浏览器的渲染是不一样的，后来为了统一渲染效果，出现了W3C标准，当我们在页面添加这个标签的时候，就表示遵循的是W3C标准即CSS1Compat，否则就是一种默认的标准，也就是按照浏览器自己去渲染页面，称之为一种怪异模式BackCompat)；还有就是双标签，比如：<p></p>，<div></div>。标签和标签之间的关系又分为包含关系即父子关系和并列关系即兄弟关系，比如：

　　<!--父子关系-->
    <div>father
        <div>son</div>
    </div>
    
    <!--与father是兄弟关系-->
    <div>father's brother</div>

 

　　　说了这么多，先来看一下HTML的格式：

　　 head内的标签类型：

<!DOCTYPE html>
<html lang="en">
<head>
    <!--头部主要分为meta标签和非meta标签-->
    <!--meta有两个属性:
            http-equiv:
                当http-equiv设置为:
                    Refresh:刷新,我们可以指定在规定的时间内进行刷新
                    content-Type:指定编码,也可以不写
                    X-UA-Compatible:兼容便签,主要是用来兼容IE的

            name:
                当name设置为:
                    keywords:关键字搜索,用户可以根据我们设置的关键字,就可以搜索到我们的网站
                    description:描述,我们在进行搜索的时候,除了看到搜索的标题,还有就是标题下面的内容,这个内容就是description-->
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="Refresh" content="3,URL=https://www.baidu.com">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=EmulateIE7">

    <meta name="keywords" content="百, 百度, 百度一下">
    <meta name="description" content="百度一下,你就知道">


    <!--非meta标签-->
    <!--网页的标题-->
    <title>百度一下</title>
    <!--资源引入 图片-->
    <link rel="icon" href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png">
    <!--资源引入 css-->
    <link rel="stylesheet" href="css.css">

    <!--js引入 或编写js代码-->
    <script src="test.js"></script>
</head>

<!--用户真正看到的页面-->
<body>

</body>
</html>

　　　

　　　body内的标签类型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--基本标签-->
    <!--hn n表示1~6的值 用来表示字体的从大到小 用来表示标题-->
    <h1>百度一下 你就知道</h1>

    <!--p 段落标签 包裹的内容被换行 并且上下文之间有一行空白 -->
    <p>广州，简称“穗”，古称任嚣城、楚庭、番禺，是广东省省会、副省级市、国家中心城市、超大城市。</p>

    <!--b和strong是自己提加粗标签-->
    <b>广东省</b>
    <strong>广州市</strong>

    <!--strike为文本加上一条中直线 比如打折-->
    <strike>原价99元</strike>

    <!--em把字体变成斜体-->
    <em>现价只要59</em>

    <!--sub 下角标 sup上角标-->
    <sub>52</sub>
    <sup>78</sup>

    <!--br换行-->
    <br/>
    <!--hr水平线-->
    <hr>

    <!--div没有自己特有的特点 主要是用来结合css使用 是块标签-->
    <div style="background-color: yellow">我主要使用结合css使用</div>

    <!--和div差不多,是一个内联标签-->
    <span style="background-color: red">只有这么大</span>

    <!--注:
        块标签:①总是在新行开始 ②宽度缺省是宽度的100%,除非设定一个宽度 ③可以容纳内联元素和其他元素
        内联标签:①和其他元素都在一行上 ②宽度就是内容的宽度,不可改变 ③只能容纳文本或者其他内联元素
        建议:一般不要将内联标签和块标签并列-->

    <!--图形标签img
        src:要显示的图片路径
        alt:图片加载失败的时候显示的信息
        title:鼠标悬浮时提示信息
        width,height:设置图片宽高,如果只设置一个的话,会自动缩放比例
    -->
    <br>
    <img src="girl.jpg" alt="美女" title="美女" width="100px" height="100px">

    <!--超链接:
        href:要跳转的地址
        target:打开的方式,_blank表示以一个新的窗口打开
    -->
    <a href="https://www.baidu.com/" target="_blank">百度</a>

    <!--列表标签-->
    <!--无序列表-->
    <ul>
        <li>无序1</li>
        <li>无序2</li>
        <li>无序3</li>
    </ul>

    <!--有序列表-->
    <ol>
        <li>有序1</li>
        <li>有序2</li>
        <li>有序3</li>
    </ol>

    <!--定义列表-->
    <dl>
        <dt>标题</dt>
        <dd>子项1</dd>
        <dd>子项2</dd>
        <dd>子项3</dd>
    </dl>

    <!--表格标签
        table:
            border:设置边框的大小
            cellpadding:内边距
            cellspacing:外边距
    -->
    <table border="1px" cellpadding="10px" cellspacing="5px">
        <thead>
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
        </thead>

        <tbody>
            <tr>
                <td>第一行</td>
                <td>第一行</td>
                <td>第一行</td>
            </tr>

            <tr>
                <!--rowspan:竖向合并-->
                <td>第二行</td>
                <td>第二行</td>
                <td rowspan="2">第二行</td>
            </tr>

            <tr>
                <!--colspan:横向合并-->
                <td colspan="2">第三行</td>
            </tr>
        </tbody>
    </table>


    <!--表单标签-->
    <!--模仿一个注册页面-->
    <!--action:表单要提交到的服务器地址
        method:提交方法
        enctype=如果有文件上传的话,需要添加-->
    <form action="127.0.0.1:8080" method="post" enctype="multipart/form-data">
        <p>姓名 <input type="text" name="username"></p>
        <p>密码 <input type="password" name="password"></p>
        <!--checkbox多选-->
        <p>爱好 唱歌<input type="checkbox" name="hobby" checked="checked"> 跳舞<input type="checkbox" name="hobby"></p>
        <!--radio单选-->
        <p>性别 男<input type="radio" name="gender"> 女<input type="radio" name="gender"></p>
        <p><input type="file" name="file" value="请选择文件"></p>
        <p><input type="reset" value="重置"></p>
        城市<select name="city" multiple="2">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="gz" selected="selected">广州</option>
            <option value="sz">深圳</option>
        </select>

        介绍<textarea name="desc" rows="5" cols="5"></textarea>

        <!--关联对应的id 用for来关联-->
        <label for="www">姓名</label>
        <input id="www" type="text">

        <!--fieldset:只是一个样式-->
        <fieldset>
            <legend>
                登录吧
            </legend>
            <input type="text">
        </fieldset>

        <!--submit和button的区别:submit可以将数据提交到server端,button仅仅是一个按钮,结合css使用-->
        <input type="submit" value="提交注册">
        <input type="button" value="提交注册">
    </form>
</body>
</html>