目 录CONTENT

文章目录

HTML基础

Administrator
2020-07-24 / 0 评论 / 0 点赞 / 10144 阅读 / 19147 字

HTML基础

开发工具的选择

前端的开发工具有很多,现在列举几个比较常见的

  1. HbuilderX国内开发的一款软件,使用频率非常高,后期可以使用它开发uni-app
  2. VSCode全称叫Visual Studio Code,是微软出品的一个开发工具,简单好用,跨平台。这也是目前程序员使用得非常多的一个软件
  3. Sublime Text国外开发的一款软件,现在是第3个版本,要钱!
  4. Dream Weaver简称DW,这款软件是Adobe公司的,一般UI设计师用得比较多
  5. WebStorm软件,功能强大,操作也简单,要钱!

在我们目前这个班级的学习里面,我们前期使用HBuilderX进行开发,后期会转向VSCode

创建第一个项目

前端的项目依托于文件夹的形式存在,所以我们可以直接在电脑上面创建一个文件夹以后,然后将这个文件夹拖到我们的开发工具HbuilderX里面,这样开发工具就打开了这个项目

HTML到底是什么

HTML的全称叫超文本标记语言(Hyper Text Markup Language),是一种标识性的语言。它包括一系列标签.和HTML命令

graph TD A[HTML]-->B[标签] A-->C[命令]

在很早很早以前,网页还不叫HTML,那个时候网页的后缀名还叫htm。因为好个时候的网页还是使用所见即所得的开发工具来生成的网页,而不是使用代码来编辑出来的网页(没有使用编程语言)

html则是使用了某一种语言(language)去开发出来的网页

通俗一讲htm是通过工具来生成的网页(不是通过代码来写的);而html则是通过代码编写的网页(不是通过工具来生成的)

认识网页基本结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <!-- 这是注释 -->
		<title>第一个网页</title>
	</head>
	<body>
	</body>
</html>

当我们新建完一个网页以后就会看到上面的代码 ,上面的代码是自动生成的,它是一个网页的基本结构,再在我们就通过这个基本结构的代码来认识一下网页

  • <!DOCTYPE html>它是一个命令,这个地方用于声明当前的文档是一个HTML5的文档

    DOC:全称叫document

    TYPE:类型的意思

  • <html></html>这一对标签是网页的根标签,可以把网页当成是一个人

  • <head></head>这一对标可以认为是网页的头部标签

  • <body></body>这一对标签可以认为是网页的身体部分

  • <title></title>网页的标题,也就相当于人的名子

  • <meta charset="utf-8">它是一个附加的信息,其实有很多属性,charset这个属性是用于设置当前网站的字符形式,而utf-8则代表的是中文。如果没有这行代码 ,网页的中文就会出现乱码

  • <!-- -->在网页里,这是HTML语言的注释,它不会显示在页面,是一个代码说明性的东西

通过对上面的代码分析,我们已经得到了网页的基本结构

认识网页的标签

通过上面的结构代码,我们已经知道网页是由HTML标签语言来构成的。我们也发现上面的标签代码有下面的几个特点

  1. 标签大多数都是成双成出现的,还有部分是单个出现的

    那是因为网页当中的标签是分为两种类型的

    graph TD A[标签] --> b(双标签) A-->c(单标签)

    那些的成双成对出现的标签就是双标签,如<html></html<title></title>。还有一些只有开始标签,没有结束标签的它们叫单标签,如<meta>

    双标签

    <开始标签></结束标签>
    

    单标签

    <开始标签 />
    

    现在的单标签后面的斜线/已经可以省略掉了,所以单标签也可以写成如下格式

    <开始标签>
    
  2. 标签可以添加属性。属性是写在开始标签里在的

    属性就是对当前标签的一些描述信息,它的语法格式是属性名="属性值"。如charset="utf-8"

  3. 标签是可以进行嵌套的,在上面的代码里面,我们可以看到<html>嵌套了<head><body>标签,而<head>标签的内部又嵌入了其它标签

    <标签1>
    	<标签2></标签2>
        <标签3>
            <标签4></标签4>
        </标签3>
    </标签1>
    

    标签的嵌套也是成双成对的出现的,不能交叉的嵌套


