HTML(一)

1 概念

1.1什么是HTML

         全称:HyperText Markup Language

超文本标记语言,标准通用标记语言下的一个应用。

超文本就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

超文本标记语言的结构包括部分(英语:Head)、和主体部分(英语:Body),其中部提供关于网页的信息,主体部分提供网页的具体内容。

 

         通俗的说就是用来写网页的。

         为什么可以上网?

         浏览器将服务器上的内容下载到本地,然后渲染成网页,这样就看到了网页。

2 HTML的基本架构

2.1快速入门,编写第一个HTML网页

[1]创建一个TXT文件

[2]将txt文件的后缀修改为htm或者html

关于HTM和HTML有区别吗?

没有任何区别,早先(不知道有多早)的操作系统只认识3位后缀名。所以为了兼容早先的操作系统,才有了htm这样的后缀。实际的应用这两种没有任何区别。

[3]打开文件

         ①双击打开,就是用默认的浏览器打开”浏览”。浏览就是查看网页的效果。

         ②以编辑的形式打开。

                   右键 –》

选择任何一个开发工具都可以,我们选择记事本(为了装X)。

         [4]编辑和测试

          测试的浏览器选择:

当然还有更多的浏览器。

我们选择使用谷歌浏览器。

开始编辑HTML文件

在其中写一句话“我的HTML”

刷新网页:

其实HTML有专门的结构。

Tips:html是不区分大小写的。但是尽量小写。

标签:参照XML的标签理解

 

结构:

结构展示:

3 HTML标签的深度理解

         Tips:HTML是纯文本文件。所有的程序文件都是纯文本文件。

         以文本来修饰文本。

        

         关键词“语意”。

         标签实际上是表达一种语意。

         比如:

添加CSS修改样式:

 

HTML标签只是表示一种语意。并不是规定标签中的内容应该展示成什么样子?展示的样子基本上都是由CSS控制。

4 常用标签

4.1结构标签

[1]文档申明:

HTML5 

<!DOCTYPE html>

HTML 4.01 Transitional

DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

[2]HTML标签

         HTML标签是HTML文档的根节点。

[3]HEAD标签

         表示HTML文档的头部,一般都是用来做一些文档的配置或者说明。

         比如title标签:title标签是用来表示文档的标题的。

        

         Meta

  • 置页面的内容类型

         <meta http-equiv="content-type" content="text/html;charset=utf-8">

  • 配置网页简介

<meta name="description" content="这里是我们的网页的简介......."/>

  • 网页的关键字

<meta name="keywords"  content="极客营,极客教育,QQ靓号,。。。。。。。"/>

对CSS和JS的引用:

[4]body

         所有要展示的内容全部编写在body标签中。

4.2[插播]开发工具的选择

(几乎已经绝迹,不好用有bug)

HBuilder (好用,一个不错的选择)

subline (好用,神器)   我们的选择

webstorm(好用)

 

将我们的HTML文件拖拽到开发工具中。

 

4.3 常用的标签

[1]标题标签

         表示在文档中添加一个标题。标题分为6级,分别是h1…h6。

         案例:

特性: 默认黑体字。 默认自动换段落。独占一行。

[2]P标签  表示段落。

默认表现形式,就是换段。

默认特征:自动换行换段,独占一行。

[3]特殊的控制标签

         换行标签 br  自闭和标签

         HTML默认不认识换行符。

         必须使用换行符号表示换行。

换行和换段的区别

         空格标签  &nbsp; 

         在HTML中依然不认识空格。

无论写多少空格,浏览器只认识一个空格。

解决办法就是使用 &nbsp;

         双引号的表示形式 &quot;

         因为双引号在网页中有特殊的意义,所以理论上不能直接编写, 要使用特殊的符号代替。

Tips:在不产生歧义的情况下,直接编写也是没有问题的。

         尖角号的表示形式 &gt; &lt;

         尖角号在网页有特殊的意义,表示标签的开始和结束,所以不能直接编写。

浏览器将<igeek>解释成一个标签了。但是不认识此标签,所以不展示。

所以使用特殊符号代替尖角号:

在没有歧义的情况下,一般也能解释运行。例如:

         版权符号 &copy;

[4]分割线 hr

         其实就是一根线

        

4.4[插播]属性

    HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息

属性总是以名称/值对的形式出现,比如:name="value"

