HTML的基础-优快云博客

博客介绍前端开发，即利用HTML、CSS、JS技术将效果图生成网页，涵盖Web端和手机端。阐述了HTML、CSS、JS的作用，介绍了常见浏览器，还提及标签分类、路径问题、超链接、特殊字符写法、列表等前端基础内容。

所谓的前端，就是将效果图生成网页，利用HTML+css+js 技术。

有Web端和手机端

HTML 是结构的标准网页的主题结构

css 是表现的标准对网页的内容进行美化

JS 是行为标准让页面更加灵动，与用户交互。

浏览器是一个上网的客户端，也是解析我们HTML文档所需要的一个软件，现在浏览器基本有 IE 火狐谷歌猎豹 Safari Opera 浏览器

其中

 IE            是         tyident  的渲染内核
 谷歌/opera    是         blink    的渲染内核 
 火狐          是         gecko    的渲染内核 
 Safari        是         webkit   的渲染内核
渲染引擎的不同是网页兼容性问题出现的根本原因！
HTML  (Hyper text markup language) 超文本标记语言。

结构的标准 
<!doctype html>          声明文档的类型
<html>                   根标签
<head>                   头部标签 
<tiele></tiele>          标题标签
</head>                  
<body> 
                          主体标签
</body>

</html>

标签分为
单标签 <!doctype html>  <hr>  <br>  等
双标签<head></head>   <tiele></tiele>   <body></body> 等
复制代码

标签的分类关系有包含和并列。标签注释标签 ctrl+/

换行标签 <br/>

水平线标签<hr/>

段落标签<p></p>  上下自动生成空白行。<br/>换行不会生成空白行。

h1-h6 (标题标签)
<h1></h1> 在一个页面中只能出现一次。
文本标签 
<font> 文本内容 </font>
文本格式化标签 
<strong></strong> 文本内容加粗
<em></em>         文本倾斜
<del> </del>      删除线
<ins> </ins>      下划线标签 
文本修饰的标签只作了解即可 ，工作中使用CSS对内容进行修饰。
图片标签
<img src="" alt="" title="" width="" height=""/>
src    图片的来源   必写属性
alt    替换文本     图片不显示的时候显示的文字
title  提示文本     鼠标放到图片上时候显示的文字
width  图片宽度
height 图片高度
 图片没有定义宽高的时候，图片按照百分之百比例显示 ，如果只改变图片的高度或者是宽度，则图片等比例缩放。
复制代码

路径问题

分为相对路径和绝对路径工作中常使用相对路径

绝对路径是指文件在电脑上的绝对位置，从盘符出发。

相对路径是指，文件或者图片相对于HTML文档的位置路径

如果与HTML文档在同一文件夹下则直接书写该文件或者图片名称

如在html文档的上一个文件夹中则用../跳到上一个文件再输入文件或者图片的名称

如在HTML文档的下一级文件夹中则输入该文件夹的名称/文件或者图片名称

超链接

   <a href="" title="" target=""></a>
    href       去往的路径（跳转的页面） 必写属性。
    title      提示文本  鼠标放在链接上显示的文字。
    target="_self"   默认值 在自身页面打开新的页面。
    target="_blank"  在空白的页面打开新的页面。
复制代码

锚链接

先定义一个锚点

 <p id="md">
 <a href="#md">文本或者图片</a>    超链接到锚点
复制代码

空链

 <a href="#"></a>       不知道连接到哪个页面的时候用空链。
复制代码

超链接的优化写法

 <base target="_blank" 让所有超链接在新的窗口打开。
复制代码

特殊字符的写法

http://www.w3school.com.cn/tags/html_ref_symbols.html
复制代码

列表

无序列表

 <ul type="circle">  type="square" 小方块 "disc"实心小圆圈"circle"空心小圆圈
 <li></li>       列表项
 <li></li>
 </ul>
复制代码

有序列表

 <ol type="1.a.A.等" start="1"> type 有序列表前的符号start开始的符号是第几个
 <li></li>
 <li></li>
 </ol>
复制代码

自定义列表

 <dl>
 <dt><dt>         小标题
 <dd><dd>         解释标题
 </dl>
复制代码

音乐标签

 <embed src=""  hidden="true">     true 真隐藏
复制代码

页面自动滚动效果

   <marquee>.....</marquee>
   中间内容可以是 文字 图片 也可以是由程序生成的文字或者图片
   属性词  height 设置高度 width 设置宽度  bgcolor 设置背景颜色
   behavior 设置滚动方式   
   alternate 表示在两端之间来回滚动
   scroll    表示由一端到另一端 会重复。
   slide     表示由一端到另外一端不会重复。
   direction 设置滚动的方向
   down  left  right up
   loop  设置滚动次数  -1 一直滚下去。复制代码