HTML 基础

2019-08-14 10:00:29来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

 

html文档基本格式:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>


</body>
</html>

 

 

html注释: 

<!--注释-->

 

 

常用标签:

<h1></h1>  <!--h系列标签,标题-->
<p></p>  <!--段落-->
<hr />    <!--水平分隔线-->

    
<sup></sup>     <!--上标-->
<sub></sub>     <!--下标-->

    
<del></del>  <!--删除线-->
<ins></ins>  <!--下划线-->
    
    

<em></em>   <!--强调(斜体)-->
<i></i>  <!--斜体-->

    
<b></b>  <!--粗体-->
<strong></strong>  <!--重要的文本(粗体)-->

 
<code></code>  <!--代码-->
<pre></pre>  <!--预格式化文本-->
<small></small> <!--更小的字号-->
    

<q></q>   <!--短引用,自动给文本加双引号-->
<blockquote></blockquote>  <!--块引用,左右自动缩进,上下自动加外边距-->
    

<abbr title=""></abbr>  <!--缩写,title指定全称-->
<address></address>  <!--联系信息,不仅仅指地址,还可以是email、tel等。斜体显示-->
<cite></cite>  <!--定义作品名称(比如书籍、歌曲、电影、电视节目、绘画、雕塑等的名称),斜体显示-->
    

 

 

 

超链接:

<!--target指定打开方式,_self是在当前标签页中打开,_blank是在新标签页中打开-->
<a href="http://www.baidu.com" target="_blank">百度</a>

 

 

使用<a>链接跳转到页面的指定部分:

<a href="#part2">查看part2</a>  
<!--
在当前页面中,可直接使用#id调转到当前页面的指定位置
也可使用 xxx.html#id 跳转到指定页面的指定位置
-->

<h2>part1</h2>
<p style="height: 1000px"></p>

<h2 id="part2">part2</h2>  <!--给目标位置加id,必须是id,name无效-->
<p style="height: 1000px"></p>

 

 

 

图片:

<!--无法显示图片时,就显示alt指定的说明文字-->
<img src="image/1.jpg" alt="荷花" width="200" height="100" />

 

 

列表:

<ul>  <!--无序列表-->
    <li></li>
    <li></li>
</ul>

    
<ol>   <!--有序列表-->
    <li></li>
    <li></li>
</ol>

 

 

表格:

<table>
  <caption></caption>   <!--表格标题,表格上方居中显示-->
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

 

 

 

布局标签:

<div>  <!--块级-->
    <span></span>    <!--行内-->
</div>

 

<nav></nav>  <!--导航部分-->
    
<article></article>  <!--文章-->
<section></section>  <!--小节、一节内容-->
    
<header></header>  <!--文档或文章的页眉-->
<footer></footer>  <!--文档或文章的底部-->
    
<address></address>  <!--文档或文章作者的联系信息-->
    
<aside></aside>  <!--侧边栏-->

这几个标签都是语义标签,和<div>的效果完全相同,需要自己写css样式来实现对应的效果。均为块级元素,可以内嵌其他标签。

 

 

 

内联框架:

<!--iframe可以在网页中内嵌另一个网页,src指定另一个页面的url,width、height指定框架尺寸-->
<iframe src="demo.html" width="60000" height="500"> 
    您的浏览器不支持  iframe 标签
</iframe>

 

 

 

独立的内容:

<figure> <!--figure可以表示独立的内容(图像、图表、照片、代码等等)-->
<img src="image/1.jpg" alt="荷花">
<figcaption>荷花是......</figcaption> <!--figcaption会显示在图片下方,与图片构成一个整体-->
</figure>

 

 

<fieldset> <!--fieldset可以给内容加上边框(包裹起来)-->
    <p></p>    
</fieldset>

 

<fieldset> 
    <caption></caption> <!--caption可以在边框中的左上角部分加一个标题-->
    <p></p>    
</fieldset>

 

<fieldset> 
    <caption></caption> 
    <form></form>  <常见的用法是配合表单使用,给表单加一个边框、标题-->
</fieldset>

 

 

 

使用浏览器插件来加载资源:

