HTML基础知识1

HTML (Hyper   text  markup  language)超文本标记语言

 1.1 Html结构标准

< ! doctype html>   声明文档类型

<html>                    根标签

<head>                   头标签

<title></title>        标题标签

</head>

<body>                  主体标签

</body>

</html>

html 与htm是一样的。后缀名不能决定文件格式,只能决定打开文件打开的方式。

学习中使用Sublime编写代码,常用快捷键

Html:xt+tab

Html结构代码

tab

补全标签代码

Ctrl+shift+d

快速复制一行

Ctrl+shiif+k

快速删除一行

Ctrl+鼠标左键单击

集体输入

Ctrl+h

查找替换

Ctrl+f

查找

Ctrl+/

注释

Ctrl+L

快速选择一行

Ctrl+shift+↑(↓)

快速上移(下移)一行

Ctrl+shift+2

新建窗口

 Ctrl+z

撤销

1.2 Html标签分类

单标签   <! Doctype html>

双标签  <html></html>  <head></head>  <title></title>

1.3标签

1.3.1单标签

◆注释标签    ctrl+/

◆换行标签   <br />

◆水平线标签  <hr />

1.3.2双标签

◆<p>文本内容</p>

特点:上下自动生成空白行。<br>换行不会生成空白行。

◆标题标签

h1-h6  取值到h6,h1 在一个页面里只能出现一次

◆文本标签

<font>文本内容</font>

◆文本格式化标签

文本加粗标签   <strong></strong>   <b></b>  工作里尽量使用strong

文本倾斜标签   <em></em>     <i></i>     工作里尽量使用em

删除线标签       <del></del>     <s></s>   工作里尽量使用del

下划线标签       <ins></ins>   <u></u>    工作里尽量ins

◆注意:之所以工作里使用<strong></strong> <em></em> <del></del><ins></ins>  是因为更有语义化。

1.3.3 图片标签

     <img src="1.jpg" alt="林志玲" title="女神" width="100" height="100"/>

     其中:src    图片的来源   必写属性

                 alt    替换文本    图片不显示的时候显示的文字

                 title   提示文本    鼠标放到图片上显示的文字

                 width  图片宽度

                 height  图片高度

1.4路径

1.4.1相对路径:

相对于文件自身出发,就是相对路径。

◆文件和图片(html文档)在同一个目录(文件夹) ,直接写文件名

◆图片(html文档)在文件在下一级目录里。文件夹名称+/+图片(html)名称

◆图片(html)在文件的上一级目录里,..+/+图片(html)名称

◆图片在文件的上一级的其他目录里,../文件夹名称/图片名称

1.4.2绝对路径

  如    F:\BaiduNetdiskDownload\HTML  

1.5 超链接

<a href="xxx.html" title="xxxxx" target="_self">超链接</a>

其中:   href   去往的路径(跳转的页面)必写属性

               title    提示文本   鼠标放到链接上显示的文字

               target=”_self”    默认值    在自身页面打开(关闭自身页面,打开链接页面) 

               target=”_blank”   打开新页面(自身页面不关闭,打开一个新的链接页面)

超链接优化写法:

<base target="_blank">   让所有的超链接都在新窗口打开

1.6 锚链接

可以实现回到某部分操作 

1)先定义一个锚点   <p id="sd">

2)超链接到锚点      <a href="#sd">回到顶部</a>

1.7空链

不知道链接到那个页面的时候,用空链

<a href="#">空链</a>

1.8特殊字符


1.9列表

1.9.1无序列表

<ul>

<li></li>    列表项

<li></li>

<li></li>

</ul>

<ul type=" ">可以更改浏览器中文字如上图你好前面的原点

type=”square”    小方块

type=”disc”       默认的实心圆点,如上图

type=”circle”     空心小圆圈

1.9.2有序列表

<ol>

<li></li>    列表项

<li></li>

<li></li>

</ol>

1.9.3自定义列表

<dl>

  <dt></dt>    小标题

  <dd></dd>   解释标题

<dd></dd>   解释标题

</dl>


2.0音乐标签

<embed src="1.mp3" hidden="true">










评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值