0
点赞
收藏
分享

微信扫一扫

跟着老九学前端 第1章 初识HTML

心智的年轮 2022-03-13 阅读 58

一、HTML内容

1.HTML简介

1.1 html是用来描述网页的语言,是一种超文本标记语言。

1.2 html使用元素(标签)来描述网页。

1.3 浏览器是对html编码进行”解释和执行“的工具,也就是说html告诉浏览器怎么显示页面,在任意浏览器中按下“F12”,则该界面会显示html的源码(源文件)。

2.W3C标准

2.1 W3C是万维网联盟的缩写,全名(World Wide Web Consortium)

2.2 W3C是一个制定和维护Web开发标准的组织

3.html的文档结构

<!doctype html>
<html lang = "zh-CN">
	<head>
		<!-- html的头部分,一般用来声明一些信息 -- > 
		<!-- 用来设置当前页面的源码 -->
		<meta charset="UTF-8">
		<title>
			该标签用于设置网页标题
			一个网页只能有一个title标签,如果有多个则取第一个
		</title>
    </head>
    <body>
		<!-- html身体部分,一般用户可以看到的内容全部放在这里 -->
    </body>
</html>

4.html的标签(元素)

4.1 有些元素无论内容多少,都会独占一行,并且不能与其他元素处于同一行,被称为块级元素;有些元素可以与其他元素处于同一行,被称为行级元素。

4.2 没有结束的标签,被称为单标签;有开始有结束的标签成为容器标签、闭合标签。

5.html的块级标签

5.1 标题元素

<!-- h1字号最大,h6字号最小 -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

5.2 段落元素

<!-- p标签里面不嵌套块级标签 -->
<p></p>

5.3 水平线元素

<hr/>

5.4 列表元素

5.4.1 无序列表
<ul>
    <li>推荐|分隔号教课程</li>
    <li>推荐|分隔号教课程</li>
    <li>推荐|分隔号教课程</li>
    <li>推荐|分隔号教课程</li>
</ul>
5.4.2 有序列表
<ol>
    <li>分隔号教课程</li>
    <li>分隔号教课程</li>
    <li>分隔号教课程</li>
</ol>
5.4.3 定义列表
<dl>
    <dt>蔬菜</dt>		<!-- dt表示每个列表项的开始-->
    <dd>西红柿</dd>
    <dd>生菜</dd>
    <dt>水果</dt>
    <dd>草莓</dd>
    <dd>西瓜</dd>
</dl>

以上三种列表呈现效果如下:
在这里插入图片描述

5.5 分区元素(div)

6.html的行级元素

6.1 字体样式元素

<!-- 
	在行级标签里,换行和空格都不起作用,如果需要空格,使用&nbsp;如果需要换行使用<br/> 
	strong、em、i都表示字体样式标签
-->
<strong>加粗的&nbsp;&nbsp;&nbsp;<i>行级</i>标签</strong><br/>
<em>用来将文字进行倾斜</em>
<i>表示倾斜,但是版本比较老化,建议使用em表示倾斜</i>

6.2 换行元素(br)

6.3 图像元素

<!-- 
	src属性表示的是图片路径
	align属性根据周围的文本来排列图像。
		align的三个属性:top、middle、bottom
	alt属性制定图像的特定文本(即当图像链接不对应或者获取不到这个图片的时候,显示出来的文字)
	title属性表示当鼠标悬停在图片上显示提示信息
-->
<img src="images/头像.jpg"  align="middle"  alt="我是孙尚香,刘备的妻子" width="300" title="我是孙尚香,刘备之妻">

6.4 超链接

<!--
	href属性表示的是超链接需要引入的路径
	title属性表示当鼠标悬停在图片上显示提示信息
	target属性制定链接在哪个窗口打开
      _self:点击链接后,在当前页面中显示新页面
      _blank:在新打开的页面中显示链接对应的页面内容
      _parent:在父框架中显示
      _top:不管嵌套几层容器,始终在顶层容器中显示链接页面
      也可以自己进行命名,实现在框架页面中显示指定的链接
-->
<a href="案例五:图像元素.html" title="点我查看孙尚香的照片" target="_parent">
</a>

6.5 分区元素(span)

6.6 注释和特殊符号

举报

相关推荐

0 条评论