Html基础知识（基础标签的认识）

时间：2022-07-09 12:40:11

HTML的基础知识

1.1标记语言的基本概念

1.1.1什么是计算机语言

    计算机只知道“0”和“1”，所以我们通过“0”和“1”这种语系来和计算机交流，这就是机器语言。机器语言对于人来讲太难理解，编制程序太困难，为了解决这个问题，我们将一串特定的“01”进行符号化，这就是汇编语言

    机器语言和汇编语言都是属于低级语言，即体现了机器的特性，而对于大多数不是计算机工程师的人来讲，还是太困难了。

高级语言：用类似英语加数学的符号来描述，最大程度屏蔽了机器的特性，使得程序的阅读和编制变得越来越容易。

if(a>b){

       c =a+1;

}else{

       c = b;

}

      常见的高级语言有：C、C++、Java、PHP等等

1.1.2什么是标记语言

        什么是文本文件：只有文本内容 没有任何格式。举例：“带你出师，闯荡江湖”，并设置相应的格式，但是在其他电脑上打开并没有显示同样的格式，说明其不包含任何格式信息，查看文件大小显示20字节。

        在Word中输入同样的内，同时设置格式，在另一台电脑上看到的是同样的内容和同样的格式。同时查看文件的大小也相比之下较大，说明Word文档中除了存储内容，还存储了格式等信息（document.xml）ml就是标记语言（MarkupLanguage）的缩写。

        我们要学习的HTML（HyperTextMarked Language）也是一种标记语言

        超文本：不仅仅能表示文本信息，还能表示音频视频、格式等信息。

        浏览网页实际上就是将存储在服务器上的HTML文件下载到本地，然后通过浏览器（IE、Chrome等）进行解析并呈现内容。

1.2   HTML的基本结构

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"

       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- head部分主要做一些设置工作，比如字符集、标题等-->
<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title>我的第一个网页</title>
</head>
<!--文档的主体部分，呈现给用户的信息都在此-->
<body>
带你出师，闯荡江湖！
</body>
</html>
<p>白日依山尽，</p>
<p>黄河入海流。</p>
<p>欲穷千里目，</p>
<p>更上一城楼。</p>
_self: 默认，在相同的框架中打开链接文档
_top ：在整个窗口中打开被链接的文档
        绝对路径就是可以完整的描述文件位置的路径，我们不需要知道其他任何信息就可以根据绝对路径来判断出文件的位置
        相对路径，顾名思义就是自己相对于目标位置，不论将这些文件放到哪里只要他们的相对关系没有改变，就不会出错
     表示相对路径有： “../”表示上一级目录，“../../”表示上上一级目录
                        “pic/”表示下一级目录
                    “./”表示当前目录
例如：
<base href="http://tanminr.free-web-hosting.biz/"> 
那么，整个页面的相对地址就是在tanminr.free-web-hosting.biz底下展开的。不管移动到何处。

<!—设置页面的基准地址-->
<basehref="http://www.runoob.com/images/">     
<title>Bas的作用</title>
</head>
<body>
<!—实现简化地址的书写-->
<imgsrc="logo.png"/><br>
<imgsrc="logo.png"/>
<dl>
    <h3>中国省市</h3>
    <dt>河南</dt>
    <dd>河南是中华民族与华夏文明的发源地</dd>
    <dt>江苏</dt>
    <dd>江苏位于*东部沿海，经济繁荣昌盛，高居全国各省第一</dd>
</dl>

<html>：是整个文档的根节点，它包含两个子节点：

<head>：主要描述文档的设置信息，比如字符集、标题等

<body>：是文档的主体部分，需要呈现的内容都安排在其中。

注释：

快捷键：ctrl+shift+/

形式：<!-- -->

作用：对代码进行说明，方便程序员阅读和理解。注释对于计算机的执行结果没有任何影响。

注释非常重要，代码正确是前提，但清晰也是一个非常重要的原则，程序员需要养成注释的好习惯。

基础标签

<标签名></标签名>

2.1 标题标签

标题（header）标签用于显示页面的标题信息，既包括了格式信息，同时提供了语义信息。

<h1><h6>从大到小六个等级

2.2 段落标签

段落（paragraph）标签标示页面的一个段落，自动换行。

<h3>登鹳雀楼</h3>

2.3 链接标签

链接标签<a>的作用是跳转，包括页间跳转和页内跳转。

1.  页间跳转   

<ahref="http://www.runoob.com"target="_blank"title="我真的很菜！">菜鸟网</a>

① href属性指定链接的目标URL地址。

② target属性指定打开目标页面的方式，其取值包括：

_parent：在父框架集中打开链接文档

       （以上三个属性是在当前页面中打开新的窗口）

_blank:在新的页面中打开；

 ③title属性指定提示信息

2. 页内的跳转

在目标标签处指定id=“...”，在链接处指定href=“#...”

Id属性是页面元素的唯一标识

“锚点”：anchor，在这里 id就是作为锚点来被使用的。

2.4 图片标签<img>

在网页中嵌入图片

src属性:source（来源）,图片资源的URL地址，可以是本地的，也可以是远程的

<imgsrc="月河街.jpg">

<imgsrc="https://youimg1.c-ctrip.com/target/100m090000003n6a32DF4.jpg">

alt属性:alternative（可替代的），即当资源不存在时，替代显示的文字内容。例如：如果图片的路径因为不存在或者损坏的时候，这时候就可以用alt属性来设置“图片已损坏！”，alt属性和src属性是二选一使用的

路径：参考上面的相对路径与绝对路劲

2.5 杂项

<span>:可以将部分文本独立出来进行样式设置

<br>：强制换行

<hr>：绘制一条横线

<base>（基础、底部）：设置页面的基准地址，从而简化地址的书写。

列表标签
3．1 无序列表
1. <ul> unorderedlist:定义一个无序列表
2. <li> list item:定义一个列表项
3. Ctrl+d:复制当前行
 Li*4,tab键：产生3个li
4. Type属性用来指定无序列表的符号，取值有：
 Disc:实心圆点，默认值
 Circle：空心的圆圈
 Square：实心的正方形
3.2 有序列表
<ol> orderedlist,有序列表，即列表项带有序号。
Type属性用来指定序号的类型，其取值：
1：序号为1.2.3.4......,默认值
A: 序号为A.B.C.D......；
a: 序号为a.b.c.d......；
i: 序号为 i.ii,iii,iv..；
I：序号为 I.II.III.IV..；
Start属性指定从第几个开始，当取值为0或负数时，它会把负数排完再从指定的序号种类开始依次排序
3.3 列表的嵌套
自学

3.4 自定义列表

<dl>
    <h3>中国省市</h3>
    <dt>河南</dt>
    <dd>河南是中华民族与华夏文明的发源地</dd>
    <dt>江苏</dt>
    <dd>江苏位于*东部沿海，经济繁荣昌盛，高居全国各省第一</dd>
</dl>
    Html基础知识（基础标签的认识）
dt 和dd中可以再加入 ol ul li和p进行嵌套

标签：

相关文章