zoukankan      html  css  js  c++  java
  • HTML

    目录

    1. 什么是HTML
    2. HTML基本结构
    3. HTML注释
    4. HTML标签
    5. 基本标签
    6. 连接外部文件
    7. 表格标签 table
    8. 表单标签 form
    

    什么是HTML

    超文本标记语言(HyperText Markup Language),标准通用标记语言下的一个应用; 是网页制作必备的编程语言

    “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

    HTML 不是一种编程语言,而是一种标记语言。

    HTML基本结构

    <!DOCTYPE html> 
    <html>
        <head>
            <meta charset="utf-8"> 
            <title>标题</title> 
        </head> 
        <body>
            <h1>我的第一个标题。</h1> 
            <p>我的第一个段落。</p> 
        </body> 
    </html>
    
    <!DOCTYPE html> 声明为 HTML 文档,HTML文档也常称为网页,
    一个文档包含HTML标签和文本
    
    <html> 与 </html> 之间的文本描述网页,同时HTML元素也是当前页面的根元素
    
    <head>是包含了文档的元(meta)数据,如定义网页编码格式<meta charset="utf-8">
    
    <title>元素描述当前文档页面的标题
    
    <body> 与 </body> 之间的文本是可见的页面内容
    
    <h1> 与 </h1> 之间的文本被显示为标题
    
    <p> 与 </p> 之间的文本被显示为段落
    

    HTML注释

    这是一个H5标题。

    HTML标签

    HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

    HTML 标签是由尖括号包围的关键词,比如 <html>
    HTML 标签通常是成对出现的,比如 <> 和 </b>
    标签对中的第一个标签是开始标签,第二个标签是结束标签
    多数情况下,HTML文档中的标签可以互相嵌套,实现更复杂的功能
    

    基本标签

    • 标题标签:h1~h6
    <h1>这是一个最大的标题 </h1>
    
    • 段落标签:p
    <p> 每一个段落标签中的内容都会换行输出 </p>
    
    • 块级标签:div
    <div style="color: #FF0000"> 
        <h1>
            div标签常用来组合一整块标签内容 
        </h1> 
        <p> 
            以便通过CSS样式来对其中这些元素进行格式化控制 
            比如当前div标签下的所有文本均为红色 
        </p> 
    </div>
    
    • 换行标签:br
    111 
    <br> 
    222
    
    • 图片标签:img
    <img src='xxx.img' alt="图片" />
    
    src:用来指明当前图片路径 
    alt:
        1.光标位于图片时所显示的内容 
        2.当图片加载失败时所显示的内容
    
    • 链接标签:a
    <a src="https://www.baidu.com">百度</a>
    
    href: 控制访问地址 
    a:标签的文本元素为页面展示内容
    
    • 无序列表:ul、li
    <ul>
        <li>无序列表项1</li> 
        <li>无序列表项2</li> 
        <li>无序列表项3</li> 
    </ul>
    
    ul:指明当前为无序列表 
    li:具体列表项使用这个标签 
    单个列表项可不加ul标签
    

    +有序列表:ol、li

    <ol>
        <li>A</li> 
        <li>B</li> 
        <li>C</li> 
    </ol>
    
    ol:指明当前为有序列表 
    li:具体列表项使用这个标签 
    单个列表项可不加ul标签
    

    连接外部文件

    像img等类似的标签需要我们去访问一个外部文件,常用的方式有如下几种

    • 引入外部图片:
    <img src="img/1.jpg" alt="图片" />
    
    • 引入另外一个网页:
    <a src="other.html">其他页面</a>
    
    • 引入CSS样式文件:
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    
    rel: relationship的英文缩写,用于定义链接的文件和HTML文档之间的关系 
        stylesheet: 样式表 
    type: 外链文档的类型
    href: 外链文档的路径
    
    • 引入js文件:
    <script type="text/javascript" src="js/jquery.js"></script>
    
    • src与href:

    src用于引入资源,引入的资源为页面必不可少的一部分

    href只是引用资源,表示超文本引用,类似穿外套

    • 相对路径:使用当前文件为起点定位资源

    ./:表示位于当前文件所在目录下

    ../:表示位于当前文件所处的上一层目录下

    • 绝对路径:使用当前磁盘目录为起点定位资源

    表格标签 table

    表格标签由 table 标签进行定义
    表格中的每一行由tr标签定义 table row
    每一行有几个单元格由td标签定义 table data
    表格的表头由th标签定义 table header
    
    <table border="20"> 
        <caption>用户表</caption> 
        <tr>
            <th>名字</th> 
            <th>年龄</th> 
        </tr> 
        <tr>
            <td>张三</td> 
            <td>18</td> </tr> 
            <tr><td>李四</td> 
            <td>20</td> 
        </tr> 
    </table>
    
    border(属性): 定义表格边框,数字越大,边框越粗 
    caption(标签): 定义表格标题
    
    <table width="400" border="1" cellpadding="10" cellspacing="3" frame="box"> 
        <tr>
            <th>名字</th> 
            <td align="center" >张三</td> 
            <td>李四</td> 
        </tr> 
        <tr>
            <th>年龄</th> 
            <td>18</td> 
            <td>20</td> 
        </tr> 
        <tr>
            <td colspan="3" align="center">合并单元格</td> 
        </tr> 
    </table>
    
    
    cellpadding: 规定单元格边缘和内容的空白 
    cellspacing: 增加单元格之间的距离 
    align: 设置单元格内容靠齐、left|right|center 
    frame: 控制围绕表格的边框 
    box 四面环山 
    above 上面 
    below 下面 
    hsides 上下两侧 
    vsides 左右两侧 
    colspan:合并列 
    rowspan:合并行
    

    表单标签 form

    表单用于收集不同类型的用户输入,表单由不同类型的标签组成

    • 单行文本输入框
    <label>姓名:</label><input type="text" name="username" value="张三" /> 
    <label>密码:</label><input type="password" name="password" placeholder="请输入密码" />
    
    text:单行文本框 
    password:密码输入框 
    value:定义表单元素的值 
    name:定义表单元素的名称,提交到后台时通过该值获取对应表单中的数据
    
    • 单选框
    <input type="radio" name="gender" value="0" /> 男 
    <input type="radio" name="gender" value="1" /> 女
    
    在单选框中的name属性可以控制那几个表单为一组
    
    • 复选框
    <input type="checkbox" name="like" value="sing" /> 唱歌 
    <input type="checkbox" name="like" value="run" /> 跑步 
    <input type="checkbox" name="like" value="swiming" /> 游泳
    
    • 上传文件
    <input type="file" name="picture">
    
    • 多行文本输入框
    <textarea name="about"></textarea>
    
    • 下拉表单元素:select
    <select name="site"> 
        <option value="0">北京</option> 
        <option value="1">上海</option> 
        <option value="2">广州</option> 
        <option value="3">深圳</option> 
    </select>
    
    option: 下拉框中的具体属性 
    value: 在表单提交时真正发送给服务器的值
    
    • 按钮:
    提交按钮:submit
    点击时触发form标签中的action动作
    
    重置按钮:reset
    重置所属表单中所有表单框的所填数据
    普通按钮:button
    <input type="submit" value="提交"> 
    <input type="reset" value="重置"> 
    <input type="button" value="按钮">
    
  • 相关阅读:
    commonJS — 数组操作(for Array)
    seafile增加邮件服务功能
    2.事务和系统概念
    1.事务处理简介
    glusterfs分布式复制扩容卷以及平衡卷
    seafile数据的备份与恢复
    seafile+glusterfs 安装部署
    虚拟机或物理服务器热添加硬盘
    bash: cannot create temp file for here-document: Read-only file system
    FATAL ERROR: please install the following Perl modules before executing ./mysql_install_db: Data::Dumper
  • 原文地址:https://www.cnblogs.com/xinzaiyuan/p/12393016.html
Copyright © 2011-2022 走看看