<object data="image/1.jpg"></object>  <!--显示图片--> 
<object data="1.mp3"></object>  <!--播放音频-->
<object data="1.mp4"></object>  <!--播放视频-->
<embed src="image/1.jpg" />  <!--显示图片--> 
<embed src="1.mp3" />  <!--播放音频-->
<embed src="1.mp4" />  <!--播放视频-->

<object>、<embed>作用相同,只不过设置资源的属性名不同。

<object>、<embed>相当于一个容器,用来盛放资源,资源可以是图片、动画、音频、视频、java小程序等,浏览器会使用自带的插件来加载、运行资源。

<object>、<embed>可以设置width、height,如果不设置,则默认为资源的宽、高。

 

 

 

音频、视频:

<audio src="1.mp3" controls="controls" />  <!--音频-->   
<video src="1.mp4" controls="controls" />  <!--视频-->

<audio>、<video>的常用属性:

  • src   设置播放源
  • controls="controls"   是否显示播放控件(暂停/播放按钮、进度条、音量调节),若不设置此属性,则不显示播放控件
  • autoplay="autoplay"   音频文件加载完成后自动播放
  • muted="muted"   禁音
  • loop="loop"   z循环播放
  • preload="auto|none"   网页加载完成后,自否自动加载音频文件(只是从网络获取音频文件,并不是自动播放)。auto是自动加载,none是不自动加载。
  • width、height  设置播放器的宽、高

在html中,如果是属性值和属性名相同,可以缺省属性值,比如controls="controls" 可以简写为controls。

 

不支持<audio>、<video>标签的浏览器:

<audio src="1.mp3" controls>您的浏览器不支持audio标签。</audio>
<video src="1.mp4" controls>您的浏览器不支持video标签。</video>

 

可以在子元素<source>中设置播放源:

<video width="320" height="240" controls>
      <source src="1.mp4" type="video/mp4">
      <source src="1.ogg" type="video/ogg">
    您的浏览器不支持Video标签。
</video>

 

不支持音频|视频文件格式:

<video width="320" height="240" controls>
      <source src="1.mp4" type="video/mp4"> <!--先尝试播放mp4格式-->
      <source src="1.ogg" type="video/ogg">  <!--如果不支持mp4格式,再尝试播放ogg格式-->
      <embed width="320" height="240" src="1.mp3">  <!--如果前2种都不行,就尝试使用浏览器的插件来加载-->
</video>

 

 

 

 

颜色值的3种表示方式:

  • 英文单词,red
  • 十六进制,#FF0000,前2位表示r(red),中间2位表示g(green),后2位表示b(blue)。0表示颜色最浅,F颜色最深。
  • rgb,rgb(255,0,0),数值依次表示r、g、b,取值范围[0,255],0表示颜色最浅,255表示颜色最深。

rgba是rgb的扩充,a即alpha(透明度),rgba(255, 0, 0, 0.5),透明度的取值范围是[0,1]上的小数,0表示完全透明(不可见),1表示完全不透明(最清晰)。

 

 

当页面中有特殊字符时,要使用字符实体代替。常用的字符实体:

显示结果

描述

字符实体

  空格 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
" 英文双引 &quot;
' 英文单引 &apos;
     
¥ 人民币/日元 &yen;
© 版权 &copy;
® 注册商标 &reg;
     
× 乘号 &times;
÷ 除号 &divide;

 

 

 

说明

html的标签名、属性名不区分大小写,但建议都使用小写。

html尽量只用来布局,样式用css来控制。

能使用css样式代替的标签、属性,尽量使用css样式代替。

 

 

html的发展史:

  • html发展到4时,html代码没有统一的规范,写得比较混乱。你这样写<h1></h1>,我这样写<h1  />,她这样写<H1>,他连<html>、<head>、<body>这些标签都没有,反正效果都一样。后期十分不好修改、维护。
  • w3c看不下去了,制定了html的规范:xhtml,xhtml要求十分严格。必须这样写<h1></h1>,其他的都不得行。
  • 一下子变得这么严格,大家适应不了,于是w3c折中推出了html5,html5代码规范比html4要严格,但比xhtml要宽松很多。

 


原文链接:https://www.cnblogs.com/chy18883701161/p/11320698.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:manifest.json 解析--手机web app开发笔记(三-1)

下一篇:CSS 基础样式