HTML基础

来源：互联网发布：lol徐老师的淘宝店网址编辑：程序博客网时间：2024/06/14 16:07

HTML基础

HTML简介

超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

HTML网页结构

HTML由HTML、HEAD和BODY三大部分组成。

<html>    <head>        头部信息    </head>    <body>    网页内容，如文本、超链接、图像、动画等    </body></html>

head头部
<head></head>这2个标记符分别表示头部信息的开始和结尾。
body主体
<body></body>网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。

HTML语法

HTML语法由标签（Tags）和属性（Attributes）组成。标签又称标记符，HTML是影响网页内容显示格式的标签集合，浏览器主要根据标签来决定网页的实际显示效果。在HTML中，所有的标签都是用尖括号括起来。

HTML标签的结构形态包括以下几种：

<标签>元素</标签>
标签的作用范围从<标签>到</标签>结束。
<标签属性名=”属性值“>元素</标签>
属性表示标签的一些附加信息，一个标签可含有多个属性，各个属性之间没有先后顺序。
<标签>
标签单独出现，只有开始标签然而没有结束标签，也称为“空标签”。

HTML常用标签：

<body>

<html><head>  <title>文档的标题</title></head><body>  文档的内容</body></html>

<p>

<p>This is some text in a very short paragraph</p>

<h1>-<h>

<h1>这是标题 1</h1><h2>这是标题 2</h2><h3>这是标题 3</h3><h4>这是标题 4</h4><h5>这是标题 5</h5><h6>这是标题 6</h6>

<strong>
把文本定义为语气更强的强调的内容。
<em>
把文本定义为强调的内容。
<span>
用来组合文档中的行内元素。
<q>
标记短的引用：

<q>Here is a short quotation here is a short quotation</q>

<blockquote>

标记长的引用：

<blockquote>Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.</blockquote>

<br>

换行

<address>

<address>Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> Visit us at:<br>Example.com<br>Box 564, Disneyland<br>USA</address>

<code>
定义计算机代码文本。
<pre>
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<ul>
无序 HTML 列表：

<ul>  <li>Coffee</li>  <li>Tea</li>  <li>Milk</li></ul>

<ol>

有序 HTML 列表：

<ol>  <li>Coffee</li>  <li>Tea</li>  <li>Milk</li></ol>

<div>

<div style="color:#00FF00">  <h3>This is a header</h3>  <p>This is a paragraph.</p></div>

<table>

<table border="1">  <tr>    <th>Month</th>    <th>Savings</th>  </tr>  <tr>    <td>January</td>    <td>$100</td>  </tr></table>

<caption>

<table border="1">  <caption>Monthly savings</caption>  <tr>    <th>Month</th>    <th>Savings</th>  </tr>  <tr>    <td>January</td>    <td>$100</td>  </tr></table>

<a>

<a href="http://www.baidu.com">baidu</a>

<img>

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

<form>

<form action="form_action.asp" method="get">  <p>First name: <input type="text" name="fname" /></p>  <p>Last name: <input type="text" name="lname" /></p>  <input type="submit" value="Submit" /></form>

<input>

<input type="submit" value="Submit" />

<textarea>

<textarea rows="3" cols="20">hello world</textarea>

<button>

<button type="button">button</button>

<select>

<select>  <option value ="volvo">Volvo</option>  <option value ="saab">Saab</option>  <option value="opel">Opel</option>  <option value="audi">Audi</option></select>

<option>

<option value="audi">Audi</option>

<label>

<form>  <label for="male">Male</label>  <input type="radio" name="sex" id="male" />  <br />  <label for="female">Female</label>  <input type="radio" name="sex" id="female" /></form>

阅读全文

0 0