标题标签

标题标签是网页当中最常见的标签,它一共有6个等级

<h1 align="center">一号标题</h1>
<h2 align="right">二号标题</h2>
<h3 align="left">三号标题</h3>
<h4>四号标题</h4>
<h5>五号标题</h5>
<h6>六号标题</h6>

总结:

  1. 标题标签是从h1~h6,数值越大,字体越小
  2. align属性是用于设置标题在这里的水平排列,它常见的属性值有三个,分别是left/center/right

字体标签

字体标签可以设置网页里面的特殊文字,它采用font标签

<font face="华文行楷" color="red" size="7">那些年的那些事</font> 

image-20200518160843957

总结:

  1. font标签是一个双标签,可以对文字的大小,颜色,以及样式做调整
  2. face属性用于设置字体的样式。在上面我们设置了华文行楷
  3. color属性用于设置字体的颜色。在上面的我们设置了red红色
  4. size属性用于设置字体的大小,它的值在1~7之间,1最小,7最大

段落标签

段落标签在网页里面说明了网页文字的段落

<p align="center">第三个段落</p>
<p align="right">第四个段落</p>

总结:

  1. 每一个段落标签都会重启新的一行,并且段落与段落之间上下会有缝隙
  2. align属性用于设置段落的水平排列,这一点与标题标签相似,也有left/center/right三个属性值

特殊文字样式标签

文字加粗

城南以南不再南,<b>城北以北不再美</b>
<hr>
城中从此不在挤,<strong>心里从此再无你</strong> 

字体加粗可以使用两个标签,分别是<b>标签与<strong>标签

文字倾斜

城东以东不再空,<i>城西以西不再喜</i>
<hr>
床前明月光, <em>疑是地上霜</em>
<hr>
举着望明月,<cite>低头思故乡</cite> 

文字倾斜可以使用3个标签,分别是<i><em><cite>

文字下划线

东边日出西边雨,<u>道是无情却有情</u>
<hr>
春蚕到死丝方尽,<ins>蜡炬成灰泪始干</ins> 

文字下划线可以使用2个标签,分别是<u><ins>

文字删除线

<strike>原价:¥998元</strike> ,现价:98元
<hr>
<del>原价:¥998元</del>,现价:98元

可以使用<strike><del>标签

上标文字与下标文字

我爱<sub>北京</sub>天安门,天安门上<sup>太阳升</sup>
<hr >
x<sup>2</sup>+y<sup>2</sup> =z<sup>2</sup>
<hr>
log<sub>2</sub>10=x

image-20200518164100748

总结:

  1. 上角标使用<sup>
  2. 下角标使用<sub>

image-20200518164939464

特殊文本内容

名称代码
版权标志&copy;
商标标志&reg;
度数标志&deg;
小于符号&lt;
大于符号&gt;
空格符号&nbsp;

列表标签

列表标签有三种类型 ,分别是有序列表(ordered list),无序列表(unordered list)以及自定义列表(data list)

无序列表

无序列表就是unordered list,在标签里面使用ul来表示

<ul type="disc">
    <li>周玮夫</li>
    <li>卢小奥</li>
    <li>李昌盛</li>
</ul>

总结:

  1. 列表里面的每一项使用li来表示,指的是list item
  2. type属性可以设置前面元素列表的符号,它个属性值有三个
    • disc实心圆
    • circle空心圆
    • square实心矩形

有序列表

有序列表就是ordered list,使用ol标签来表示

<ol type="1">
    <li>张珊</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵丽颖</li>
    <li>胡哥</li>
</ol>

总结

