首次学习HTML。
明白 HTML的基本概念、语法、常见的标签,属性...
基础知识
什么是HTML?(超文本标记语言)
1. 超文本:页面内包含的内容不仅仅是文本
还可以包含图片、链接、音乐、视频等非文字元素。
2. 标记语言:不是编程语言
<div>div</div>
<p></p>
3. 后缀名 .html
什么是HTML5?
HTML5(H5)是HTML的下一代标准
HTML5产生于2008年正式发布
HTML5于2012年,基本形成了比较稳定的版本
HTML开发需要的环境:
vi、vim、记事本,最最常用的是VS Code
常用浏览器:Chrome\Firefox 有比较强大的代码调试工具
作用:1. 用于读取html文件,并将其作为网页显示
2. 用于调试代码,F12还可以查看浏览器网页的代码
接下来首次HTML语言的学习:
打开VS Code,新建文件,文件名.html,英文状态下输入! ,然后Entre,就新建好一个HTML文件
<!DOCTYPE html>:html的文档类型
<html> </html>:HTML的根元素 用来包含HTML文档的所有元素
<hade> </hade> :包含在hade里的内容,不会显示在网页上,这里面通常放的一些配置信息,包含编码,作者,页面描述还有 js、css的导入
编码方式:title
<body> </body> :是HTML文档的内容区
HTML元素/标签:
HTML标签 :一般成对出现,大小写不敏感,最好小写!
开始标签<div> 结束标签</div>
HTML标签 部分 可以嵌套使用
HTML元素:
块级元素:独占一行空间、用来布局段落、列表、导航菜单...
行内元素:与其他行内元素共享一行空间、一般就是作为段落的一部分
空元素(单标签): 没有内容的元素 建议加关闭符 <br/>换行 <hr/>+横线
替代(替换)元素:把文件引入文档,并且用自身的位置来替换 img video audio
标题 :<h1>-<h6> 可以结合 <hr/> 使用
<h1>This is a heading</h1>
<h2>This is a heading</h2>...
段落: <p> 结束标签</p> 可以结合 <br/> 使用,换行
链接: <a> 链接 </a>
<a href="http://www.w3school.com.cn">This is a link</a>
在 href 属性中指定链接的地址
图像: <img> 属性: 名称 尺寸...
HTML属性:
元素的属性一般在开始标签里
属性由键值对组成
<div id="mydiv"
class="mydivclass" ></div>
核心属性:
id: 唯一标识
class:表示当前元素是某一类的元素 类
style:规定元素的行内样式
title:描述元素的信息(鼠标光标悬浮时显示)
HTML语法:
1.在html文档中不论多少个空格都会解析成一个
2.一些实体:
1. 空格
2. < <
3. > >
4. " "
5. ' '
6. & &
3.注释: <!-- XXXXX --> (一定要多写注释,方便自己之后查看当时的状态)
文本样式:(之后一般用css写)
strong (粗体)、u (下划线)、sub (下标)、sup(上标)、i (斜体.em)...
列表:有序列表、无序列表、自定义列表..
有序列表:ol > li
序号默认从1开始 可用通过 start属性改变起始值 (ol start="3")
reversed (单值属性) 规定列表顺序为降序
type="1" 默认 1 还有 A a I i 四种值
如:
<ol type="I">
<li> 第一条 </li>
<li> 第二条 </li>
<li> 第三条 </li>
</ol>
<ol start="4">
<li> 第4条 </li>
<li> 第5条 </li>
<li> 第6条 </li>
</ol>
无序列表:ul > li '标题是圆形符号,没有顺序'
如:
<ul>
<li> 第一条 </li>
<li> 第二条 </li>
<li> 第三条 </li>
</ul>
自定义列表:dl > dt 、dd
如:
<dl>
<dt> 标题 </dt>
<dd> 1 </dd>
<dd> 2 </dd>
<dd> 3 </dd>
</dl>
在HTML中添加超链接:<a> 链接 </a>
如:<a href="https://www.baidu.com/"> 百度一下 </a>
<a href="https://www.baidu.com/" target="_blank"></a> 跳转网页到新窗口
target:_self/_blank
绑定目标与元素的id值 实现锚点跳转
属性:href:跳转的目的地,可以在一个网页内上下跳转,网页内链接跳转:记得加 #
如:<h1 id="header">目录</h1>
<a href="#header">返回顶部</a>
图片 :<img src="" alt="">
src:图片的地址(必须填)
alt:图片地址出错时,会显示alt的内容