zoukankan      html  css  js  c++  java
  • HTML_1

    HTML 指的是超文本标记语言: HyperText Markup Language

    HTML 不是一种编程语言,而是一种标记语言
    标记语言是一套标记标签 (markup tag)
    HTML 使用标记标签来描述网页
    HTML 文档包含了HTML 标签及文本内容
    HTML文档也叫做 web 页面

    格式:
    <!DOCTYPE html>
    <html>
    <head>
    <title>文档标题</title>
    </head>
    <body>
    可见文本...
    </body>
    </html>

    HTML 标签通常是成对出现的,比如 <b> 和 </b>
    标签对中的第一个标签是开始标签,第二个标签是结束标签
    开始和结束标签也被称为开放标签和闭合标签

    <!DOCTYPE html> 声明为 HTML5 文档
    <html> 元素是 HTML 页面的根元素
    <head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
    <title> 元素描述了文档的标题
    <body> 元素包含了可见的页面内容
    <h1> 元素定义一个大标题
    <p> 元素定义一个段落

    标题:<h1> 定义最大的标题。 <h6> 定义最小的标题
    <h1> this is a title </h1> (h+index)
    段落:
    <p> this is a pargraph </p>
    链接:
    <a href="http://xutao.com"> </a>, target定义打开的地方,下面是在新标签
    <a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
    图像:
    <img src="/images/logo.jpg" width="258" height="33" />
    换行:<br> 标签定义换行,无结束标签
    注释:<!-- 这是一个注释 -->
    水平线: <hr>
    字体:<font size="6">这是6号字体文本</font>
    1到6号标题与1到6号字体逆序对应,比如1号字体对应6号标题,2号字体对应5号标题。
    头部:
    <head> 定义了文档的信息
    <title> 定义了文档的标题
    <base> 定义了页面链接标签的默认链接地址
    <link> 定义了一个文档和外部资源之间的关系
    <meta> 定义了HTML文档中的元数据
    <script> 定义了客户端的脚本文件
    <style> 定义了HTML文档的样式文件

    背景色:<body style="background-color:yellow;">

    字体颜色:
    font-family(字体),color(颜色),和font-size(字体大小
    <h1 style="font-family:verdana;">一个标题</h1>
    <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

    对齐方式:<h1 style="text-align:center;">居中对齐的标题</h1>

    属性:
    class 为html元素定义一个或多个类名(classname)(类名从样式文件引入)
    id 定义元素的唯一id
    style 规定元素的行内样式(inline style)
    title 描述了元素的额外信息 (作为工具条使用)


    文本格式化:

    标签 描述
    <b> 定义粗体文本
    <em> 定义着重文字
    <i> 定义斜体字
    <small> 定义小号字
    <strong> 定义加重语气
    <sub> 定义下标字
    <sup> 定义上标字
    <ins> 定义插入字
    <del> 定义删除字

    <code> 定义计算机代码
    <kbd> 定义键盘码
    <samp> 定义计算机代码样本
    <var> 定义变量
    <pre> 定义预格式文本
    <abbr> 定义缩写
    <address> 定义地址
    <bdo> 定义文字方向
    <blockquote> 定义长的引用
    <q> 定义短的引用语
    <cite> 定义引用、引证
    <dfn> 定义一个定义项目。

    图像:
    <img src="url" alt="some_text">
    alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息

    表格:
    表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
    <table border = "2"(默认0),weight="500px"(大小默认按内容调整),align = "center"> 定义表格
    <th> 定义表格的表头
    <tr valign = "center/top/bottom"> 定义表格的行
    <td> 定义表格单元
    <caption> 定义表格标题,,,,
    <colgroup> 定义表格列的组
    <col> 定义用于表格列的属性
    <thead> 定义表格的页眉
    <tbody> 定义表格的主体
    <tfoot> 定义表格的页脚
    cellspacing 外边距
    cellpadding 内边距
    bgcolor 背景颜色


    列表: 可以嵌套
    无序:使用 <ul> 标签 unordered list
    <ul>
    <li>Coffee可以添加其他</li>
    <li>Milk</li>
    </ul>
    有序:有序列表始于 <ol> 标签 ordered list
    <ol> 定义有序列表
    <ul> 定义无序列表
    <li> 定义列表项

    <dl> 定义列表 definition list
    <dt> 自定义列表项目 definition description
    <dd> 定义自定列表项的描述

    注意:
    当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

    大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时,通常会以新行来开始(和结束)内联元素在显示时通常不会以新行开始。
    大多数 HTML 元素被定义为块级元素或内联元素。
    <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器
    <span> 元素是内联元素,可用作文本的容器

    可以在一个div中加入多个div,父div的属性也会成为子div的属性;

    表单:一个包含表单元素的区域。<form>
    表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。多数情况下被用到的表单标签是输入标签(<input> 类型属性(type))
    <form>
    First name: <input type="text" name="firstname"><br>
    <input type="radio" name="sex" value="male">Male<br> 单选框name必须相同
    Password: <input type="password" name="pwd">
    <input type="checkbox" name="vehicle" value="Car">
    <input type="button" value="Hello world!">
    </form>

    提交按钮:
    <form name="input" action="html_form_action.php" method="get">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
    </form>
    表单的动作属性定义了目的文件的文件名,method定义操作方式如get

    文本域
    <textarea rows="10" cols="30">
    我是一个文本框。
    </textarea>

    下拉框:
    <form action="">
    <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    </select>
    </form>

    <form> 定义供用户输入的表单
    <input> 定义输入域
    <textarea> 定义文本域 (一个多行的输入控件)
    <label> 定义了 <input> 元素的标签,一般为输入标题
    <fieldset> 定义了一组相关的表单元素,并使用外框包含起来
    <legend> 定义了 <fieldset> 元素的标题
    <select> 定义了下拉选项列表
    <optgroup> 定义选项组
    <option> 定义下拉列表中的选项
    <button> 定义一个点击按钮
    <datalist>New 指定一个预先定义的输入控件选项列表
    <keygen>New 定义了表单的密钥对生成器字段
    <output>New 定义一个计算结果

    框架,
    你可以在同一个浏览器窗口中显示不止一个页面。
    <iframe src="URL" width="200" height="200" ></iframe>

    <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
    <p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
    设置一个框架,设置好名称name,然后新建一个链接,让target属性指向该名称
    框架内已经可以显示src的内容

    HTML 颜色由一个十六进制符号来定义(RGB)。
    每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。
    所以color属性可以使用:rgb(1,2,2) 或者是rgba(1,1,1,透明度)

    141个颜色名称是在HTML和CSS颜色规范定义的(17标准颜色,再加124)
    17标准颜色:黑色,蓝,水,紫红色,灰色,绿色,石灰,栗色,海军,橄榄,橙,紫,红,白,银,蓝绿色,黄色。

    不间断空格(Non-breaking Space):
    如需在页面中增加空格的数量,您需要使用 &nbsp; 字符实体。
    空格 &nbsp; &#160;
    一个空格<&#160>两个空格<&#160&#160>结束

    统一资源定位器(Uniform Resource Locators)
    说明:URL 只能使用 ASCII 字符集.
    URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
    URL 不能包含空格。URL 编码通常使用 + 来替换空格。

    scheme - 定义因特网服务的类型。最常见的类型是 http
    host - 定义域主机(http 的默认主机是 www)
    domain - 定义因特网域名,比如 runoob.com
    :port - 定义主机上的端口号(http 的默认端口号是 80)
    path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
    filename - 定义文档/资源的名称

    常见Scheme 访问 用于...
    http 超文本传输协议 以 http:// 开头的普通网页。不加密。
    https 安全超文本传输协议 安全网页,加密所有信息交换。
    ftp 文件传输协议 用于将文件下载或上传至网站。
    file 您计算机上的文件。


    编码模板:
    文本格式化(Formatting)
    <b>粗体文本</b>
    <code>计算机代码</code>
    <em>强调文本</em>
    <i>斜体文本</i>
    <kbd>键盘输入</kbd>
    <pre>预格式化文本</pre>
    <small>更小的文本</small>
    <strong>重要的文本</strong>

    <abbr> (缩写)
    <address> (联系信息)
    <bdo> (文字方向)
    <blockquote> (从另一个源引用的部分)
    <cite> (工作的名称)
    <del> (删除的文本)
    <ins> (插入的文本)
    <sub> (下标文本)
    <sup> (上标文本)
    链接(Links)
    普通的链接:<a href="http://www.example.com/">链接文本</a>
    图像链接: <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
    邮件链接: <a href="mailto:webmaster@example.com">发送e-mail</a>
    书签:
    <a id="tips">提示部分</a>
    <a href="#tips">跳到提示部分</a>
    图片(Images)
    <img src="URL" alt="替换文本" height="42" width="42">
    样式/区块(Styles/Sections)
    <style type="text/css">
    h1 {color:red;}
    p {color:blue;}
    </style>
    <div>文档中的块级元素</div>
    <span>文档中的内联元素</span>
    无序列表
    <ul>
    <li>项目</li>
    <li>项目</li>
    </ul>
    有序列表
    <ol>
    <li>第一项</li>
    <li>第二项</li>
    </ol>
    定义列表
    <dl>
    <dt>项目 1</dt>
    <dd>描述项目 1</dd>
    <dt>项目 2</dt>
    <dd>描述项目 2</dd>
    </dl>
    表格(Tables)
    <table border="1">
    <tr>
    <th>表格标题</th>
    <th>表格标题</th>
    </tr>
    <tr>
    <td>表格数据</td>
    <td>表格数据</td>
    </tr>

    <hr/> 分割线
    </table>

  • 相关阅读:
    JavaEE开发中系列总结
    equals及==问题
    eclipse debug弹出窗
    MacOS Sierra 显示隐藏文件命令
    了解点Excel VBA 代码,让工作效率提升多倍~
    PADS Layout进行eco对比更新
    PCB走线规则与一些技巧介绍
    旁路电容与去耦电容的区别
    Flash download failed-Cortex-M3的原因及解决办法
    Keil U5不能识别DAP仿真器的解决办法及原因
  • 原文地址:https://www.cnblogs.com/XT-xutao/p/9928305.html
Copyright © 2011-2022 走看看