1.HTML全称为超文本标记语言,HTML作用是用于设计网页的布局结构的。
2.我们利用软件vscode来编写HTML文件,文件名的后缀为.html。该软件性能优秀,支持大量插件。
3.HTML需要利用浏览器运行,我们使用谷歌浏览器。
4.HTML的基本结构:<!DOCTYPE>这个是HTML文件的声明,必须放在首行,可以利用!+回车代替。
<html></html>作为根元素,在整个文件中只能存在一个。在根元素中通常有两个子元素<head><body>
<head>标记:通常用于编写css文件和javascrip文件,一般在网页中不可见
<body>标记:通常用于书写网页的可见内容。
一些常见的标签:<p></p>段落标签,可以生成一段话,常见的使用方法:
<p>
yyy真的帅
</p>
标题标签<h1></h1>,可以生成一个大标题,还可以有更多的标题比如:<h2></h2><h3></h3>
h后面的数字越大,该标题的字号就会越小。
<div>标签,属于块级元素,一行中如果有多个块级元素就会自动换行。可以配合css来改变网页的样式。
html中,注释通常使用Ctrl+/来完成,例如结果<!-- --!>
有些特殊字符在html中无法被识别,我们会使用字符实体来对其进行替换,例如:
< 替换为 <;
> 替换为 >;
空格 替换为  ;
& 替换为 &;
需要注意:在使用字符实体时,务必加上分号(;)
head头部
在head中,我们可以添加scrip,css,style等不同的元素,有改变网页内容样式的作用。
最先学习title标签,作用不大,仅仅可以改变网页的标题,初始值为:<title>Document</title>
其次是base标签,主要针对URL,虽然我还不清楚什么意思,但是一个HTML文件中只能出现一个base
meta元素,一样不太懂,它决定的是网页的元数据巴拉巴拉。。。。。。
style元素,可以通过css来完成内部样式表,改变布局样式,有用
link元素,用于引入文件外的外部样式表,有用
scrip文件,主要是JavaScript相关的知识,忘记了。。
nojavascrip, 告诉你浏览器用不了javascrip
<noscript>
Your browser does not support JavaScript!
</noscript>
相当的搞笑 hahahahahahahahaha
HTML中的那些基础标签
第一个是标题标签,就是之前说到的<h1>到<h6>,最多只能有h6,数字越大,字体越小,每一个标题都属于一个块级元素,一行只有一个,相当易于理解。
第二个是段落标签,形如:<p> yyy好帅 </p>
这样就可以形成一个段落,也属于块级元素
第三个是换行标签,十分常用,亲测也十分好用,一般形如:<br>里面的/我感觉不用谢,要不然每次还得切换中英文,很恶心
第四个创建水平线,可以利用<hr>来完成,有点作用,可以在一张网页东西比较多的时候进行分界面的操作
第五个图像标签,开始上难度了,利用<img/>来搞,其中有一个属性src,需要填写相关于图片的路径,相对路径,绝对路径都可以,绝对路径比较简单,可以右键属性去找,相对路径利用./去翻阅文件夹,直到找到你需要的文件为止。还有其他的属性,比如width和height,分别控制这个图片的宽度和长度,一般单位都是像素(px),如果只改变其中某一项指标,这个图片会等比例缩放。
需要注意,这个是放在body里的,而且属于一个单标记
<img src="https://img.tukuppt.com/ad_preview/00/04/15/5c98b99bce3ad.jpg" alt="黑板报" width="500px">
其中的alt是为了给图片一个文字索引,可以不加
相对路径写法:<img src="./img/fcz/1.jpg" alt="黑寡妇">
绝对路径写法:<img src="D:/front/img/fcz/2.jpg" alt="雷神">
如果不加换行符的话,图片是有可能连在同一排的,因为图片不是块级元素,属于行内元素
第六个超链接标签,就是一个可以让你跳转到其他网页链接的标签,在生活中总能遇到,标签写法形如:<a></a>,很明显这是一个双标记,里面的内容可以设置成文字,也可以设置成图片的格式,它的属性有:href:路径(必须写),title:鼠标悬停时所显示的内容(可不写),target:_blank,_self(第一个值说新生成一个网页,第二个说在当前页面直接跳转)
<a href="https://www.runoob.com">点我,跳转到菜鸟教程</a>
属于一个行内元素,分行需要<br>
<a href="https://www.jd.com" title="京东官网" target="_blank">点我,跳转到某东官网</a>
锚点链接,是一种比较高级的超链接,最常见的是逛淘宝有个回到顶部,这属于一种锚点链接,
<a href="#c14">点我跳转到章节14</a>
大体上还是像超链接一样是以a为标签的,其中,href属性的值必须以#开头,其中的值也变为了id值
<h1> 章节1</h1>
<p> 段落的内容</p>
<h1> 章节2</h1>
<p> 段落的内容</p>
<h1> 章节3</h1>
<p> 段落的内容</p>
<h1 id="c4"> 章节4</h1>
<p> 段落的内容</p>
<h1> 章节5</h1>
<p> 段落的内容</p>
<h1> 章节6</h1>
<p> 段落的内容</p>
<h1> 章节7</h1>
<p> 段落的内容</p>
<h1> 章节8</h1>
<p> 段落的内容</p>
<h1> 章节9</h1>
<p> 段落的内容</p>
<h1> 章节10</h1>
<p> 段落的内容</p>
<h1> 章节11</h1>
<p> 段落的内容</p>
<h1> 章节12</h1>
<p> 段落的内容</p>
<h1> 章节13</h1>
<p> 段落的内容</p>
<h1 id="c14"> 章节14</h1>
<p> 段落的内容</p>
这段中明显设置了一个id值,c14,让上面的命令成功识别
<h1> 章节15</h1>
<p> 段落的内容</p>
<h1> 章节16</h1>
<p> 段落的内容</p>
<a href="#">回到顶部</a>
如果想回到顶部,则直接使用#即可
第七个是按钮标签,这个东西一般会出现在登陆页面中,提示你成功还是失败,写在body中,是一个双标记,形如:< button> </button>,
<body>
<button type="button" οnclick="alert('你好!')">点我提示你好</button>
<button type="button" οnclick="alert ('世界')">
<img src="./images/2.jpg" alt="">
</button>
</body>
其中的元素onclick的值就是最终按完按钮显示在网页的结果。
第八个是文本格式化标签,自我感觉没啥大用,其中一些加粗,斜体相对有一点点用吧,到时候可以现查,一般用于各种文本内容,必须常用的h和p
第九个是无序列表,显示的结果没有顺序,只有一个个点
东北三省名称:
<ul>
<li>吉林省</li>
<li>辽宁省</li>
<li>黑龙江省</li>
</ul>
这个标签写在body中,标签名称是<ul> ,其中每一项的表签都是<li>,
第十个是有序列表,和前面不一样的是这个有序号
<ol>
<li>吕布</li>
<li>赵云</li>
<li>典韦</li>
<li>关羽</li>
<li>马超</li>
</ol>
会直观的给出排名,一吕二赵三典韦。。。。。比较简单
列表也可以进行嵌套,需要注意一层层去书写
第十一个是自定义列表:在使用自定义列表时,需要注意dd和dt的使用
<dl>是自定义列表的标签,是一个双标签
<dl>
<dt>长春</dt>
<dd>-- 吉林省的省会城市</dd>
<dt>哈尔滨</dt>
<dd>-- 黑龙江省的省会城市</dd>
</dl>
<dt>作为列表内容,是一个双标签</dt> <dd>用于做列表的解释,dd也是双标签
第十二个是表格,okok终于到表格了,有点小累奥,加油加油
表格的标签是<table>,这其中有四个大标签:
caption标签,主要是写出表格的名称,其实没啥大用
thead标签,作为表头,是整个表格的第一行,其中可以利用小标签<tr>加上<th>来定义每一列的标题,有几列就定义几个th
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
这就是一个四列的表格
tbody标签,作为标题,是整个表格中占比最多的部分,也是利用<tr>加上<td>的方式来定义每一行的内容
<tr align="center">
<td>1</td>
<td>张三</td>
<td>18</td>
<td>女</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>19</td>
<td>男</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>17</td>
<td>男</td>
</tr>
</tbody>
每一行都要单独去定义,每一组td都应该是四个,因为定义了列数为4,列数是固定的,但是行数不固定。
tfoot作为表尾,可以不加,没啥大用
其中,table是具有很多属性的,可以更改不同的属性来改变表格的样式:
border:表格的外边框,数值越小则边框越细,
cellspacing:单元格之间的距离,数值越大则每个单元格之间的缝隙越宽
cellpadding:内容到单元格边框的距离,数字越大则距离越远
align: 赋值为center可以让表格居中
width和height: 设置宽度和高度,单位是px,也可以是百分数,作为屏幕的百分比
还会有两个属性是跨行操作和跨列属性,
跨行:rowspan
跨列:colspan
需要跨几行或几列就赋值为几,需要注意,自己这一行也算在内,我们在跨行之后需要把被跨的行删除
第十三个是表单
表单相当于一个交互工具,有很多小模块,包括输入文本,复选框,单选框等
form元素用于创建表单,写在body里是一个双标签,form表单的属性有action,用于书写提交的路径
method属性,常用的值有get/post,常用于书写提交方式
表单还有非常多的子元素:
fieldset:表单的边框,如果想使用边框的标题,可以使用legend元素来实现
<form action="baidu.com" method="">
<fieldset>
<legend>表单演示</legend>
label:用于设置文字标签,扩大点击域,for属性用于关联某一个input的id值,使用id绑定文本框
input:type的类型为text(默认)
<label for="username">姓名:</label>
<input type="text" id="username" name="myname" value="" ><br>
input:type的类型为password(密码)
<label for="password">密码:</label>
<input type="password" id="password" name="mypasswd">
radio:单选框,name的值必须相同,才能有单选的效果,checked为默认选项
<label for="">性别:</label>
<input type="radio" id="male" name="gender" value=“m”><label for="male">男</label>
<input type="radio" id="female" name="gender" value=“f”><label for="female">女</label>
checkbox:多选框
<label for="">爱好</label>
<input type="checkbox" id="book" name="hobby" value="book"> <label for="book">读书</label>
<input type="checkbox" id="read" name="hobby" value="read" checked> <label for="read">看报</label>
<input type="checkbox" id="write" name="hobby" value="write"> <label for="write">写字</label>
<input type="checkbox" id="draw" name="hobby" value="draw"> <label for="draw">画画</label>
<hr>
上传文件使用
<label for="">文件上传</label>
<input type="file" name="myfile">
<hr>
隐藏信息
<label for="">隐藏信息</label>
<input type="hidden" value="1001">
<hr>
也是type类型的file,hidden
下拉框:select元素,每一个选项用option,默认选项为selected
<label for="">地址</label>
<select name="adress" id="">
<option value="cc">长春</option>
<option value="sp">四平</option>
<option value="sy" seclected>松原</option>
<option value="yj">延吉</option>
</select>
<hr>
自我介绍的文本框:textarea
<label for="id1">自我介绍</label>
<textarea name="myself" id="id1" rows="5" col="50">
</textarea> <hr>
最后提交的操作: <input type="submit" value="提交">
音频文件使用audio标签,是一个双标签,他的一个子标签source可以完成这些内容
<audio controls>
<source src="./resource/audio.mp3"> 相对路径
</audio>
需要放在body内
视频文件使用video标签,也是一个双标签,子标签source实现内容
<video controls>
<source src="./resource/audio.ogg">
</video>
最后的最后还有一个嵌套网页的操作,使用iframe标签,其中可以更改很多属性
<h1>当前网页</h1>
<p>你好,我是最胖的,哈哈哈哈</p>
<iframe src="http://www.baidu.com" frameborder="1" width="500px" height="500px">不支持iframe标签</iframe>
其中src表示网页路径,frameborder代表是否显示边框,1代表显示边框,0代表不显示边框
over!!!!!!