第二章HTML基础----学习笔记

(152) 2024-03-17 13:01:01

2.1什么是HTML(次重点)

2.1.1 HTML简介(识记

1.HTML(Hyper Text Markup Language )即“超文本标记语言”,是用特殊标记来描述文档结构和表现形式的一种语言。

 

2.目前发展至html5

 

3.严格地说,HTML并不是一种程序设计语言,它只是一些由标记和属性组成的规则,这些规则规定了如何在页面上显示文字、表格、超链接等内容

 

 

Web浏览器(识记

1.用户浏览网页实际上是通过Web浏览器实现的。

2.目前主流的浏览器有微软公司的IE(Internert Explorer)和开源的Firefox以及遨游、腾讯TT等浏览器。

2.1.3 HTML开发工具(应用)

1.记事本、FrontPage、Dreamweaver。

 

2.推荐使用1.3节讲过的EditPlus软件

制作一个简单的HTML文件(应用)

2.2HTML基本语法 (重点)

2.2.1 HTML标记(识记)

1. 标记/标签(tag),双标签,单标签

2.单标签<br />

3.双标签<html></html>

2.2.2 标记属性(识记)

1.标签/标记属性作用:实现功能,实现效果

2.标签/标记属性的语法:<标记名 属性名=“属性值” 属性名=“属性值”……> …… </标记名>

3.不同的标记有不同的属性,但不同的标记也有相同的属性

2.2.3 文档头部(识记)

1.文档头部就是包含在<head>和</head>之间的所有内容,它不显示在页面中,但它会告诉浏览器要如何处理文档主体内的内容

2. 主要标记 :<title>与</title>标记,<bgsound>标记,<meta>标记 其他标记(比如<link>和<style>标记 )

 

2.2.4 文档主体(识记)

1.文档主体是指包含在<body>和</body>之间的所有内容,它们将显示在浏览器窗口内。

2. 文档主体可以包含文字、图片、表格等各种标记 。

3.在文档主体中还可以添加许多属性(如background、text 、leftmargin  等),用来设置网页背景、文字、页边距等

2.2.5 注释语句(理解)

1. 注释语句又称为注释标记,这些标记在浏览网页时不会显示,只是在编辑文件时可以看到。适当使用注释语句,可以让网页的维护和更新变得十分方便。

2.注释语句的格式:

<!—这中间是注释的内容-->

//这后面是注释内容

/*这中间是注释内容*/

 

2.3HTML基本元素 (重点)

文字(识记)

1.文字设置:

一般包括文字格式和文字样式的处理,

文件格式即文字的位置、段落等属性,

文字的样式指文字的颜色、字体大小等

2. 常用的文字处理标记 :

<p>和</p>标记

<br>标记

<pre>和</pre>标记

<hn>和</hn>标记

<font>和</font>标记

文字样式标记(如<b></b>)

列表(识记)

  1. 在HTML中,可以使用符号列表或排序列表标记,以使得文档更具有条理性。

 

 

 

符号列表:符号列表又称为无序列表,每一个列表项目的前面可以是空心原点(circle)、实心方块(Square)或实心圆(disc)点等符号

 

 <ul type="Square">

<li>列表项</li>

</ul>

3.. 排序列表/有序列表:每个列表项目前面都是一个编号字符,可以是数字也可以是字母

<ol type="1" start="1">

<li>列表项

</ol>

第二章HTML基础----学习笔记 (https://mushiming.com/)  第1张

第二章HTML基础----学习笔记 (https://mushiming.com/)  第2张

图像(识记)

1.<img>标记插入图片;

<img src="flower.jpg" width="270" height="167" border="1" alt="鲜花" align="left" >

2. 图像文件类型主要有JPG文件和GIF文件与png格式

表格

  1. 表格有两个主要功能:一是用来展示文字或图像等内容;二是用来实现版面布局,使网页更规范更美观
  2. <table>与</table>标记
  3. <table>标记用来声明表格,<table>和</table>标记之间就是整个表格的内容。

该标记有许多属性用来设置表格背景、表格边框宽度等

bgcolor   background  width、height  border  align

4.<caption>与</caption>标记

该标记用来设置表格的标题,它有align和valign两个属性,其中align属性表示水平对齐方式,与<table>标记相似

5. 双标签<td>

一个<td>标记表示一列,该标记也有bgcolor、background、width、height、align、valign属性,

 <td>标记还有两个非常重要的属性:

 rowspan指定当前单元格跨越行的数量;

colspan指定当前单元格跨越列的数量 

6.<th>与</th>标记

该标记用来设置一个单元格为标题栏,用法和<td>标记相似,只是自动将单元格内容以粗体显示。

 7.两行两列的表格表格

<table  width=”” bgcolor=”” align =””>

<caption>表格的标题</caption>

<td>列<tr>行</tr><tr>行</tr></td>

<td>列<tr>行</tr> <tr>行</tr></td>

</table>

超链接(识记)

1.超链接的作用:实现页面跳转的功能。

2.超链接的用法如下:

<a href="http://www.sohu.com" target="_blank" title="搜狐网站">搜狐</a>

超链接可以实现链接到另一个文件、邮箱、普通压缩文件等

字符实体(识记)

1.为什么要使用字符实体?

有些字符是无法在HTML中直接显示的 ,那么就要用到字符实体 来代替显示。

2.实体的组成:一般包括三个部分,一个and符号(&),一个字符实体名或者实体号和一个封号(;)。

3.常用字符实体:

&nbsp; &quot; &lt; &gt

 

2.4HTML高级元素(次重点)

2.4.1 表单(了解)

1. 表单(Form):就是将要填写的文本框、下拉列表框等元素组合在一起就形成了表单

2. 表单的主要标记:文本框、按钮、下拉列表框

3. 属性主要有:Name action  method

4. <input>与</input>标记

该标记用于在表单中定义单行文本框、密码框、单选框、复选框、按钮等表单元素。不同的元素有不同的属性type (text 、password 、radio 、checkbox 、submit、image等 )name value

5. <select>与</select>标记

该标记用来定义一个列表框,其中的一个<option>标记就是列表框中的一项。主要属性:name  size  multiple  value  selected

第二章HTML基础----学习笔记 (https://mushiming.com/)  第3张

第二章HTML基础----学习笔记 (https://mushiming.com/)  第4张

2.4.2 框架网页(应用)

所谓框架网页,就是指在一个浏览器窗口内同时显示几个不同的HTML文档。

 

<frameset>与</frameset>标记

该标记就用来定义框架的结构,是左右还是上下结构。

属性如下:

cols

rows

frameborder 属性规定是否显示框架周围的边框。

<frame  frameborder=”0 and 1”>1有边框 0无边框

border

bordercolor

<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">

  <frame src="/example/html/frame_b.html">

  <frame src="/example/html/frame_c.html">

</frameset>

第二章HTML基础----学习笔记 (https://mushiming.com/)  第5张

2. 混合框架的使用

<frameset rows="50%,50%">

<frame src="/example/html/frame_a.html">

<frameset cols="25%,75%">

<frame src="/example/html/frame_b.html">

<frame src="/example/html/frame_c.html">

</frameset>

</frameset>

页面效果:

第二章HTML基础----学习笔记 (https://mushiming.com/)  第6张

2.5其他元素 (理解)

第二章HTML基础----学习笔记 (https://mushiming.com/)  第7张

2.6本章小结

1.本章的重点是HTML的主要标记及标记属性的使用。

2.其中表格、表单、框架的设计尤为重要

3.更为重要的是要动手练习

THE END

发表回复