• HTML 基本标签


    HTML

    <!DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <title>Hello</title>
        </head>
        <body>
            <h1>
                Hello World
            </h1>
        </body>
    </html>
    
    • 注释

      <!-- 注释内容 -->

    注意: 注释不能嵌套使用

    3.4 文本标签

    HTML 标签

    描述整个 HTML 文件,方便浏览器表示

    HTML 标签内部有两个子标签:head、body

    head 标签

    描述整个 HTML 头部咨询信息

    包括:title 标题、meta 元数据、style 样式、script 脚本、link 连接、…...

    body 标签

    描述网页显示的内容

    所有网页中显示的内容都会写到body标签中

    3.5 排版标签

    p 标签: 描述段落、将HTML内容拆分成段落

    • align 对其标签: left、center、right 。默认left
    • br 换行标签: 将段落内容进行换行,一般写成
    • hr 分割线标签: 一般写成
      • hr 标签的属性:
        • size: 厚度、大小。
        • width:宽度、单位可以使 px 像素,也可以是% 百分率 ;默认值为 100%。
        • color:颜色。

    3.6 div 块标签

    div 块标签: 在文档中定义块,一般需要和css结合实现网页

    span 标签: 在文档中定义文本块、行内块。

    块级元素: 以新行为开始

    行内元素: 不以新行为开始

    作用:

    div+css:制作网页的各式各样

    span:

    3.7 字体标签

    font 标签: 规定文本的字体、颜色、大小等。

    常用属性:

    • size:字体字号大小,最大值是7;最小值是1
    • face:字体。
    • h1~h6:1号标题到6号标题,1号标题为最大...

    3.8 语义

    • i和em都是表示倾斜,i表示视觉上的倾斜;em表示强调
    • b和strong都是表示加粗,b表示视觉上的加粗;strong表示强调
    • u和ins都表示下划线,u表示视觉上的下划线;ins表示强调
    • s和del都是表示删除线,s表示不正确的文本;del表示要删除的文本
    <i>倾斜</i>
    <em>倾斜</em>
    <b>加粗</b>
    <strong>加粗</strong>
    <s>删除线</s>
    <del>删除线</del>
    <u>下划线</u>
    <ins>下划线</ins>
    

    image-20190819111633759.png

    3.9 列表标签

    ul、ol、li

    • ul: 无序列表(Unorderde List)

      属性:type:列表项目类型,disc(默认值,实心圆)、square(方块)

    <!-- 默认的样式 -->
    <ul>
        <li>嵌入式开发</li>
        <li>Java后台开发</li>
        <li>HTML5前端开发</li>
        <li>Python爬虫</li>
    </ul>
    
    <ol>
        <li>首先</li>
        <li>其次</li>
        <li>再次</li>
        <li>最后</li>
    </ol>
    
    <!-- 添加元素后的样式 -->
    
    

    默认样式:

    image-20190819112116541.png

    添加元素后的样式:

    3.10 图片标签

    img 标签: 在网页上插入图片

    注意: img 是单标签

    <img ser="图片路径" alt="图片代替描述文字" width=“50%” height=“50%”/> 
    
    • src: 图片地址
    • alt: 图片的代替文字
    • width: 图片的宽度,可以用px像素或者是%百分比。
    • height: 图片的高度,可以用px像素或者是%百分比。
    • 可以使用 GIF 等动态图片...

    3.11 连接标签

    a 标签: 添加超链接,可以从当前页面跳转到指定的连接上。

    属性:

    • href: 链接的目的地址
    • name: 锚点的名字
    • target: 打开页面的方式
      • _self:在当前页面打开(默认)
      • _blank:在新的页面打开
    <!-- 在当前页面打开 -->
    <a href="https://www.baidu.com">百度<a/><br/>
    <!-- 在新的页面打开 -->
    <a href="https://www.baidu.com" target=“——blank”>百度</a><br/>
    <!-- 锚点 -->
    <a href="#锚点名称">跳转到锚点</a><br/>
    <a name="锚点名称">我是一个锚点</a><br/>
    <!-- 锚点示例 -->
    <a href="#a1">跳转到a1</a>
    <a name="a1">我是锚点a1</a>
    

    3.12 表格标签

    table 标签: 用于创建表格

    属性:

    • border: 表格的边框大小
    • width: 表格的宽度,可以使用px像素或者%百分率。
    • align: 对其方式 ,left(左对齐 默认)、center(居中)、right(右对齐)
    • bgcolor: 设置表格的背景颜色
    <table border="1" width="60%" align="center" bgcolor="aqua">
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>24</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>18</td>
        </tr>
    </table>
    

    image-20190819143826460.png

    <table border="1" width="60%" align="center" bgcolor="aqua">
        <tr align="center" bgcolor="#6495ed">
            <td>张三</td>
            <td>男</td>
            <td>24</td>
        </tr>
        <tr bgcolor="#7fffd4">
            <td>李四</td>
            <td>男</td>
            <td>18</td>
        </tr>
    </table>
    

    image-20190819144236446.png

    <table border="1" width="60%" align="center" bgcolor="aqua">
        <caption>人员信息表</caption>
        <tr align="center" bgcolor="#f0f8ff">
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr bgcolor="#6495ed">
            <td>张三</td>
            <td align="center" bgcolor="blue">男</td>
            <td>24</td>
        </tr>
        <tr align="right" bgcolor="#7fffd4">
            <td bgcolor="#8a2be2">李四</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td colspan="3">共2人</td>
        </tr>
    </table>
    

    image-20190819145500722.png

    3.13 特殊符号

  • 相关阅读:
    使用 supervisor 管理进程
    用gunicorn+gevent启动Flask项目
    pip与apt-get
    Python计算地图上两点经纬度间的距离
    java基础学习总结——数组
    java基础学习总结——异常处理
    java基础学习总结——面向对象1
    java基础学习总结——基础语法2
    java基础学习总结——基础语法1
    java基础学习总结——java环境变量配置
  • 原文地址:https://www.cnblogs.com/xsh168/p/11377295.html
Copyright © 2020-2023  润新知