zoukankan      html  css  js  c++  java

  • 前端基础学习（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

'后面再加上内容
    conn.send(b'HTTP/1.1 200 ok

')
    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

')
    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中标签根据其显示类型，可以主要分为：

      • 内敛标签（行内标签）：不独占一行，biusuttonaimg等标签属于这种类型；
      • 块级标签（行外标签）：自己独占一行，h1-h6rhrpdiv等标签属于这种类型；

      注意：内敛标签只能嵌套内敛标签，块级标签可以嵌套内敛和某些块级标签，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;
  • 相关阅读:
    delphi JPG图片 旋转 切边 缩放
    CXGrid TcxButtonEdit 信息获取 TcxButtonEditProperties取得TcxGridDBTableView
    firemonkey EDit 改变颜色
    firemonkey ListView DynamicAppearance
    delphi GDI 图片压缩代码 据说是位图缩放保持原图视觉效果最好的算法
    cxGrid_Q31584 cxgrid 拖放移动记录
    delphi XE Datasnap SERVER 在windows 7 下为服务添加描述信息
    delphi 数组复制利用CopyMemory 最为完美
    delphi强制WebBrowser控件使用指定版本显示网页
    iOS从零开始学习直播之音频2.后台播放和在线播放
  • 原文地址：https://www.cnblogs.com/raygor/p/13880722.html
Copyright © 2011-2022 走看看