计算机导论——HTML基础

最新推荐文章于 2022-07-03 02:39:11 发布

爱吃苹果的派大星

最新推荐文章于 2022-07-03 02:39:11 发布

阅读量732

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/tttsep9th2244/article/details/122589328

版权

可以使用：记事本,EditPlus ,Dreamweaver、HBuilder 完成编辑

基础知识

基本结构
（1）文件标记：…整个HTML文档内容均在…标记之中。
（2）头部标记： … 整个HTML文档分头部和主体部分。头部使用…标记标识，凡是在此标记之内的内容，例如标题等，均属于头部信息。头部信息不显示在Web页中。
（3）头部标题标记： …在此标记之间的内容将作为标题显示在浏览器的标题栏。注意： …标记只能放在…标记之间。
（4）标记：元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词
（5）主体标记： …主体是Web页的主要部分，用…标记定义的信息将显示在Web页中。

范例：

<HTML>
      <HEAD>
			<META CHARSET="UTF-8" />
      		<TITLE>标题</TITLE>
      </HEAD>
      <BODY>网页制作练习</BODY>
      <p>家庭地址：</p>
</HTML>

列表标记

（1）< dl >< /dl >用来创建一个列表;
（2）< dt >< /dt >用来创建列表中的上层项目;
（3）< dd >< /dd >用来创建列表中最下层项目;< dt >< /dt >和< dd >< /dd >都必须放在< dl >< /dl >标记之间。
（4）< ol >< /ol >标记用来创建一个标有数字的列表；
（5）< ul >< /ul >标记用来创建一个标有圆点的列表；
（6）< li >< /li >标记只能在< ol >< /ol >或< ul >< /ul >标记之间使用，此标记对用来创建一个列表项。若< li >< /li >放在< ol >< /ol >之间,则每个列表项加上一个数字，若在< ul >< /ul >之间,则每个列表项加上一个圆点。

范例：

<head>
<title>一个普通列表</title>
<META CHARSET="UTF-8" />
</head>
<body text="blue">
<dl>
   <dt>中国城市</dt>
      <dd>北京 </dd>
      <dd>上海 </dd>
      <dd>广州 </dd>
   <dt>美国城市</dt>
      <dd>华盛顿 </dd>
      <dd>芝加哥 </dd>
      <dd>纽约 </dd>
</dl>
<ol><p>中国城市 </p>
    <li>北京 </li>
    <li>上海 </li>
    <li>广州 </li>
</ol>
<ul>
    <p>美国城市 </p>
    <li>华盛顿 </li>
    <li>芝加哥 </li>
    <li>纽约 </li>
</ul>
</body>
</html>

文本标记

（1）< h1 >< /h1 >……< h6 >< /h6 >（六级标题标记）
（2）< h1 >< /h1 >是最大的标题，< h6 >< /h6 >则是最小的标题。如果要在HTML文档中输出标题，那麽可以使用六对标题标记的任何一对。
（3）< b >< /b >之间的文本以黑体字的形式输出；
（4）< i >< /i >之间的文本以斜体字的形式输出；
（5）< u >< /u >之间的文本以下加一划线的形式输出。
（6）< em >< /em >< strong >< /strong >（强调加重标记）
（7）< em >< /em >用来输出需要强调的文本(通常是斜体加黑体)；
（8）< font >< /font >（字体的大小颜色标记）
（9）< font >< /font >可以指定输出文本的字体大小、颜色，它主要两个属性size和color。
size属性用来指定字体的大小，可以取值：-1、1和+1；

color属性用来指定文本的颜色，颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色名称。例如，"#ff0000"，引号内的rrggbb是用六位十六进制数字表示的RGB(即红、绿、蓝三色的组合)颜色，#ff0000对应的是红色。

Html语言所给定的颜色名称有：
Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal。

（10）< p >…< /p >（段落标记）< p >…< /p >标记用来创建一个段落，在此标记之间的文本将按照段落的格式显示。
（11）< br >（换行标记）< br >是一个很简单的标记，它没有结束标记，用来创建一个换行。

范例：

<html><head>
<META CHARSET="UTF-8" />
<title>文本标记的综合示例</title></head>
<body text="blue">
<h1>最大的标题</h1>
<h3>使用h3的标题</h3>
<h6>最大的标题</h6>
<p><b>黑体字文本</b> </p>
<p><i>斜体字文本</i> </p>
<p><u>下加一划线文本</u> </p>
<p><em>强调的文本</em></p>
<p><strong>加重的文本</strong></p>
<p><font size=“+1” color=“red”>size取值“+1”、
color取值“red”时的文本</font></p>
</body>
</html>

链接与图像标记

（1） <a href=“地址">… < /a >（超链接标记），target属性，当浏览者点击了链接之后将在原来的浏览器窗口中显示HTML文档，若target的值等于“_blank”，点击链接后将会打开一个新的浏览器窗口显示HTML文档。
（2） < img src=“图像文件名” >将图形文件嵌入到网页文档中的当前位置，< img >标记还有alt（文字代替）、align（对齐）、border（边框）、width（宽度）和height（高度）属性。

范例：

<html>
<head><META CHARSET="UTF-8" />
<title>链接标记的综合示例</title></head>
<body>
<p align="center" style="font-size:9pt;
color:yellow;background:black"><br>
<a name="Top"><font color="red">创建标签处</font></a><br>
<br><br><br><br><br><br><br><br><br><br>
欢迎想要学习网页制作的同学<br>
<a href="http://www.baidu.com"><font color="lime">百度网站</font></a><br>
<br>
<a href=“http://www.baidu.com”>
   <img src="" ></a>
<br><br><br><br><br>
本网站的主要内容<br>
<br><a href="http://10.2.132.70/" target="_blank">
在新窗口中显示</a><br>
</body>
</html>

表格标记

（1）< table >< /table >（创建一个表格）
（2）< tr >< /tr >和< td >< /td >（创建表格中的每一行和每一格）
（3）< th >< /th >（创建表格头）

范例：

<html><head>
<META CHARSET="UTF-8" />
<title>表格标记示例</title></head>
<body>
<table border="1" width="80%" bgcolor="#E8E8E8“
  cellpadding="2" bordercolor="#0000FF“
  bordercolorlight="#7D7DFF" bordercolordark="#0000A0">
<tr>
<th width="33%" colspan="2" valign="bottom">意大利</th>
<th width="36%" colspan="2" valign="bottom">英格兰</th>
<th width="36%" colspan="2" valign="bottom">西班牙</th>
</tr>
<tr>
<td width="16%" align="center">AC米兰</td>
<td width="16%" align="center">佛罗伦萨</td>
<td width="17%" align="center">曼联</td>
<td width="17%" align="center">纽卡斯尔</td>
<td width="17%" align="center">巴塞罗那</td>
<td width="17%" align="center">皇家社会</td>
</tr>
<tr>
<td width="16%" align="center">尤文图斯</td>
<td width="16%" align="center">桑普多利亚</td>
<td width="17%" align="center">利物浦</td>
<td width="17%" align="center">阿申纳</td>
<td width="17%" align="center">皇家马德里</td>
<td width="17%" align="center">……</td>
</tr>
<tr>
<td width="16%" align="center">拉齐奥</td>
<td width="16%" align="center">国际米兰</td>
<td width="17%" align="center">切尔西</td>
<td width="17%" align="center">米德尔斯堡</td>
<td width="17%" align="center">马德里竞技</td>
<td width="17%" align="center">……</td>
</tr>
</table>
</body>
</html>