属性总是在 HTML 元素的开始标签中规定。

      例如前面说过的meta标签:

 

      案例:

     

其中的3个属性:

Size : 表示线的厚度,使用数字表示像素。

Color: 表示线的颜色,可以使用多种表现形式。

Width: 表示线的长度,默认单位是像素。

4.5 [插播]color的值的编写形式

所有地方使用到color时都是一样的编写形式。

  • 用英文字母。 上面的例子中用的就是英文字母。
  • 使用16进制的数字表示。(推荐使用)

例如:#FF0000  

其中有6个数字,每两个数字为一组,表示一种颜色,总共表示3中颜色,(RGB)。

每一种颜色的范围是 00~FF

所有颜色最大为白色,所有颜色最小为黑色。

  • 使用函数,这种形式往往在CSS中使用

rgb(255,0,0)  3个参数表示rgb颜色的占比。 范围是0~255。

rgba(255,0,0,.2) 4个参数,前三个和上面的一样。第四个参数表示透明度,.2就是0.2

4.6 Font标签

         注意:此标签已经属于被废弃的标签。主要是用来控制字体的。但是字体其实应该使用CSS控制,所以此标签被废弃了。我们学习纯粹为了今天的作业。

         <font size=”” face=”” color=””>极客营</font>

         三个属性:

         Size : 表示字体的大小。 范围是 1~7。 默认是3 ,可以写具体的数组,也可以写 +2。

         Face: 字体,编写字体名称。

         Color: 表示字体的颜色。

案例:

4.7常用标签中的超链接和图片

[1]图片标签

<img  src=””/> 可以显示一张图片。

S1:Src:指向图片的位置(具体的物理位置,url地址。) 物理地址可以使用绝对路径,也可以使用相对路径。

案例:

通过url显示网络上的图片:

 

S2 : 调整图片大小的属性

         Width: 设置图片的宽度。

         Height:设置图片的高度。

案例:

让图片不变形:让尺寸按照比例变化。

 

S3 : 图片提示的属性

         Alt:当图片显示失败的时候的提示内容。

         Title:当鼠标悬浮在图片上的时候的提示内容。

         案例:alt属性

        

         案例:title属性

S4: 图片的对其方式的属性 align  默认是 bottom。

这里的对其方式其实是说图片相对于同一行的其他内容的对其方式。

案例: left

案例:right

案例:center

案例:top

案例:bottom

[2]超链接标签

<a href=””> 超链接内容 </a>

其中的href指向连接资源。一个完整的超链接必须有HREF属性。不然只是一个a标签而已。

案例:

超链接同样可以指向本地资源

 

Target属性:主要是设置连接的内容显示在什么位置?

默认是_self 显示在当前页面的位置。

_blank :显示在一个空白的选项卡中。

 

 

锚标记

常见的案例:章节的跳转,回到顶部

5 结构控制标签

5.1列表

5.1.1有序列表

<ol>

         <li>条目</li>

         <li>条目</li>

         <li>条目</li>

         …….

</ol>

 

Type属性:设置列表顺序的表示形式(1,A,a,i,I)

Start属性:设置列表的开始位置。

案例:

5.1.2无序列表

<ul>

         <li>条目</li>

         <li>条目</li>

         <li>条目</li>

         …….

</ul>

无序列表和有序列表的唯一区别就是没有序号。

案例:

Type属性:设置条目前面的图标形式(circle,disc,square)

 

 

 

5.1.3 列表的嵌套使用

案例:

5.2表格

Table:表示一个表格

Tr:表示一行

Th:表示一个表头的单元格

Td:表示一个普通的单元格

编写一个三行三列的表格:

编写方法就是逐行编写。每行编写固定的单元格即可。

Th标签表示表头,默认会自动居中加粗。

Table标签的属性:

Border: 设置表格的边框, 默认是0。一旦设置了之后,表格外围的边框就是指定的数字,单元格的遍就是1.

Width和height:指定表格的宽度和高度的,默认情况下,各行各列都是按需分配。

Align:表格的对其方式 (left,right,center)。

Cellspacing属性:设置单元格之间的距离。一般情况下都是0.

称之为:间距

Cellpadding属性:设置单元内容和边框之间的距离

称之为:填充距。

不规则表格

需求:(三行三列)

第一行两个单元格, 其余的都是三个单元格,第一行的第二个单元格跨两列。

 

