html详细笔记及练习的几个例子
基本是一边是代码一边把html用我自己的理解解释了一下,如有不对请指正
大家复制到自己的编译软件里打开看更方便,有的图片和链接的路径需要用自己的
在代码段的中后部用纯html代码粗略模拟了一个百度的验证码表单,写着练手的
<!DOCTYPE html>
<!-- 警示信息,注意的意思,<!DOCTYPE html>是说document type文档的类型是html -->
<!--html超文本标记语言-->
<!-- 单标签meta, -->
<!-- <xxx>双标签的起始标签 </xxx>双标签中的结束标签 -->
<!--<html lang="en">是整个网页的根标签,这个lang=en的意思是当前语言为英文 -->
<html lang="en">
<head>
<!--head是头部标签,-->
<meta charset="UTF-8">
<!--设置字符编码,utf-8是文档编码的类型的一种,一般都是utf-8-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document网页的标题</title>
<!--title网页的标题-->
</head>
<body>
<!--身体,可视区域,打大部分代码的地方-->
<!--h1-h6是标题标签,1到6不同大小,效果是让被hn包裹的文字放大加粗-->
<h1>h1在此1</h1>
<H2>h2在此22</H2>
<H3>h3在此333</H3>
<P>自然段换行效果</P>
<P>p用来标识段落,
里面不识别换行空格,多个空格默认只识别成一个<br> 但可以用br标签换行 </P>
<hr color="red" size="40">
<!-- hr是一条分割线 此处为了方便展示写入了属性 颜色和尺寸 -->
<!--标签的属性是书写在起始标签内部的,标签的属性如果有多个,属性中间需要有空格-->
<!--web标准,要求html,css,js自己干自己的事,html只负责搭建骨架,css只负责页面的美化,js负责用户的交互-->
<!--div可称为盒子,整个界面可以放无数个div,但默认每行只能存在一个div(大盒子),
其他元素会另起一行显示,div是一个块级元素,他可以嵌套,默认和浏览器一起变化大小-->
<p>
<div>
盒子1
<div>
盒子1里的盒子2
</div>
</div>
外面的<div>盒子3</div>
</p>
<p>
<!--span默认和文字内容一样大,在一行内显示(span是行内元素),也可以嵌套,
(不推荐嵌套块级元素)-->
<span>
span1
</span>
<span>
span2<br>
<span>
span2里的 span3 多个空格默认只识别成一个
</span>
</span>
</p>
<p>
<!--格式化标签,可以让文本有一些特殊的格式,如b加粗,i斜体,s删除线,u下划线-->
<!--上面的bisu尽量少用,strong加粗,em倾斜,del删除线,ins下划线,
这四个是常用的语义化词,可以方便代码阅读,推荐使用-->
<b>jojo今天不做人啦!!!</b>
<br>
<i>jojo今天不做人啦!!!</i>
<br>
<s>jojo今天不做人啦!!!</s>
<br>
<u>jojo今天不做人啦!!!</u>
<br>
</p>
<p>
<!-- 在此是碰到了一些问题,在网络查到了问题解决办法
但一般来说绝对路径用的地方很少,这个问题推荐有了其他部分的学习再回来看 -->
<!-- CSDN博主「silence_xj」给出了问题的答案
原文链接:https://blog.csdn.net/silence_xj/article/details/115713725 -->
<!-- 绝对路径:是指目录下的绝对位置,直接到达的目标位置,通常是从盘符开始的路径。
如果使用这个绝对路径时,发现谷歌浏览器或其他的浏览器都不能加载图片(图片在路径中是真实存在的),
而在使用相对路径时,图片可以正常的加载出来,
并且从计算机你放的盘,进入这个绝对路径打开html文件时,图片可以正常加载
在webstorm中,它帮你虚拟了一个服务器(可以认为在此虚拟服务器外的文件相当于在另一个电脑里),
因此你点击webstorm右上角的浏览器图标打开网页时,网页路径是localhost:****而你的图片也显示不出来;
你可以摁住Shift再点击右上浏览器图标使用本地打开的方式,
此时打开的网页路径是file:///****,这时候你的图片应该就能显示出来了。-->
<!--img是图像标签,src是一个属性,代表图片的路径,路径有两种,分为绝对路径和相对路径,
alt属性是图片不能显示的时候,替换成的一个文本,如该图无法显示-->
<!--相对路径还有./和../代表上个层级和上上个层级-->
<img src="F:/webstudy/buka/html学习/百度表单效果/logo_baidu.jpg" alt="图片走丢了">
<!--上面为绝对路径,电脑里的精准位置-->
<br>
<img src="temp_20211104021423648.ico" alt="该图无法显示">
<!--上面为相对路径,基于自身位置,在同一层内,基本就是同一文件夹里的意思-->
<br>
<img src="./temp_20211104021423648.ico" alt="这图没了">
<br>
<img src="./错误路径.ico" alt="这图没了">
<br>
<!--title属性是鼠标放上去显示的信息-->
<img src="temp_20211104021423648.ico" alt="该图无法显示" title="bilibili">
<br>
<!--width是宽像素值,height是高像素值,单位是px -->
<img src="temp_20211104021423648.ico" alt="该图无法显示" width="100" height="200">
</p>
<p>
<!--超链接:访问另外一个地址 a是双标签 href是地址, -->
<a href="https://www.baidu.com/">去百度</a>
<br>
<!--打开一个新界面,target标签=blank时-->