一、新建html文件
在一个自己创建的文件夹下创建一个html文件,并输入以下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个Web页</h1>
<p>当前有点丑:)</p>
</body>
</html>
结果如下图所示
二、剖析HTML文件
对于我们前面创建的 HTML 文档,分析如下:
1.: 声明文档类型。出于历史原因需要,现在可有可无。
2.: 元素。这个元素包裹了整个完整的页面,是一个根元素,其它元素都嵌套到其中。
3.: 元素。 这个元素是一个容器,它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述,CSS样式,字符集声明等等。
4.: 这个元素设置文档使用utf-8字符集编码,utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它,并且它能在以后避免很多其他问题。
5.: 指定页面的图标,出现在浏览器标签上。(试一试:你可随意下载一个.ico图标文件到工作目录中)
6.
7.: 元素。 包含你能在页面看到的所有内容,包括文本,图片,音频,游戏等等。
三、空元素
一般来说,元素都拥有开始标签,内容,结束标签。但有一些元素只有一个开始标签,通常用来在此元素所在位置插入/嵌入一些东西,如
,
, , , 等等。我们称其为空元素,如下代码:
<!-- 换行 -->
<p>我可以<br>换行</p>
<!-- 水平分割线 -->
<hr>
<!-- 输入框 -->
<input>
可以看到下面的结果
四、元素的属性
元素是可以有相关属性的。属性包含元素的额外信息,这些信息不会在浏览器中显示出来。
一个属性必须包含如下内容:
一个空格,在属性和元素名称之间。(如果已经有一个或多个属性,就1.与前一个属性之间有一个空格。)
2.属性名称,后面跟着一个 = 号。
3.一个属性值,由一对引号 “” 引起来。
输入以下代码进行调试
<!-- 带属性的段落输入框 -->
<p title="title属性">鼠标移上来试试!</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">
HTML 提供了从大到小6级标题,分别是:
~
代码如下
<h1>大漠孤烟直</h1>
<hr>
<p>长河落日圆</p>
<hr>
<h2>欲穷千里目</h2>
<hr>
<p>更上一层楼</p>
<hr>
我们需要知道的文本格式标签如下
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
结果如下
五、超链接语法
1.href即为要跳转去的地址 URL(Uniform Resorce Locator)
2.target属性为_blank表示在新的页面打开超链接(默认是在当前页面打开即_self)
3.超链接标签包含的内容(当前为文字"百度一下")即为显示在页面上供用户点击的
代码如下
<a href="https://www.cqjtu.edu.cn/" target="_blank">重庆交通大学官网</a>
六、锚点
锚点,也称为书签,用于标记页面的某个元素或位置。通过锚点,我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点,然后再使用超链接指向该锚点即可。
输入以下代码
<!-- 文档其余部分 -->
<h2 id="ABS">第五回<hr>棒打白骨精</h2>
<!-- 文档其余部分 -->
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<a href="#ABS">跳到第四章</a>
<!-- 文档其余部分 -->
结果如下
七、图片
1.src属性为要显示图片文件的位置 URL,即图片文件的路径
2.alt属性当获取图片出现问题时显示的文字(占位符)
3.可为图片指定高宽度,但不建议(可能导致图片变形)
提示: 对于小尺寸的图片,现在可采用 base64 编码进行,可提高页面加载速度,提升用户体验。可前往一试。
输入以下代码试一下
<img src="http://5b0988e595225.cdn.sohucs.com/images/20171013/fec49f59b98041a4a16886893447f746.jpeg" alt="小图片" width="500" height="500">
结果如下:
八、文件路径
上述将图片的链接地址显示出来个方法为绝对路径,下面来说一下相对路径,将图片放到文件的目录中,这种方法相对不太方便,别人很可能看不到你的图片。
<img src="0040039504628208_b.jpg">
结果如下
或者写为
<img src="./images/0040039504628208_b.jpg">
结果相同
九、无序,有序列表
1.无序列表使用
-
标签,默认使用实心圆点作为每项的标志,其它的标志可以是空心圆circle,实心方块square以及不出现标志。
2.有序列表使用-
标签,默认使用数字作为每项的标志,其它的标志可以是大写字母A,小写字母a,罗马字母i等。
结果如下
-
标签,默认使用数字作为每项的标志,其它的标志可以是大写字母A,小写字母a,罗马字母i等。
<ul type="aquare">
<li>jidan</li>
<li>putao</li>
<li>juzi</li>
</ul>
<ol type="A">
<li>dxsxzc</li>
<li>dsfvd</li>
<li>dzxcvcx</li>
</ol>
当网站需要获取我们的一些信息如:用户名、密码、选择买什么、买多少、提出意见等等时,我们就需要使用表单(form)来让用户填写或选择。
代码如下:
<form>
<!-- 文本框,注意有 placeholder 提示符 -->
用户名:<br>
<input type="text" name="name" placeholder="请输入用户名"><br>
<!-- 密码框 -->
密码:<br>
<input type="password" name="ps" placeholder="请输入密码"><br>
年龄:<br>
<!-- 数字输入框,注意 min 和 value 属性-->
<input type="number" name="age" min="18" value="18"><br>
<!-- 单选按钮, 注意 checked 属性 -->
性别:<br>
<input type="radio" name="gender" value="male" checked> 男<br>
<input type="radio" name="gender" value="female"> 女<br>
<input type="radio" name="gender" value="other"> 其它<br>
<!-- 下拉列表,注意 selected 属性 -->
党派:<br>
<select name="party">
<option value="D">民主党</option>
<option value="R" selected>共和党</option>
<option value="N">无党派</option>
</select><br>
<!-- 多选框 -->
您有哪些交通工具:<br>
<input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
<input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
<input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
<input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
<!-- 日期选择器 -->
您的工作日期:<br>
<input type="date"><br>
<!-- 文件选择器 -->
上传您的照片:<br>
<input type="file" name="photo"><br>
<!-- 文本输入区域,注意 rows 和 cols 属性 -->
您的建议:<br>
<textarea name="message" rows="5" cols="30">
The cat was playing in the garden.
</textarea><br><hr>
<!-- 表单提交/重置按钮,将表单中的数据取消或传输给服务器端进行处理 -->
<input type="submit" value="提 交">
<input type="reset" value="重 置">
</form>
运行结果如下:
十、区块元素
区块元素在浏览器显示时,通常会以新行来开始(和结束)。
<h2>dshghgchbgcusdhjuhgb</h2>
<div>sduhyhdfchshju</div>
<div>sdhyudshchjdhj</div>
<p>dscukhjjhdsj</p>
运行结果如下
内联元素:内联元素相反,他们总是一个接一个进行显示,不会新起一行。
<h3>第三季度</h3>
<span>年龄:</span>
<input name="username">
<span>嘻嘻嘻</span>
<a href="https://baidu.com/">百度</a>
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg">
十一、预设格式
pre标签
<pre>
1.爱情的电影,散不散都没了关系,一人安静,一人哭泣。《散场电影》
2.暴雨天,照逛街,偷笑别人花了脸。如果再看你一眼,是否还会有感觉,当年的素面朝天《素颜》
3.不是穿上情侣装就可以装情侣,不是小心翼翼就能重演这场电影。《情侣装》
4.窗外夜风裹走时间,后退的景谁在流连。《梧桐灯》
5.弹指一挥间 红尘已渺远 沧海成桑田 真情永不变《弹指一挥间》
6.当我发现醒来其实是另一个梦,梦的出口散不开的浓雾太沉重,就算当初声嘶力竭作苦苦的求你留下别走,也没用。《灰色头像》
7.断桥是否下过雪,又想起你的脸,若是无缘再见,白堤柳帘垂泪好几遍。《断桥残雪》
8.多想给我一副威尼斯假面,华丽的忧伤我要赤脚踏过远方的冰霜,任凭风雪如何阻挡至少还有面具上坚挺的鼻梁。《威尼斯假面》
9.关外野店,客未眠,寒风间,谁来为我添两件,只可惜瘦马不得好歇。《千百度》
10.孩子说如果爱 就请深深爱。可很多事是不由人的。你说这次再见,或许再也不会见!去老地方吧再见一面。《不煽情》
11.寒梅落尽把冬了 衔春的燕想归巢 沿途的景牵挂的人 两情迢迢《燕归巢》
12.和你相知多年,我确信对你的了解。《内线》
13.江南月色下的小桥屋檐,读不懂塞北的荒野梅开时节因寂寞而缠绵,春归后又很快湮灭《断桥残雪》</pre>
结果如下:
十二、特殊字符
在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体
例如 ,就表示为空格
代码如下:
<p>有多 远,滚 多远!</p>
<hr>
<h2>test.html</h2>
<pre>
<h1>鹅鹅鹅</h1>
<p>曲项向天歌<p>
<a href="https://www.baidu.com/">红掌拨清波</a>
运行;