总结过去几天所学过的所有HTML知识点

换行符<br/>

段落<p>

<p>标签有一个align属性,其中有left(左对齐),right(右对齐),center(居中)值。

<p align="left">这是一个左对齐的段落</p>

标题

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

文本格式化

<b>定义粗体文本</b>
<i> 定义斜体文本 </i>
<del>定义删除文本</del>
<sup>定义上标字</sup>
<sub>定义下标字</sub>

链接

<a href="URL">  </a>

href 定义链接地址、 title 链接提示信息、 target 链接打开方式(_blank 新的空白页,_self 当前页,_top)

<a href="http://www.baidu.com" title=" 链接提示信息" target="blank" >这是一个链接到百度的链接,并打开新的窗口</a>

<a>标签的其他应用: <a href="mailto:邮箱地址">邮件链接</a>

<a href="tel:电话号码">一键拨打</a>

<a href="sms:13181818181">一键发送短信</a>

锚点

锚点标签用于使用户"跳"到文档的某个部分。

<a href="#位置名">  </a>

<a name="位置名">  </a>

<a href="#me"> 我是锚点 </a>
文字文字
文字文字
文字文字
...
<a name="me"> 点击我,我就跳到"我是锚点"</a>

图像

<img src="图像的路径" width="100" height="100" alt="替代文字" /> // alt 很重要,必填   当图片还没加载好时,alt可以起到一个提示作用

图片相对地址的定义

./              当前目录

../             回到上一层目录

images/         进入一层目录

../images/         回到上一层目录,然后再进入images目录

  

图像热区  

<img src="URL" usemap="# map 名称" />

  <map name="map 名称">

     <area shape="形状" coords="坐标值" href="URL" />

  </map>

      圆形:shape="circle",coords="x,y,z"

          x,y为圆心坐标(x,y)z为圆的半径

      多边形:shape="poly",coords="x1,y1,x2,y2,x3,y3,..."

      矩形:shape="rectangle",coords="x1,y1,x2,y2")

<img src="URL" usemap="#rect" />

  <map name="rect">
     <area shape="rect" coords="148,139,295,0" href="pttp://www.baidu.com" />   </map> //这是一个矩形的图像热区,点击图像热区就链接到百度

audio(音频)

语法: <audio src="song.ogg" controls="controls"></audio>

  考虑到不同浏览器对视频文件的兼容性:

    <audio controls="controls">

      <source src="song.ogg" type="audio/ogg">

      <source src="song.mp3" type="audio/mpeg">

      <p>您的浏览器不支持 audio标签</p>

     </audio >

autoplay autoplay   如果出现该属性,则音频在就绪后马上播放。

controls controls     如果出现该属性,则向用户显示控件,比如播放按钮。

loop loop        如果出现该属性,则每当音频结束时重新开始播放。

preload preload      如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果 使用 "autoplay",则忽略该属性。

src url          要播放的音频的 URL。

video(视频)

语法: <video src=“movie.mp4” controls="controls"></video>

  考虑到不同浏览器对视频文件的兼容性:

   <video controls="controls">

      <source src="movie.ogg" type="video/ogg">

      <source src="movie.mp4" type="video/mp4">

      <p>Your browser does not support the video tag.</p>

   </video>

属性说明:

  autoplay autoplay          如果出现该属性,则视频在就绪后马上播放。

  controls controls          如果出现该属性,则向用户显示控件,比如播放按钮。

  loop loop              如果出现该属性,则当媒介文件完成播放后再次开始播放。

  muted muted          规定视频的音频输出应该被静音。

  poster URL           规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。

  preload preload        如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果 使用 "autoplay",则忽略该属性。

  src url            要播放的视频的 URL。

   width pixels         设置视频播放器的宽度。

  height pixels         设置视频播放器的高度。

HTML 较常用的实体字符

无序列表

<ul >
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>

有序列表

<ol >
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>

定义列表

<dl>
  <dt>HTML</dt>
    <dd>html 是超文本标记语言</dd>

  <dt>XHTML</dt>
    <dd>可扩展超文本置标语言 </dd>
    <dd>表现方式与超文本置标语言(HTML)类似,不过语法上更加严格 </dd>
</dl>

HTML 表格

表格由 <table> 标签以及一个或多个 tr、th或td 元素组成, 单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

   <table border="1">
         <tr>
             <td>一行一列</td>
            <td>一行二列</td>
        </tr>
        <tr>
            <td>二行一列</td>
            <td>二行二列</td>
        </tr>
    </table>
            

属性                 值                       说明

width       px、 %                指定表格的宽度

height      px、%               表格的高度

border        px                 指定表格边框的宽度

cellpadding     px                   指定边框与内容之间的空白

cellspacing    px、 %                指定单元格之间的空白

align       left、 right 、 center        指定对齐方式

valign       top、 middle 、 bottom        垂直排列方式

colspan                            合并列单元格

rowspan                           合并行单元格

<iframe> 内嵌框架

说明:

属性      属性值        说明

width        px , %         指定框架的宽度

height       px , %         指定框架的高度

scrolling      yes,no,auto      是否显示滚动条

frameborder    1, 0           是否显示边框

iframe可用作链接的目标,链接的target属性必须引用iframe的name属性

语法:

<iframe src="http://www.hao123.com" width="250" height="200" scrolling="no" frameborder="0" name="框架名"></iframe>
时间: 2024-10-11 05:39:48

总结过去几天所学过的所有HTML知识点的相关文章

读metronic文档学到的几个知识点