type属性也可以设置前面的符号,它的属性值如下

  1. 1则指定以数字为顺序
  2. A以大写字母为顺序
  3. a以小写字母为顺序
  4. I大写的罗马文为顺序
  5. i小写的罗马文为顺序

自定义列表

算定义列表也叫数据列表(data list),在HTML里面使用dl来表示

<!-- data list -->
<dl>
    <!-- datalist title -->
    <dt>男生</dt>
    <dd>胡哥</dd>
    <dd>彭于晏</dd>
    <dd>何润东</dd>
    <dt>女生</dt>
    <dd>赵丽颖</dd>
    <dd>宋轶</dd>
    <dd>彭妈妈</dd>
</dl>

image-20200518173158448

image-20200518173552176


详细内容标签

 <details>
     <summary>这是新标签</summary>
     <p>这是一个段落</p>
     <font>这是一个字体标签</font>
     <h2>这是一个标题标签</h2>
</details>
<hr>
<details>
    <summary>男生</summary>
    <ul>
        <li>胡哥</li>
        <li>春哥</li>
        <li>发哥</li>
    </ul>
</details>
展开前展开后
image-20200519085902935image-20200519085914135

总结:

  1. details标签多半都与summary标签结合在一起使用
  2. details标签下面可以嵌套任何标签,summary标签就是这个details标签的标题

链接标签

链接标签指网页当中的超链接,点击以后可以跳转到新的页面,使用a标签去完成

<!-- _self在当前窗体打开 -->
<a href="http://www.baidu.com" target="_self">百度一下</a>
<hr>
<!-- _blank在新的窗体里面去打开 -->
<a href="http://www.iqiyi.com" target="_blank">爱奇异</a>

总结:

  1. href属性用于设置链接的地址
  2. target属性用于设置网页的打开方式,其实常见的属性值如下
    • _self在当前的窗体打开
    • _blank在新的窗体打开

图片标签

<img src="img/022.jpg" width="200" height="150" alt="这是女生图片" 
    border="10" hspace="50" vspace="100" title="这是提示信息" />

总结

  1. 在网页中插入图片我们使用img标签
  2. src属性用于设置图片的地址
  3. width/height属性用于设置图片的大小
  4. border属性用于设置图片的边框
  5. hspace全称叫horizontal space,指水平的间距
  6. vspace全称叫vertical space,指垂直的间距
  7. title提示信息
  8. alt属性,当图片不能够正常显示的时候,就会显示alt里面的提示文字,如果图片能够正常显示,则不显示alt的内容(它相当于一个备胎属性)

我们现在可以将链接标签与图片标签进行结合,做成一个图片链接

<a href="http://www.baidu.com">
    <img src="img/022.jpg" alt="图片">
</a>

map标签

这一个标签与img图片标签进行结合以后会产生很好的效果

<img src="img/022.jpg" border="10" usemap="#map1" width="500" height="350">
<map id="map1" name="map1">
    <!-- 
    shape形状,rect全称rectangle矩形,coords坐标
    -->
    <area shape="rect" coords="0,0,200,150" href="http://www.baidu.com">
    <!-- 
    circle的坐标是圆心与半径
    -->
    <area shape="circle" coords="300,300,50" href="http://www.iqiyi.com" target="_blank">
    <area shape="poly" coords="250,0,500,350,0,350" href="http://www.youku.com" target="_blank">
</map>

总结

  1. img标签通过usemap属性与map标签进行结合,使用的是map的标签的idname属性

  2. map标签下面有area标签,它指区域

  3. shape属性设置区域的形状,它的形状主要有下面三种

    • rect全称叫rectangle矩形
    • circle圆形
    • poly全称叫polygon多边形
  4. coords属性根据形状设置坐标值

  5. href属性与target属性则和a标签保持一致

iframe标签

iframe全称叫insert frame,它可以向一个网页里面嵌入另一个网页

<iframe src="https://www.baidu.com" width="100%" height="500" frameborder="0"></iframe>

