前端基础学习（1） HTML基本概念 HTML标签

前端基础学习（1） HTML基本概念 HTML标签

一、今日内容

  • 前端基本介绍
  • HTML基本结构
  • HTML标签

二、前端基本介绍

前端的学习路径主要包含HTML、CSS、JavaScript、jQuery、bootstrap、django、crm等；

我们日常使用的浏览器，本质上就是一个客户端，能够与服务器的socket服务端连接交换数据；URL（Uniform Resource Locator），即统一资源定位器，就是我们日常在浏览器地址栏输入的内容，经过DNS解析可以变成特定的服务端IP，从而完成浏览器的访问功能；我们将浏览器的动作定义为：

  • 请求：浏览器中socket客户端给服务端发消息；
  • 响应：服务端socket给客户端回复消息；

我们可以创建一个socket服务端，来亲自感受一下浏览器客户端与socket客户端的连接：

import socket

sk = socket.socket()
sk.bind(('127.0.0.1', 9000))
sk.listen()

while True:
    conn, addr = sk.accept()
    msg = conn.recv(1024).decode('utf-8')
    print(msg)
    # 响应格式：b'HTTP/1.1 200 ok\r\n\r\n'后面再加上内容
    conn.send(b'HTTP/1.1 200 ok\r\n\r\n')
    conn.send(b'hello')
    conn.close()

sk.close()

运行server.py后，我们打开浏览器，在地址栏输入：http://127.0.0.1:9000/，显示如下：

image-20201026162953330

并且我们的服务端也接收到了浏览器客户端发来的请求：

image-20201026163412833

而在现实中，我们一般不会只在网页放置简单的text文本，所以平时需要将网页的html代码（Hyper Text Markup Language，超文本标记语言）放置在.html文件中，socket服务端读取.html文件并将文件发送至浏览器客户端，浏览器完成解析后显示在浏览器页面中。所以这时我们的socket服务端需要这么写：

import socket

sk = socket.socket()
sk.bind(('127.0.0.1', 9000))
sk.listen()

while True:
    conn, addr = sk.accept()
    msg = conn.recv(1024).decode('utf-8')
    print(msg)
    conn.send(b'HTTP/1.1 200 ok\r\n\r\n')
    with open('1.html', mode='rb') as file_handler:
        r = file_handler.read()
    conn.send(r)
    conn.close()

sk.close()

三、HTML基本结构

.html文件的基本格式如下：

<!--基本格式-->
<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>  </title>
</head>
    
<body>
<!--主要内容-->
</body>
    
</html>

其中：

  • <!DOCTYPE html>声明本文件为一个.html文件；
  • <html lang="en">声明语言为英语；
  • <head></head>定义HTML的开头部分，它包含的内容不会再浏览器页面中直接显示，主要包含文档的元数据、配置信息等；
  • <meta>即元数据，定义了网页的元数据，<meta charset="UTF-8">即声明网页的编码方式为UTF-8，如不声明网页编码方式，可能会出现乱码，尤其是中文网页；
  • <body></body>是文本可见的网页主体内容；
  • <!--content-->为注释内容，注释的内容不会在网页上显示出来；

四、HTML标签

HTML标签是由尖括号包围的关键字，如<html>，<div>等；HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。也有一部分标签单是单独呈现的，标签里面可以带有若干属性，也可以不带属性；

有几个很重要的属性：

  • id：定义标签的唯一ID，在HTML文档树中唯一；
  • class：为HTML元素定义一个或多个类名（CSS样式类名）；
  • style：规定元素的行内样式（CSS样式）；

下面介绍部分重要的标签：

  1. meta标签

    meta标签可提供有古纳页面的元信息，针对搜索引擎和更新频度的描述和关键词；其位于文档的头部；主要包含两个属性，分别为http-equiv和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能；

    • http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为conrent，代表各个参数的变量值；

      <!--表示2s后引导进入该URL-->