1.RTL  同样的页面,它做了两套.为什么,因为在这个世界上,有些民族,有些语种,是从右向左来的. 2. google material design 同样的一套东西,又分别做了google material 版,那默认版是什么呢?flat design版. google的设计师是怎么想的呢? 引用一张图,来自知乎: 还记得,ipod旋转的马达声吗,就是这个意思.

为什么美国学生学的数学比我们简单却还能做出很牛逼的东西?

听说过这样一种说法:美国初中生学的数学是咱们国家小学生学的水平,美国高中生学的数学是咱们国家初中的水平.(不知道对不对) 那么,为什么很多需要数学的东西(比如计算机图形学领域)都是人家做出来的而不是咱们 ?算法对数学的要求够大了吧? PPS:一个类似的回答,有启发意义:美国高中教育那么粗浅,大学教育那么尖端,中间的 Gap 怎么搞定? 私以为 @倪大为 同学引用的答案说的是最正确的.特此赞同一下:"美国给予不热爱数学的学生最基础的数学教育,而给予热爱数学的天才最高水平的数学教育." 长久以来,中

从0开始学大数据-Java基础-三元运算符/键盘录入(4)

我们从零开始学习大数据技术,从java基础,到Linux技术涉猎,再深入到大数据技术的Hadoop.Spark.Storm技术,最后到大数据企业平台的搭建,层层递进,由点到面!希望技术大牛能过来指导学习. 上一节了解Java运算符,其中三元运算符没有做讲解,本节我们开始学习Java基础-三元运算符/键盘录入,将会围绕以下几个知识点进行展开学习: 三元运算符 键盘录入数据 一.运算符 1.三元运算符 接着上一节的话题运算符,本节讲三元运算符,在讲三元运算符之前,可能会有很多朋友会问,是不是有一元运

用欧拉计划学Rust语言(第17~21题)

最近想学习Libra数字货币的MOVE语言,发现它是用Rust编写的,所以先补一下Rust的基础知识.学习了一段时间,发现Rust的学习曲线非常陡峭,不过仍有快速入门的办法. 学习任何一项技能最怕没有反馈,尤其是学英语.学编程的时候,一定要"用",学习编程时有一个非常有用的网站,它就是"欧拉计划",网址: https://projecteuler.net 这个网站提供了几百道由易到难的数学问题,你可以用任何办法去解决它,当然主要还得靠编程,编程语言不限,论坛里已经有

【核心整理】那些让你起飞的计算机基础知识:学什么,怎么学?

我之前里的文章,写的大部分都是与计算机基础知识相关的,这些基础知识,就像我们的内功,如果在未来想要走的更远,这些内功是必须要修炼的.框架千变万化,而这些通用的底层知识,却是几乎不变的,了解了这些知识,可以帮助我们更快着学习一门知识,更加懂得计算机的运行机制.当然,在面试中也经常会被问到,特别是对于应届生,对于春秋招,也可以看看我前阵子写过的文章历经两个月,我的秋招之路结束了!.也有读者经常问的计算机基础知识究竟是指啥?学习顺序?推荐书籍? 我公众号的读者学生以及非科班的应该挺多的,所以我今天这篇

java学成什么样子可以出去实习?

对于不同的公司要求有所不同,但大体上可分为两种情况: 1. 一般的公司招java实习生,只需实习生具备入门Java基础即可:2. 但有些公司要求实习生具备扎实的计算机基础,例如:数据结构基础.算法基础.程序设计基础等,即大学计算机专业涵盖的知识掌握牢固. 如果想快速进入企业找到合适的工作,可以看下小编整理的这套2020年Java开发程序员学习线路图,其中还包含所需要学习的技术教程及相关课程配套视频. java学习路线图 以上是java开发的学习路线图,从基础到中高级,java程序员必学或了解的一

《翻转课堂的可汗学院:互联时代的教育革命》:一个外行利用互联网对教育业的颠覆 三星推荐

作者本来是基金公司的金融分析师,从远程辅导自己的一些晚辈开始,最终做了专职的互联网教育工作者.本书是作者对这个过程的回忆和总结. 作者在早期的远程辅导自己的晚辈开始,发现了教育业的现存的一些问题和改进的方法.作者认为教育业最大的问题是无视人与人之间接受新知识的速度是可以有非常大的差异的. 作者制作了许多10分钟长的教学视频上传到youtube,效果不错.许多教师干脆让学生晚上回家看可汗的教学视频,白天到教室想老师提问,效果非常好.翻转课堂指的就是这种把常规的学习和提问的时间地点颠倒过来的做法.

Objective-C 初体验

因为要接SDK的原因,现在搞搞OC,本人是以控制台程序入手学的. 本片主要知识点: 一:创建控制台项目 二:创建类(h文件与m文件分开) 三:类成员的编写,坑啊 1创建控制台项目: 1,打开XCode  , File -> New -> Project... 2,在打开的界面中如下操作: 3,选择项目的保存位置... 2,新建类(h文件和m文件) 1,File->New ->File... 2,进入创建界面后如下操作(这样会生成h文件和m文件): 3,选择文件保存的位置.....

webpack学习笔记一

webpack.gulp.grunt是前端打包功能工具:因为已经学习了gulp,而最近发现webpack很火,于是着手学习webpack.本篇是webpack学习笔记系列的第一篇,欢迎指教. 我是从慕课网以及官网文档相结合的方式学习的,从官方文档学到的第一个知识点是在使用webpack打包过程中,即使没有webpack.config,js这个文件也是可以的. 首先是全局安装webpack,cmd(如果是window系统,在任意位置)执行命令: npm install --g webpack或cn