zoukankan      html  css  js  c++  java
  • HTML

    HTML超文本标记语言

     

    基本结构

     

    1)<!DOCTYPE html>声明为 HTML5 文档,即文档声明;

    2)<html>和</html>元素是 HTML 页面的根元素,第二行<html>标签和最后一行</html>定义html文档的整体;<html>标签中的属性lang="en"定义网页的语言为英文,定义成中文的属性是lang="zh-CN",不定义也没什么影响,它一般作为分析统计用。<head>标签和<body>标签是<html>标签的第一层子元素。

    3)<head>和</head>元标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链CSS样式文件和JavaScript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏。其包含了文档的元(meta)数据,如<meta charset="utf-8">定义网页编码格式为utf-8

    4)<title>和</title>元素描述了文档的标题,即浏览器打开的网页的标签上显示的名字;

    5)<body>和</body>元素里包含了编写网页上可见的页面内容;

    6)<h1>和</h1>元素定义一个最大标题;默认有h1到h6六种级别的标题,和word文档的标题层级类似。

    7)<p>和</p>元素定义一个文本段落;

    8)<br />元素在需要换行的成段的文字处,插入此元素来强制换行。这个不是成对出现的标签。

    9)<!-- -->标签是用来括起来注释语句用的。快捷键是CTRL+斜杠键

    注:在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到组成标签。在标签里的就是其标签的属性。

    HTML标签对

     

    注:尖括号<后面跟的都是元素名称。

    HTML标题

    字符实体

        在代码中成段的文字,如果文字间想空多个空格,如果我们敲击空格键多次,在渲染成网页的时候,始终只会显示一个空格。如果想再网页上显示出多个空格,必须使用空格的字符实体:&nbsp;

    每一个&nbsp;都只会当作一个空格占位字符,因此需要几个空格,就得连续重复写入几个字符实体。

         另外小于号的字符实体是:&lt; 对应的大于号的字符实体是:&gt;

    HTML图像、绝对路径和相对路径

     

    HMTL的超链接<a>

     

     

     

    a标签和href属性

     

    target属性

    使用target属性可以选择一个新窗口里或者原窗口里打开链接文件。

    target="_blank"的值就是打开一个窗口显示href的值的链接

    <a href="http://www.jd.com" target="_blank">这是京东商城</a>

    target="_self"的值就是在原窗口里显示href的值的链接

    <a href="http://www.jd.com" target="_self">这是京东商城</a>

    title属性

    name属性

     

    name属性是在当前原页面里跳转,如果href指定的是C6,那么就会直接跳到 name="C6"的章节所处的位置。#井号表示的是其后面的就是要跳转到的章节的名字。

    HTML列表

     

    HTML表格

     

    <table border="1">
        <tr>
            <th>姓名</th><th>性别</th><th>年龄</th><th>住址</th>
        </tr>
        <tr>
            <td>小王</td><td>男</td><td>18</td><td>北京</td>
        </tr>
        <tr>
            <td>小张</td><td>女</td><td>18</td><td>深圳</td>
        </tr>
    </table>

    展示的效果是:

     

    HTML表单

     

    <!-- form元素里的action性里的url地址就是点提交按后跳的目的地,method表示选择getpost协议方式 -->
    <form action="http://www.baidu.com" method="post">
        <!-- label标签控件的文字注,inputtext了一个单行文本入框,password了一码输入框,去的是心黑点 -->
       
    <label>登录名:</label><input type="text">
        <label>登录密码:</label><input type="password"><br>
        <!-- radio单选框: -->
       
    <label>性别:</label>
        <input type="radio" name="sex" value="0">男
        <input type="radio" name='sex' value="1">女<br>
        <!-- 复选框:允在一组选项选择-->
       
    <label>爱好:</label>
        <input type="checkbox" name="" value="basketball">篮球
        <input type="checkbox" name="" value="football">足球
        <input type="checkbox" name="" value="Tennis">网球<br>
        <!-- p标签是一段容的段落,它会与上下其它标签有一定的距,而br元素是行而已,上下距基本-->
        <!-- input
    file照片或文件等-->
       
    <p>
            <label>上传照片:</label>
            <input type="file" name="person_pic">
        </p>
        <!-- textarea多行文本入框 -->
       
    <p>
            <label>个人描述:</label>
            <textarea name="about"></textarea>
        </p>
        <!-- select下拉列表选项,option就是每一个选项 -->
       
    <p>
            <label>籍贯:</label>
            <select name="site">
                <option value="0">北京市</option>
                <option value="1">上海市</option>
                <option value="2">广州市</option>
                <option value="3">深圳市</option>
                <option value="4">重庆市</option>
            </select>
        </p>
        <!-- 提交按:里信息提交里的action所指向的文件。另外可以用片控件代替submit提交,一般会导致提交次,不建使用。-->
       <!-- <input type="image" src="xxx.gif"> -->
       
    <input type="submit" value="提交">
        <!-- 重置按:将填写的表里的入的容或者选项清-->
       
    <input type="reset" value="重置">
    </form>

    运行结果是:

    HTML内嵌框架

     

    基本综合示例

    下面的html代码,不包含任何css样式:

     

     

    上面的代码在浏览器上呈现的效果如下:

    关于H5测试的几大疑点

     H5测试应该从哪些方面考虑?

     

     

     

  • 相关阅读:
    ArcGIS API中FindTask中文搜索无效,服务器编码问题URIEncoding="utf-8"
    ArcGIS10.1 api for Flex开发用于ArcGIS 9.3时QueryTask 'Error #2032'错误的解决方案
    Arcgis API For IOS扩展AGSDynamicLayer新旧版API对比
    谈FME批量自动化数据转换方法
    浅谈城市规划在移动GIS方面的应用发展
    JS-JQuery(JSONP)调用WebService跨域若干技术点
    CAD规划成果入库GIS_SDE转换之分析
    Web前台直接加载GIS格式数据分析
    [转] 基于ArcGISServer实现活动地图标注
    程序员如何利用空闲时间挣零花钱
  • 原文地址:https://www.cnblogs.com/douyini/p/12686471.html
Copyright © 2011-2022 走看看