2018年04月6日网站服务器迁移完成……

HTML笔记(一)

技术流 苏 demo 1285℃ 0评论
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>

<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

这是HTML最基本的结构,HTML 不是一种编程语言,而是一种 标记 语言

其中:

  • DOCTYPE 声明了文档类型
  • 位于标签 <title>与</title>为文档标题
  • 位于标签 <html> 与 </html> 描述了文档类型
  • 位于标签 <body> 与 </body> 为可视化网页内容
  • 位于标签 <h1> 与 </h1> 作为一个标题使用
  • 位于标签 <p> 与 </p> 作为一个段落显示

1.基本标签的含义

<a>定义一个超链接

<h1>最大的标题</h1>

<h2> . . . </h2>

<h3> . . . </h3>

<h4> . . . </h4>

<h5> . . . </h5>

<h6>最小的标题</h6>

<p>这是一个段落。</p>

<br> (换行)

<hr> (水平线)

<!– 这是注释 –>

2.文本格式化

<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> (上标文本)

3.链接

普通的链接: <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>

4.图片

<img src=”URL” alt=”替换文本” height=”42″ width=”42″>

5.样式、区块

<style type=”text/css”>

h1 {color:red;}

p {color:blue;}

</style>

<div>文档中的块级元素</div>

<span>文档中的内联元素</span>

6.列表

(1)无序列表

<ul>

<li>项目</li>

<li>项目</li>

</ul>

(2)有序列表

<ol>

<li>第一项</li>

<li>第二项</li>

</ol>

(3)定义列表

<dl>

<dt>项目 1</dt>

<dd>描述项目 1</dd>

<dt>项目 2</dt>

<dd>描述项目 2</dd>

</dl>

7.表格

<table border=”1″>

<tr>

<th>表格标题</th>

<th>表格标题</th>

</tr>

<tr>

<td>表格数据</td>

<td>表格数据</td>

</tr>

</table>

8.框架

<iframe src=”demo_iframe.htm”></iframe>

9.表单

<form action=”demo_form.php” method=”post/get”>

<input type=”text” name=”email” size=”40″ maxlength=”50″>

<input type=”password”>

<input type=”checkbox” checked=”checked”>

<input type=”radio” checked=”checked”>

<input type=”submit” value=”Send”>

<input type=”reset”>

<input type=”hidden”>

<select>

<option>苹果</option>

<option selected=”selected”>香蕉</option>

<option>樱桃</option>

</select>

<textarea name=”comment” rows=”60″ cols=”20″></textarea>

</form>

10.字符实体

空格 &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
引号 &quot; &#34;
撇号 &apos; (IE不支持) &#39;
&cent; &#162;
£ &pound; &#163;
¥ 日元 &yen; &#165;
欧元 &euro; &#8364;
§ 小节 &sect; &#167;
© 版权 &copy; &#169;
® 注册商标 &reg; &#174;
商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;
打赏

转载请注明:苏demo的别样人生 » HTML笔记(一)

   如果本篇文章对您有帮助,欢迎向博主进行赞助,赞助时请写上您的用户名。
支付宝直接捐助帐号oracle_lee@qq.com 感谢支持!
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情