<meta http-equiv="refresh" content="2; URL=https://www.baidu.com"> 
<!--表示2s刷新一次-->
<meta http-equiv="refresh" content="2"> 
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=”UTF8"> 
<!--告诉IE以最高级模式来渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

    • name属性：主要用于描述网页，对应属性为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的；

      <!--关键字，也就是别人是可以通过这些关键字搜索到我这个文章的-->
<meta name="keywords" content="meta总结, html meta, meta属性, meta跳转"> 
<!--文档描述，如百度页面的显示内容-->
<meta name="description" content="meta总结, html meta, meta属性, meta跳转">

  2. body中的基本标签

    body中标签根据其显示类型，可以主要分为：

    • 内敛标签（行内标签）：不独占一行，b\i\u\s\button\a\img等标签属于这种类型；
    • 块级标签（行外标签）：自己独占一行，h1-h6\br\hr\p\div等标签属于这种类型；

    注意：内敛标签只能嵌套内敛标签，块级标签可以嵌套内敛和某些块级标签，p标签不可以嵌套任何标签。

    表示方法 含义 标签类型
    <b></b> 加粗 bolt 内敛标签
    <i></i> 斜体 italic 内敛标签
    <u></u> 下划线 underline 内敛标签
    <s></s> 删除线 strickthrough 内敛标签
    <button></button> 按钮 button 内敛标签
    <span></span> 无特殊效果 内敛标签
    <hr> 水平分割线 horizontal tag 块级标签
    <br> 换行 break 块级标签
    <h1></h1> 一级标题 heading 块级标签
    <h2></h2> 二级标题 heading 块级标签
    <h3></h3> 三级标题 heading 块级标签
    <h4></h4> 四级标题 heading 块级标签
    <h5></h5> 五级标题 heading 块级标签
    <h6></h6> 六级标题 heading 块级标签
    <p></p> 段落（行间距与普通换行越有不同） paragraph 块级标签
    <div></div> 层（无特殊效果） division 块级标签

    下面再详细介绍几个标签：

    • img标签

      即图片标签，为内敛标签；主要使用格式为：<img src="" alt="" title="" width="" height="">，其中：

      • src属性可以是网络位置也可以是相对路径，但不可以是绝对路径；
      • alt(alternative)属性是加载过程中的文字解释，可以为空；
      • title是鼠标悬停时对图片的介绍；
      • width和height分别表示图片的宽度和高度；

    • a(anchor)标签

      即链接标签，为内敛标签；主要使用格式为：<a href="" target="_blank"></a>，其中：

      • herf（hypertext reference）属性时链接指向的地址；
      • 将target设置为"_blank"可以新开窗口；
      • 将target设置为"_self"即默认状况为在当前窗口打开；

    • 无序列表标签

      为块级标签，主要使用格式为：

      <ul>
  <li>第一项</li>
  <li>第二项</li>
</ul>

      其中ul(unorder list)的type属性可以设置为：

      • disc：实心远点；
      • circle：空心圆圈；
      • square：实心方块；
      • none：无样式；

    • 有序列表标签

      为块级标签，主要使用格式为：

      <ol>
  <li>第一项</li>
  <li>第二项</li>
</ol>

      其中ol(order list)的type属性可以设置"a"、"1"、"Ⅰ"等，表示列表的序列表示方法；与之对应的start属性可以设置为"b"等，表示列表从b开始；

    • 标题列表标签

      为块级标签，主要使用格式为：

      <dl>
  <dt>第一项</dt>
  <dd>第二项</dd>
</dl>

      其中dt(defined title)子标签为自定义列表标题，dd(defined detail)子标签为自定义详情；

    • 表格标签

      为块级标签，主要使用格式为：

      <table border="1" cellpadding="10" cellspacing="10">
    <thead>
        <tr>
            <th>真</th>
            <th>讷</th>
            <th>到</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>真</th>
            <th>讷</th>
            <th>到</th>
        </tr>
        <tr>
            <th>大壮</th>
            <th>抽烟</th>
            <th>喝酒</th>
        </tr>
    </tbody>
