HTML基础概览-优快云博客

html基础

html是一种超文本标记语言，超文本指的是页面内容可以是图片、链接、音乐甚至程序等非文字元素，标记语言指的是由一套标记标签组成。超文本标记语言的结构包括“头”部分和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的内容。所以html文档也叫做网页。
html示例：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>

<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>

</html>

代码分析：第一行是声明，表示这是一个html文档，必须在文档的第一行，不区分大小写。
<html>是html页面的根元素，只能有一个。
<title>定义了浏览器工具栏的标题。当网页添加到收藏夹时，显示在收藏夹中的信息就是标题，显示在搜索引擎结果页面的信息也是标题.。
<meta charset=”utf-8”>声明编码的编译格式，否则会出现乱码，这里的格式只是浏览器读取的时候的格式，如果使用记事本开发要再保存时将格式也保存为”utf-8”才行。
第一个标签是开始标签，第二个标签是结束标签
在浏览器上只有<body>标签内的内容会显示。

基本标签详解

标签使用小写，标签一般由开始标签和结束标签组成。两个标签中间的数据即为标签内容，可以在开始标签内添加属性，属性以键值对的形式表示。属性值应该始终被包括在双引号，不过使用单引号也没有问题。但如果属性值本身就含有双引号，必须使用单引号。属性使用小写。
h1~h6:用来定义网页标题，不同数字表示字体大小，h1最大。
hr:在网页上创建水平线，例<hr>
注释：<!–这是注释–>
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

head中的特定标签

<base>:用来设置全局属性，作为HTML文档中所有的链接标签的默认链接

<base href="http://www.runoob.com/images/" target="_blank">

<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
<br/>
<a href="http://www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
</body>

<style type="text/css">
body {background-color:yellow}设置背景色
p {color:blue}设置段落字体颜色
</style>

常用body标签表

标签名	描述	示例
<aaaaaaaaaaaaa>	设置超文本链接，描述也可以是图片等其他元素。 href属性指定链接地址，也可以通过#号指定标签id。 target指定打开链接的位置，_blank表示链接在新窗口打开。	<a href=”链接url地址” target=”_blank”>对链接的描述</a> <a href=”mailto:someone@example.com?Subject=Hello %20again” target=”_top”>电子邮件链接</a>
<strong> <b>	文本加粗，不同在于strong在语音输出上会重读	<strong>这个文本是加粗的</strong>
<big>	放大文本	<big>这个文本字体放大</big>
<small>	缩小文本	<small>这个文本是缩小的</small>
<em> <i>	文本斜体	<em>这个文本是斜体的</em>
<sub> <sup>	将文本下标和上标	这个文本包含<sub>下标</sub>和<sup> 上标</sup>
<pre>	定义预格式文本，对文本的行和空格控制	<pre>对空行和空格进行控制</pre>
<div>	包含的标签内容会自动换行	<div>标签内容</div>
<span>	定义样式	<span style=”color:blue;font-weight:bold”>
<img>	设置图片,.alt 属性定义文本在浏览器无法载入图像时显示.	<img src=”图片的存放路径” width=”258” height=”39” />
<abbr>	把鼠标移至缩略词语上时，title 可用于展示表达的完整版本	<abbr title=”etcetera”>etc.</abbr>
<bdo>	定义文字方向，ltr从左到右，rtl从右到左	<p><bdo dir=”rtl”>该段落文字从右到左显示.</bdo></p>
<del> <ins>	给文字加上删除线和下划线	<p>My favorite <del>blue</del> <ins>red</ins>!</p>
<script>	显示脚本，如果不知是js，则会显示noscript中内容	<script>document.write(“Hello World!”)</script><noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
<iframe>	在页面中显示多个页面。可以通过width、height、frameborder指定宽高和边框	<iframe src=”demo_iframe.htm” name=”iframe_a”></iframe> <p><a href=”http://www.runoob.com” target=”iframe_a”>RUNOOB.COM</a></p> target属性是名为iframe_a 的 iframe框架，所以在点击链接时页面会显示在iframe框架中
<ol>	有序列表,type属性指定符号类型，1、A、a、I、i分别表示数字、大写、小写、罗马、小罗马类型	<ul type=”A”> <li>Coffee</li> <li>Milk</li> </ul>
<ul>	无序列表（h5不支持)，type属性指定符号类型，square、circle分别表示方块、圆点	<ol> <li>Coffee</li> <li>Milk</li> </ol>
<dl>	自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始	<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>

图像<img>：

如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接，该段代码中的shape指的是点击区域的形状，coords指的是链接区域在图片中的坐标，像素为单位

<p>点击太阳或其他行星，注意变化：</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
    <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
    <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

表单<form>

一个文本字段的默认宽度是20个字符，可以通过size属性指定。在input中指定style属性可以显示不同内容。

<form action="html_form_action.php" method="get" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> /*下列所有的name属性都是对内容的描述，不会显示。
oninput指定output的计算方式。action属性是当表单中有提交等操作时，会进入到action所代表的页面*/
First name: <input type="text" name="firstname"><br> //文本框

<textarea rows="10" cols="30"> //文本域，通过rows和cols指定框域的大小
我是一个文本域。
</textarea>

<input type="button" value="button!"> //按钮

<input type="radio" name="sex" value="male">Male<br> //单选框
<input type="radio" name="sex" value="female">Female

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br> 多选框
<input type="checkbox" name="vehicle" value="Car">I have a car 

<select name="cars">  //下拉列表，可以通过在option中加seleced属性指定默认选中
<option value="volvo">Volvo</option>
<option value="saab" selected>Saab</option>
</select>

<fieldset> 定义一组标签
    <legend>Personalia:</legend>  legend描述分组的标题
    Name: <input type="text"><br>
    Email: <input type="text"><br>
</fieldset>

<input list="browsers" name="browser">list 属性来绑定 <datalist> 元素。用户点击文本框后能看到一个下拉列表，里边的选项是通过option预先定义好的
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
</datalist>

<input type="range" id="a" value="50">100+<input type="number" id="b" value="50">=<output name="x" for="a b"></output>

Username: <input type="text" name="user">  提交按钮，输入数据会传送到form的action属性执行
<input type="submit" value="Submit">
</form>

表格

定义表格。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

<table border="1" cellpadding="10">  border设置表格边框宽度，默认为0 cellpadding设置单元格边界与内容间距 cellspacing设置单元格与单元格间距
    <caption>example table</caption> 给表格设置标题 
        <th>name</th>  th设置文本为表头，通过常加粗居中显示内容
        <th colspan="2">tel</td>  colspan指定单元格行跨度，rowspan指定列跨度
    <tr/>
    <tr>
        <td>wang</td>
        <td>123</td>
        <td>456</td>
    </tr>

    <tr>
        <th>name</th>
        <td>li</td>
    <tr/>
    <tr>
        <th rowspan="2">tel</th>
        <td>wang</td>
    </tr>
    <tr>
        <td>li</td>
    </tr>
</table>