前端之HTML_安科网

1. 前端概述

1.1 前端

前端和后端，站在代码执行位置的角度来区分的话，服务端所执行的代码被称为后端代码，也就是这部分代码是在服务器上运行的。

而我们所看到的网页内容，是我们的浏览器获取到服务器处理后发来的结果（代码）之后，在本地进行渲染后所呈现的效果。
也就是说，这部分代码是在客户端本地执行的，那么这些在客户端本地执行的代码就叫前端代码。

总的来说，前端就是在客户端执行的代码，而后端，就是在服务端执行的代码。

1.2 HTML

HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言。

这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页。

html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

2. HTML的基本标签

<!DOCTYPE>  <!--告诉浏览器，以下的html文本按照标准模式(W3C标准)渲染-->
<!--html标签不区分大小写-->
<!--html标签分为闭合标签和自闭合标签-->
<!--html标签的属性通常是以键值对的形式出现，且只能出现先开始标签中-->
<!--如果属性值和属性名完全一样，直接写属性名即可-->
<!--标签存在的意义是为了方便让css、js对指定内容进行操作-->
<html lang="en">
    <head>
        <!-- html页面的标题，head标签中的内容除了title，其他用户都看不见 -->
        <title>Pray の 小破站</title>
        <!-- 设置字符编码，下面两者等价，选一种即可 -->
        <meta charset="UTF-8">   <!-- 这里其实是下面写法的简写 -->
        <meta http-equiv="content-type" charset="UTF-8">
        <!-- 设置搜索引擎搜索关键字和网站描述 -->
        <meta name="keywords" content="生活,日常,分享,扯淡">
        <meta name="description" content="人生天地之间，如白驹之过隙">
        <!-- 自动刷新 -->
        <!-- <meta http-equiv="refresh" content="5;URL=http://cnblogs.com/hgzero">-->
        <!-- 显示页面的图标，浏览器上方显示的图标 -->
        <link rel="icon" href="https://cdn.jsdelivr.net/gh/hgzerowzh/blog_website/data/image/my_head_phote.png">
    </head>
 
    <body>
        <div id="first">这里是顶部，这里设了一个a标签的锚点</div>
        <h1>1. 最基本的几个标签</h1>
        <!-- h1到h5的字体大小依次递减 -->
            <h2>1.1 几个特殊图标和符号</h2>
                <p>这里的nbsp代表一个空格&nbsp;&nbsp; </p>
                <p>这里的&gt;和&lt;分别表示大于和小于</p>
                <p>这里的br标签是<br>换行标签</p>
 
            <h2>1.2 几个字体格式</h2>
                <strong>这是加粗标签，行内元素，表示非常重要的内容</strong>
                <hr> <!--这里的hr标签是用来打印一条横线的-->
                <b>加粗，行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名</b>
                <strike>这个标签是在文本上加删除线</strike>
                <em>斜体标签，行内元素，表示语气中的强调词</em>
 
            <h2>1.3 块级标签和内联标签，所有的标签都分为块级标签和内联标签</h2>
                <span>这是一个内联标签，</span>
                <span>span标签只占它所包含的内容的范围，</span>
                <span>这里定义了三个span标签，它们显示在同一行了。</span>
                <div>div是一个块级标签</div>
                <div>每个div独占一行</div>
                <div><a href="http://hgzerowzh.com">Pray の 小破站</a></div>
                <h3>块级标签</h3>
                    <div>h1到h5的h系标签，h系列标签的自身特性是加大加粗</div>
                    <div>div标签是块级标签，div的特性就是一个白板</div>
                    <div>p标签，p标签的特性是段落和段落之间有间隙</div>
                <h3>行内标签</h3>
                    <div>span标签，它的特性就是一个白板</div>
 
            <h2>1.4 图片和超链接标签</h2>
                <a href="http://hgzerowzh.com" target="_blank">
                    <img src="https://cdn.jsdelivr.net/gh/hgzerowzh/blog_website/data/image/null-b836ed.jpg"
                        alt="图片显示失败后显示这里的内容" title="鼠标悬浮此图片上就显示这里的内容" width="150px" height="160px">
                </a>
                <div></div>
                <!--这里的target="_blank"表示点击a标签后会新开一个窗口进行a标签的跳转-->
                <!--a标签是行内标签-->
                <a href="https://cdn.jsdelivr.net/gh/hgzerowzh/blog_website/data/image/wechat_code_money.png"
                   target="_blank">打赏一下</a>
                <!-- 通过a标签跳转到指定的锚点-->
                <a href="#top">回到首部</a>
    </body>
</html>

3. 列表和table表格

<!DOCTYPE> 
<html lang="en">
    <head>
        <title>Pray の 小破站</title>
        <meta charset="UTF-8"> 
    </head>
    <body>
        <h1>1. 列表和表格</h1>
            <h2>列表</h2>
                <h3>有序列表</h3>     <!--有序列表，开头以数字序号表示-->
                     <ol>
                        <li>a</li>
                        <li>b</li>
                        <li>c</li>
                    </ol>
                <h3>无序列表</h3>     <!--无序列表，开头以点号表示-->
                    <ul>
                        <li>a</li>
                        <li>b</li>
                        <li>c</li>
                    </ul>
                <h3>自定义列表</h3>    <!--自定义列表-->
                    <dl>
                        <dt>第一章</dt>
                            <dd>第一节</dd>
                            <dd>第二节</dd>
                        <dt>第二章</dt>
                            <dd>第一节</dd>
                            <dd>第二节</dd>
                    </dl>
 
            <h2>table表格</h2>
                <table border="1px" cellpadding="5x" cellspacing="2px">
                    <!--border表示表格的边框的厚度占用1px-->
                    <!--cellpadding表示内边距，cellspacing表示外边距-->
                    <thead>
                        <tr>
                            <th rowspan="2">111</th>  <!--rowspan表示单元格竖跨多少行-->
                            <th>222</th>
                            <th>333</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>111</td>
                            <td colspan="2">222</td>  <!--colspan表示单元格横跨多少列-->
                        </tr>
                    </tbody>
                </table>
 
                <!--写表格也可以直接用tr、th、td来写-->
                <table border="1px" cellpadding="5px" cellspacing="2px">
                    <tr>
                        <th rowspan="2">111</th>  <!--rowspan表示单元格竖跨多少行-->
                        <th>222</th>
                        <th>333</th>
                        <th>444</th>
                    </tr>
 
                    <tr>
                        <td colspan="2">222</td>  <!--colspan表示单元格横跨多少列-->
                        <td>333</td>
                    </tr>
                </table>
    </body>
</html>

4. form表单和input标签

<!DOCTYPE> 
<html lang="en">
    <head>
        <title>Pray の 小破站</title>
        <meta charset="UTF-8"> 
    </head>
    <body>
        <h1>1. 登录注册页面,form表单,input系列</h1>
            <form action="http://127.0.0.1:8080/index" method="POST" enctype="multipart/form-data">
            <!-- method默认以get方式提交, 这里后面的enctype属性是为了上传文件-->
            <!-- get方式提交会将内容添加作为url的后缀-->
 
                <!--这里的placeholder中的值是显示在input框中的文本内容-->
                <p>姓名<input type="text" name="username" placeholder="姓名"></p>
                <p>密码<input type="password" name="password" placeholder="密码"></p>
 
                <!--多选框-->
                <p>爱好：
                    音乐<input type="checkbox" name="hobby" value="music">
                    电影<input type="checkbox" name="hobby" value="movie" checked="checked">
                    电影<input type="checkbox" name="hobby" value="talking">
                </p>
                <!--单选框-->
                <p>性别：
                    男<input type="radio" name="gender" value="man" checked="checked">
                    女<input type="radio" name="gender" value="women">
                </p>
 
                <!--上传文件时，必须在form表单中添加一个enctype的属性-->
                <p><input type="file" name="put_file"></p>    <!-- 这是上传文件按钮 -->
                <p><input type="submit" value="提交注册"></p>  <!-- 这里的value值就是此提交框中显示的文本内容 -->
                <p><input type="reset" value="重置"></p>       <!-- 这是一个重置按钮 -->
                <p><input type="button" value="只是一个按钮"></p>
 
                <!--input框的属性：-->
                    <!--name:表单提交项的键-->
                    <!--value：表单提交项的值-->
                    <!--checked：radio和checkbox默认被选中-->
                    <!--readonly：只读模式， text和password-->
                    <!--disabled：禁用，失去所有的功能，对所有的input框都好使-->
 
                <!-- 以上表单标签中的name属性其实是传递给server端的键值对中的键(key)，对应的值(value)就是用户选择或输入的选项-->
                <!-- 以上传递信息被封装成了一个字典传递给server端 ：  {"username":"hgzero", "password":"12345", "hobby":["music", "movie"], "gender":"man"}-->
            </form>
    </body>
</html>

5. select标签和其他

<!DOCTYPE> 
<html lang="en">
    <head>
        <title>Pray の 小破站</title>
        <meta charset="UTF-8"> 
    </head>
    <body>
        <h1>4. select标签和其他杂项</h1>
            <h2>select标签</h2>
                 地区：
                <!--这里的multiple是表示可以多选,size表示显示的最大个数-->
                <select name="place" multiple="multiple" size="3">
                    <option value="beijing" selected="selected">北京市</option>  <!--这里的selected表示默认选中-->
                    <option value="shanghai">上海市</option>
                    <option value="hefei">合肥市</option>
                    <option value="chongqing">重庆市</option>
                    <option value="chengdu">成都市</option>
                </select>
 
                安徽：
                <select name="place" multiple="multiple" >
                    <!--这里的optgroup标签表示只是一个标题，不可选中-->
                    <optgroup label="安徽省">
                        <option value="anqing" selected="selected">安庆市</option>
                        <option value="合肥">合肥市</option>
                    </optgroup>
                </select>
 
            <h2>其他杂项</h2>
                <!--一个大的文本输入栏，cols：文本默认有多少列，rows：文本默认有多少行-->
                简介
                <textarea name="desc" cols="20" rows="5"></textarea>
 
                <div></div>
                <input id="www" type="text">
                <!--这里的label标签for中的值要与上面id中的值相同，以完成点击label标签中的文字就可以激活input输入框的特效-->
                <label for="www">姓名</label>
    </body>
</html>

6. 更多详细内容

点此进入

前端之HTML