链接标签与iframe标签的第一种结合方式

<a href="https://www.iqiyi.com" target="aaa">爱奇异视频</a>
<a href="http://www.softeem.xin:8090" target="aaa">标哥的博客</a>
<hr>
<iframe name="aaa" src="https://www.baidu.com" width="100%" height="500" frameborder="0"></iframe>

当a标签的target属性设置为iframe标签的name属性的时候,这个链接在打开的时候就会在这个iframe当中去打开

第二种结合方式

这一种结合方式是使用多个页面嵌套以后,iframe里面的页面在外部打开

01.html

<h1>第一个页面</h1>
<iframe src="02.html" frameborder="1" width="100%" height="400" ></iframe>

02.html

<h2>第二个页面,它是子页面</h2>
<a href="http://www.baidu.com" target="_parent">百度一下target=_parent</a>
<iframe src="03.html" frameborder="1" width="100%" height="200"></iframe>

target="_parent"在父级页面打开链接

03.html

<h3>第三个页面,子页面</h3>    
<a href="http://www.iqiyi.com" target="_top">爱奇异</a>

target="_top"在最顶层打开链接

这就是我们的ifrmae标签与a的结合,通过这种结合方式,我们主要是扩展了target属性

  1. _self在当前的窗口过iframe里面打开链接
  2. _blank在新的窗口打开链接
  3. frameName在某一个frame里面去打开链接
  4. _parent在父级的iframe或窗口里面去打开链接
  5. _top在最顶层的窗口里面去打开链接

进度条标签

<progress></progress>
<hr>
<progress max="100" value="70"></progress>

总结

  1. progress在没有设置value属性值的时候,它的进度块会左右滑动
  2. max属性设置最大值,value属性设置当前值

跑马灯

<marquee bgcolor="red" direction="left" width="1200" height="300"
         behavior="scroll" scrollamount="3" scrolldelay="1">
    <font size="7" color="white">众志成城,抗击疫情</font>
</marquee> 

总结

  1. marquee标签是跑马灯效果的标签
  2. bgcolor设置背景颜色
  3. width/height设置宽度与高度
  4. direction设置方法,它的属性值有left/right/up/down
  5. behavior设置行为,有scroll/slide/alternate三种
  6. scrollamount设置每次滚动的大小
  7. scrolldelay设置每次滚动的延时

表格标签

<table border="1" width="400" cellspacing="0" cellpadding="2">
    <caption>
        <h2>登记信息表</h2>
    </caption>
    <colgroup>
        <col width="80" bgcolor="green">
        <col width="220">
        <col width="100">
    </colgroup>
    <thead>
        <!-- table row -->
        <tr bgcolor="pink">
            <!-- table head -->
            <th>姓名</th>
            <th>性别</th>
            <th>爱好</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <!-- table data -->
            <td>张珊</td>
            <td colspan="2">女,17</td>
        </tr>
        <tr>
            <td>李四</td>
            <td rowspan="2">男</td>
            <td>29</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>33</td>
        </tr>
        <tr height="100">
            <td valign="top" align="right">赵六</td>
            <td valign="middle" align="center">女</td>
            <td valign="bottom">14</td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>

总结

  1. 行的标签是tr,全称叫table row
  2. td代表table data表格的数据
  3. th代表表格的头部,全称叫table head
  4. caption标签是表格的标题
  5. thead/tbody/tfoot是表格的结构标签,如果不写,浏览器会自动生成tbody
  6. colgroup列的设置标签
  7. col代表列
  8. border属性设置表格的边框
  9. cellspacing属性用于设置单元格的间距
  10. cellpadding属性设置单元格的内间距
  11. align用于设置水平排列,常见的属性值left/center/right
  12. valign用于垂直排列,常见的属性值有top/middle/bottom
  13. rowspan用于设置行的合并
  14. colspan用于设置列的合并
  15. width/height属性用于设置宽度与高度
0

评论区