我爱编程程序员

HTML总结

2018-01-29  本文已影响0人  猛寇龙崽

本文是本人在边看菜鸟教程过程中边总结而得,如有雷同,纯属巧合我复制的,不过也算是我的笔记了吧

超文本标记语言

(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。主要学习会知道各种标签以及相关属性,一般标签一般成对出现

文件后缀名.html或者.htm

文章开头一般会有<!DOCTYPE html>即声明为 HTML5 文档

标题

<h1> 元素定义一个大标题,可以到<h6>,例如:<h1>这是一个标题</h1>

<h1>这种叫开始标签,</h1>叫结束标签,两者之间就是其中的内容

段落

<p> 元素定义一个段落,段落内用
来换行

HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

链接

<a href="http://www.runoob.com">这是一个链接</a>
其中href为链接的属性,指定了链接的地址,并且属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。
对于链接还有

图像

<img src="/images/logo.png" width="258" height="39" />
<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签,和
换行符一样
其属性如下:

  1. 源属性(Src)src="url",URL为图片的位置
  2. Alt属性 alt="text"用来为图像定义一串预备的可替换的文本,意思是图片加载不出来,浏览器就显示这个text
  3. height(高度) 与 width(宽度)属性,用于设置图像的高度与宽度

表格

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>
来自菜鸟教程

其中表格由 <table> 标签来定义,每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)border为边框属性,表格的表头使用 <th> 标签

列表

分为无序列表<ul>,有序列表<ol>,自定义列表<dl>
其中无序列表和有序列表列表项用<li> 标签,而作为自定义列表列表项标签也是不同的,每个自定义列表项目以 <dt> 开始。每个自定义列表项的描述是以 <dd> 开始

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

此时浏览器显示会像下面一样:
Coffee
-black hot drink
Milk
-white cold drink

区块元素

HTML 元素被定义为块级元素如 <h1>, <p>, <ul>, <table>或内联元素如 <b>, <td>, <a>, <img>
两者区别在于块级元素是以新行来开始的
<div> 元素是块级元素,可用于组合其他 HTML 元素的容器,设置样式属性
**<span> **元素是内联元素,可用作文本的容器,设置样式

总体布局

<html> 元素是 HTML 页面的根元素

<head> 元素包含了文档的元(meta)数据
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>

  1. <title> 元素描述了文档的标题,它定义了浏览器工具栏的标题,当网页添加到收藏夹时,显示在收藏夹中的标题,显示在搜索引擎结果页面的标题
  2. <base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接
  3. <link> 标签定义了文档与外部资源之间的关系。
  4. <style> 标签定义了HTML文档的样式文件引用地址。
  5. <meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
    元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
  6. <script>标签用于加载脚本文件

<body> 元素包含了可见的页面内容

表单<form>

表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等

  1. 文本域通过<input type="text"> 标签来设定
  2. 密码字段通过标签<input type="password"> 来定义
  3. 单选按钮:<input type="radio"> 标签
  4. <input type="checkbox"> 定义了复选框

框架

通过使用框架,可以在同一个浏览器窗口中显示不止一个页面
代码如下<iframe src="URL"></iframe>
属性:

  1. height 和 width 属性用来定义iframe标签的高度与宽度
  2. frameborder 属性用于定义iframe表示是否显示边框

CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.它是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

  1. 内联样式- 在HTML元素中使用"style" 属性(当特殊的样式需要应用到个别元素时
    例如<p style="color:blue;margin-left:20px;">This is a paragraph.</p>其中可以定义font-family(字体),color(颜色),和font-size(字体大小)text-align(文字对齐)背景色属性(background-color)等
  2. 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS(当单个文件需要特别样式时
    <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>
  3. 外部引用 - 使用外部 CSS 文件
    <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

脚本JavaScript

<script> 标签用于定义客户端脚本,比如 JavaScript。既可包含脚本语句,也可通过 src 属性指向外部脚本文件,常用于图片操作、表单验证以及内容动态更新。
<noscript> 标签提供无法使用脚本时的替代内容,因此只有在浏览器不支持脚本或者禁用脚本时,才会显示内容。

HTML5

HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。设计目的是为了在移动设备上支持多媒体
HTML5 中的一些有趣的新特性:

1. 用于绘画的 canvas 元素
2. 用于媒介回放的 video 和 audio 元素
3. 对本地离线存储的更好的支持
4. 新的特殊内容元素,比如 article、footer、header、nav、section
5. 新的表单控件,比如 calendar、date、time、email、url、search

详情:http://www.runoob.com/html/html5-intro.html

XHTML

更多参考:http://www.runoob.com/html/html-xhtml.html

上一篇 下一篇

猜你喜欢

热点阅读