HTML基础知识(常见元素、列表、链接元素、图片元素)

必发bifa88

HTML基础知识(常见元素、列表、链接元素、图片元素)

| 0 comments

1、HTML有关概念

全称:%20Hyper%20Text%20Markup%20Language(超文本标记语言)
其文件扩展名为“.html”或“.htm”

    %20*%20超文本%20-%20在普通的文本基础上,添加超链接、图片、音频或视频等

    %20*%20标记%20-%20标记就是HTML中的标签(元素),特点:<a>

*%20语言%20-%20目前目标所能识别的

版本:%20HTML%204.01%20<4.01与4.0不是一个版本>;%20HTML%205;
XHTML:严格版本的HTML

  • Ø%20基本结构:

 

 附:<!doctype%20html>:
申明版本,则浏览器可以预先知道文档类型,从而正确显示网页内容

<meta%20charset=”UTF-8″>%20:%20设置编码格式

meta标签提供了元数据(不显示在页面上,但会被浏览器解析)。

meta元素常用于指定网页的描述、关键词、文件的最后修改时间、作者、和其他元数据。元数据可使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。

eg:为搜索引擎定义关键词、为网页定义内容、为网页定义作者….

<meta%20name=”keywords”%20content=”HTML,%20CSS,%20XML,%20XHTML,%20JavaScript”>

<meta%20name=”description”%20content=”Free%20Web%20tutorials%20on%20HTML%20and
CSS”>

<meta%20name=”author”%20content=”King”>

  • Ø%20元素

空元素%20-%20只有开始标签,没有结束标签;

起始元素%20-%20具有开始标签和结束标签%20—–成对出现

注:%20元素名(大小写均可)-%20W3C预定义,建议使用小写

  • Ø%20属性

作用:定义当前元素的信息 %20          格式:属性名=”属性值”  

(a.属性必须定义在开始标签中  %20b.同一个元素具有多个属性)

i  %20通用属性%20-%20几乎所有的HTML元素都具有的属性

  id:%20表示当前元素的标识(唯一的) %20      name:%20表示当前元素的名称

  style:%20表示定义CSS样式          %20   class:%20表示定义CSS样式

i%20私有属性%20-%20某个元素独有的属性

  • Ø%20注释

作用:解释当前的元素的作用      %20   特点:不会显示在浏览器的页面中

 %20格式:<!–%20注释内容%20–>            %20  快捷键:CTRL%20+%20?

2、HTML常见元素

ü %20标题%20<h1>%20~%20<h6>%20(常用的<h1>%20~
<h3>,尤其是<h1>)

      %20<h1>:用于搜索引擎抓取HTML页面

搜索引擎抓取HTML内容时,优先级:

    %20 <title>元素中的内容%20大于%20<meta%20name=”keywords”
content=””>大于<h1>元素

ü %20段落%20<p></p> %20 

特点:自动换行,行间距比较大

eg:%20 <p>%20</p> %20<p></p>

 %20 或%20 <p>%20</p>

<p>%20</p>

eg:%20<p>%20<br>%20</p> 

 

ü %20<hr>%20-%20水平线%20      

ü %20<br>%20-%20换行     %20[快捷键%20-%20标签名%20+%20TAB]

3、列表

(1)有序列表     %20(2)无序列表     %20  (3)定义列表

    %20 <ol>     %20       <ul>          %20   <dl>     
   -%20表示定义列表

        %20<li></li>    %20    <li></li>       
  <dt></dt>%20  -%20表示列表项(列表的标题)

    %20 </ol> %20           </ul>           
   <dd></dd>%20 -%20表示列表项的描述(列表项)

       %20                               %20     </dl>

 

有序列表%20type属性:规定列表类型1、A、a、l、i;%20start属性:规定起始数字

快捷键:标签:*数量%20+%20TAB;  %20alt+鼠标左键

4、链接元素

  %20格式:<a%20href=”%20″></a>

  %20属性:<a%20href=”当前要跳转到的地址”></a>    %20<a
name=”当前元素的名称”></a>

a链接会自带下划线,若去除下划线,则 %20a{%20text-decoration:%20none;}

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

title:提示文本,也就是鼠标放到链接上显示的文字

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

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

作用:%20实现页面跳转(默认);
实现回到顶部[锚点(#name)]即指向某固定位置;实现发送邮件

eg:%20<a%20name=”top”>这是顶端</a>

   %20<a%20href=”mailto:82328769@qq.com”%20>邮箱地址</a>

   %20<a%20href=”#top”%20>回到顶部</a>     %20<a%20href=”#middle”
>回到中间</a>

²%20相对路径

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

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

 

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

 

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

 

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

 

² %20绝对路径

5、图片元素

<img%20src=”当前引入图片的路径”%20 alt=”%20text文本” %20width=”图片宽度”
 height=”图片高度”%20>

 %20 %20 %20 %20 %20 %20 %20 %20 %20 %20 %20 %20 %20 图片元素的加载原理

 

 

 

 

 

相关文章

发表评论

Required fields are marked *.


网站地图xml地图