HTML 基础
2019-08-14 10:00:29来源:博客园 阅读 ()
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表示完全不透明(最清晰)。
当页面中有特殊字符时,要使用字符实体代替。常用的字符实体:
显示结果 |
描述 |
字符实体 |
---|---|---|
空格 | | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
" | 英文双引 | " |
' | 英文单引 | ' |
¥ | 人民币/日元 | ¥ |
© | 版权 | © |
® | 注册商标 | ® |
× | 乘号 | × |
÷ | 除号 | ÷ |
说明
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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash