前端之HTML

qsdnet我想学编程 2020-06-13

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. 更多详细内容

点此进入

相关推荐