跨行表格:

 

每一个td的属性:

Width:可以通过设置一个单元格的宽度而设置整列的宽度

Tips:单元格的宽度同样可以使用百分比设置。

 

Align:设置单元格的水平对其方式

Valign:设置单元格元素的垂直对其方式

6 其他标签

<b> 标签规定粗体文本。

<strong> 标签规定重点文本。同样会让文本粗体。

<i> 斜体文本。

<u> 下划线。

。。。

以上标签基本上都可以使用CSS实现。

 

7 案例(百度首页)

<!DOCTYPE html>

<html>

<head>

         <title>百度一下,你就知道</title>

         <meta charset="utf-8">

</head>

<body>

         <table width="100%" height="550" border="0">

                   <tr height="20">

                            <td align="right">

                                     <a href="#"><font color="#333333" face="黑体" size="2"><b>新闻</b></font></a>

                                     &nbsp;&nbsp;&nbsp;

                                     <a href="#"><font color="#333333" face="黑体" size="2"><b>hao123</b></font></a>

                                     &nbsp;&nbsp;&nbsp;

                                     <a href="#"><font color="#333333" face="黑体" size="2"><b>地图</b></font></a>

                                     &nbsp;&nbsp;&nbsp;

                                     <a href="#"><font color="#333333" face="黑体" size="2"><b>视频</b></font></a>

                                     &nbsp;&nbsp;&nbsp;

                                     <a href="#"><font color="#333333" face="黑体" size="2"><b>贴吧</b></font></a>

                                     &nbsp;&nbsp;&nbsp;

                                     <a href="#"><font color="#333333" face="黑体" size="2"><b>学术</b></font></a>

                                     &nbsp;&nbsp;&nbsp;

                                     <a href="#"><font color="#333333"  size="2">登录</font></a>

                                     &nbsp;&nbsp;&nbsp;

                                     <a href="#"><font color="#333333"  size="2">设置</font></a>

                                     &nbsp;&nbsp;&nbsp;

                            </td>

                            <td bgcolor="#3388FF" align="center" width="70">

                                     <font color="#ffffff" size="2" face="宋体">更多产品</font>

                            </td>

                   </tr>

                   <tr><td colspan="2" align="center" height="130"  valign="bottom">

                            <img width="270" height="129" src="images/bd_logo1.png"/>

                   </td></tr>

                   <tr><td colspan="2" valign="top" align="center">

                            <br/>

                            <!-- <img src="images/input.png"/> -->

                            <div style="border-color:#999; padding: 0px; margin: 0px; height: 30px; width: 680px" >

                                      <input type="text" style="width: 550px; height: 30px; float: left" />

                                     <input type="button" value="百度一下" style=" border:1px solid #3385FF; background-color:#3385FF ; color:#ffffff; width: 100px; float: left; height: 35px;" />

                            </div>

                   </td></tr>

                   <tr><td colspan="2" ></td></tr>

                   <tr><td colspan="2" height="100" align="center">

                            <img src="images/code.png"/>

                            <br/>

                            <font color="#555555" size="2"><b>百度</b></font>

                   </td></tr>

                   <tr><td colspan="2" height="25" align="center">

                            <a href="#"><font color="#999999" size="2">把百度作为首页</font></a>

                            &nbsp;&nbsp;&nbsp;

                            <a href="#"><font color="#999999" size="2">关于百度</font></a>

                            &nbsp;&nbsp;&nbsp;

                            <a href="#"><font color="#999999" size="2">About Baidu</font></a>

                            &nbsp;&nbsp;&nbsp;

                            <a href="#"><font color="#999999" size="2">百度推广</font></a>

                   </td></tr>

                   <tr><td colspan="2" align="center" height="25">

                            <font color="#999999" size="2">&copy;2018 百度</font>

                            &nbsp;

                            <a href="#"><font color="#999999" size="2">使用百度前必读</font></a>

                            &nbsp;

                            <a href="#"><font color="#999999" size="2">意见反馈</font></a>

                            &nbsp;

                            <font color="#999999" size="2">京ICP证030173号<img src="images/bg1.png"></font>

                            &nbsp;&nbsp;&nbsp;

                            <a href="#"><font color="#999999" size="2">京公网安备11000002000001号<img src="images/bg2.png"/></font></a>

                   </td></tr>

         </table>

</body>

</html>

未完待续。。。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值