</table>

      其中table的属性主要包含：

      • border：表示边框的粗细；
      • cellpadding：表示表格内元素与表格边框的距离；
      • cellspacing：表示表格最外层边框的厚度；

      thead子标签表示表头；tbody子标签表示表身；tr(table row)子标签表示每一行；th(table header cell)子标签表示每一个表格内元素；

  3. form标签

    又称为表单标签，是一种较为复杂的标签，其中夹杂着许多其他标签的应用，其基本使用格式为：

    <form action="http://127.0.0.1:9000">

    <textarea name="" cols="30" rows="10"></textarea>
    <hr>
    <label for="username">用户名</label>
    <input id="username" type="text" name="username" value="耳机">
    <label>
    密码：<input type="password" name="password" value="耳耳耳耳机" disabled>
    </label>
    男<input type="radio" name="sex" value="1" readonly>
    女<input type="radio" name="sex" value="2">

    抽烟<input type="checkbox" name="hobby" value="a">
    喝酒<input type="checkbox" name="hobby" value="b" checked="checked">
    烫头<input type="checkbox" name="hobby" value="c" checked>
    <button>提交耳机</button>
    <input type="submit">

    <hr>
    <input type="date">
    <input type="button" value="叶斯摩拉">
    <input type="reset">
    <input type="hidden">
    <input type="file">
    <input type="submit">

    <select name="name" id="" multiple>
        <option value="1" selected>耳机</option>
        <option value="2">叶斯摩拉</option>
        <option value="3">猕猴桃</option>
    </select> 按住CTRL多选
</form>

    其action属性代表表单提交路径；并且其中包含多个标签，主要为：

    1. input标签

      主要代表表单的输入，是浏览器客户端和服务端交流的工具，主要包含以下几种：

      <!--1.text纯文本-->
用户名：<input id="username" type="text" name="username" value="耳机">

<!--2.password密码-->
密码：<input type="password" name="password" value="耳耳耳耳机" disabled>

<!--3.radio单选-->
男<input type="radio" name="sex" value="1" readonly>
女<input type="radio" name="sex" value="2">

<!--4.checkbox多选-->
抽烟<input type="checkbox" name="hobby" value="a">
喝酒<input type="checkbox" name="hobby" value="b" checked="checked">
烫头<input type="checkbox" name="hobby" value="c" checked>

<!--5.submit提交-->
<input type="submit">

<!--6.date日期-->
<input type="date">

<!--7.button提交2-->
<input type="button" value="叶斯摩拉">

<!--8.reset重置-->
<input type="reset">

<!--9.hidden隐藏-->
<input type="hidden">

<!--10.file文件-->
<input type="file">

      在浏览器页面中分别显示为：

      image-20201026194258593

      其中属性主要包含：

      • name为名称标记，即表单提交的键；
      • value为表单提交时对应项的值，如button为按钮显示的内容，text为输入框的初始值，而checkbox和radio为提交表单所选值的标记；
      • id为input元素的唯一标识，方便label标签标记；
      • checked为默认的选中项；
      • readonly为只读（对radio和checkbox不生效）；
      • disabled为废除；

    2. typearea多行文本标签

      主要使用方式为：<textarea name="" cols="30" rows="10"></textarea>，其在浏览器页面中显示如下：

      image-20201026195755679

      其中cols表示列，row表示行；

    3. select标签

      主要使用方式为：

      <select name="city" id="city">
  <option value="1">北京</option>
  <option selected="selected" value="2">上海</option>
  <option value="3">广州</option>
  <option value="4">深圳</option>
</select>

      其在浏览器页面中显示如下：

      image-20201026200312778

      也可以将在select标签中添加multiple标签，完成多选下拉菜单，在多选时按住CRTL键多选即可；

  4. 一些常用特殊字符

    特殊字符 表示方法
    space &nbsp;
    < &lt;
    > &gt;
    & &amp;
    ￥ &yen;
    © &copy;
    ® &reg;
posted @ 2020-10-26 20:08  Raigor  阅读(191)  评论(0)  编辑  收藏  举报