专栏首页web前端-HTML基础知识

HTML基础知识

一  元素的概念与三个常用标签

  HTML元素指的是从开始标签到结束标签的所有代码

开始标签

元素内容

结束标签

<h1>

h标签用来表示标题

</h1>

<p>

p标签表示一个段落

</p>

<hr>

我是一个单标签,我会给文档加一个横线

*注意我没有结束标签哦!

二 元素的属性

  属性的作用就是就为元素提供更多的信息,大多数元素都可以拥有属性    属性的语法:<标签 属性1=参数1>   注意空格的使用

 (1)align属性:我的作用是指定内容的对齐方式,left:左对齐(我是默认值哦);right:右对齐;center:居中对齐

  (2)bgcolor属性:我的作用是添加一个背景颜色

三  文本元素

1 b元素: 我的作用就是 加粗文字; 2.br元素: 我的作用就是强制换行; 3.i元素: 我的作用就是让 文字倾斜; 4.del元素: 我的作用就是 删除文子 5.strong元素: 我的作用是强调一段文本我的实际作用也是加粗文字. 6.wbr元素: 我的作用是表示安全换行Theshiyigehenchanghenchangdedanci.  再来对比一下没有安全换行的文本Theshiyigehenchanghenchangdedanci.  7.em元素: 我的作用是强调,我的实际作用也是让文字倾斜 8.s元素: 我的实际作用就是 删除线;从语义上来看,表示不准确的删除。 9.u元素: 我的实际作用就是 给文字加下划线 10.ins元素: 我的实际作用也是 给文字加下划线;从语义上来看,是添加一段文字,起到强调作用。 11.small元素: 我的作用是 添加小号字体 ,从语义上来看,用于免责声明和澄清声明。 12.sub和sup元素:我们的作用就是添加下标和上标: sub表示下标:HTML5;sup表示上标我的房子100m2 13.dfn元素: 我的作用从语义上看表示定义术语,是对一个词或短语的解释,实际效果就是倾斜文本 14.abbr元素: 我的作用是表示一段文本的缩写,在文本显示上没有任何实际效果,比如WTO 15.q元素: 我的作用从语义上看表示引用来自其他地方的的内容, 我的实际作用就是给文本加上双引号 16.code等元素: code元素用来表示计算机代码片段;function(){}     var元素用来表示编程语言中的变量; num     samp元素表示程序或计算机的输出您没有权限浏览该网页     kbd元素表示某部分内容是由用户利用键盘输入如:请按Enter键      *这几个元素属于英文范畴,必须将lang="en",英语才能体现效果。 17.ruby元素: 我的作用是表示位于表意文字上方或右方的注音符号 英(ying)雄(xiong)***不常用,浏览器支持不太好,很多浏览器不支持此功能 18.cite元素: 我的作用从语义上来看就是表示引用其他作品的标题。 实际效果就是加粗文本 19.bdo元素: 我的功能是设置文字方向,必需使用dir属性才可以设置,共两个值,rtl(从右到左);ltr(从左到右)默认为ltr  20.mark元素: 我的作用是突出显示文本,用于记号, 我的实际作用就是加上一个黄色的背景。 21.time元素: 我的作用从语义上来看就是表示日期和时间,例如 2015-9-18 22.span元素: 我的作用就是表示一般性的文本,没有特殊效果

四 超链接

目录语法:   同一个目录:直接写文件名称 或 ./文件名 比如:tp.jpg或者./tp.jpg    在下级(子)目录:xxx/tp.jpg    在下下级目录:xx/xxx/tp.jpg    在上级(父)目录:../tp.jpg   在上上级目录:../../tp.jpg

属性

    1.target属性的四个值:     _self:当前位置;     _blank:新窗口;     _top(最顶层框架),_parent(父框架),这两个属性咱不做讲解,后边的章节再说;

    2.id属性:通用属性,可以理解为元素的身份证;name属性:可以理解为元素的名字

五  img元素

1.img的属性

   1.src:必要属性,制定图片来源的路径;     2.alt属性:当图片无法显示时的替代文字;     3.width和height属性,指定图片的宽度和高度;单位是像素或百分比;

六 绝对路径和相对路径

1.绝对路径

需要指出链接资源的绝对位置,与你的HTML文档的位置无关; 1. 服务器中的位置:href="http://www.nipic.com/show/2/52/8144173k9c3cc84f.html"  2. 本地存储的位置:file:///D:\桌面\HTML5课程\HTML5入门实例课程\lesson9\西施.png


2.相对路径

如果链接资源与你的HTML文档位于同一个路径或者文件夹里,可以省略;否则必须指出相对路径,和HTML文档的位置有关; 同一个路径: 直接写文件名称 或 ./文件名 比如:tp.jpg或者./tp.jpg  在下级路径: 路径名称/资源名称:xxx/tp.jpg  在下下级路径: xx/xxx/tp.jpg  在上级路径: ../资源名称:../tp.jpg 在上上级路径: ../../tp.jpg

七 列表

1.无序列表的type属性

无序列表的type属性有三个值:1.disc(默认值);2.circle;3.square

2.有序列表的基本格式

3.有序列表的type属性

1.整数(默认值);2.大(小)写字母A\B\C...3.大小写的罗马字母:i ii .../I II III

4.有序列表的start属性

定义列表的开始序号,比如第一项不是数字1,而是从10开始.......

5.有序列表的value属性

定义某个单个列表项的序号.......

6.有序列表的value属性

自定义列表项组成:由 dl定义列表;dt定义列表项目;dd定义列表内容;

八  表格

1.表格构成三个基本要素

table:表格的范围,外框;用来定义表格,表格的其他元素包含在table标签里面;       tr: 表格的行;       td:表格的单元格

      th元素:为表格添加标题行

        th元素用来定义表格的标题单元格,他是tr元素的子元素,必须放在tr标签里边;tr元素的内容会自动居中对齐并加粗文字

      colspan元素:横向合并单元格

       属性值为正整数,表示该单元格合横向合并的列数,语法为 <td> <colspan>="3" </td>

      rowspan元素:纵向向合并单元格

       属性值为正整数,表示该单元格合纵向向合并的行数数,语法为 <td> <colspan>="3" </td>

九  style元素与HTML样式基础

 1.外部样式表:通过 link元素引入外部样式表;< link rel="stylesheet" type="text/css" href="" >         2.内部样式表: <style type="text/css"></style>          3.内联样式表:<p type="color:red"> </p>

十 div元素和布局

               元素的分类

  • 块元素:主要特征是会产生换行效果,自动与其他元素分离成两行;通常可以作为容器在内部添加其他元素。

      已经学过的块元素有:

          h1~h6;hr;ul;ol;p;table.........

  • 内联元素:不会产生换行效果,会和其他元素并联排列;

     已经学过的内联元素有:

          b;i;br;img;.........

                div元素和布局

    • div元素是通用的块元素,内部可以包含其他各种元素包括其他div元素;并且可以通过CSS设置样式来完成复杂的页面的布局
    • 通过一个简单的实例了解div布局是如何实现的

  十一  通用属性

  1. id属性:id属性用于指定元素的识别名称,相当于一个人的身份证,是唯一的,同一个文档中不能有重复的id;一般配合CSS和JavaScript来选择元素。

       2 class属性:class属性用于指定元素的类别名称,可以使用class元素给同一个文档中的多个元素进行归类,CSS就可以通过class个同一类元素设置统一的样式。

         3.style属性:stlyle属性用于给元素设定样式(内联样式或内部样式表).

         4.title属性:title属性用于显示省略的内容(或补充/提示说明的内容):当光标移动到元素内容上时显示title里的内容.

         5.dir属性:dir属性用于设定元素标签内容的文字方向.在讲文本样式的 bdo元素时候用过。

         6.lang属性:lang属性用于指定语言,比如中文还是英文:zh-cn/en;除了在html标签中设置,它还可以在特定元素中使用,改变该元素使用的语言.

        7.其他通用属性

        其他通用元素还有:

          • accesskey:元素快捷键
          • tabindex:元素移动顺序
          • draggable:元素拖动
          • contenteditable:元素是否允许编辑
          • hidden:隐藏元素
          • spellchcheck:元素检查
          • contextmenu:元素快捷菜单
          • data-yourvalue:自定义属性

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Jquery的属性操作和DOM操作

           3 val()    :     获取或设置表单内容    (原生JS使用value)

    用户3159471
  • JS对象和数组

    对象的属性既可以存放基本数据类型也可以存放其他对象的引用值或者函数的引用值,如果存储的是函数的的引用值则该属性称为方法

    用户3159471
  • css3动画效果

    transform:2D变形: 通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换方法:translate()/rotate()/sca...

    用户3159471
  • (2019)[前端]面试题[1]:小知识点大集合

    答:不区分,(HTML, CSS都不区分,但为了更好的可读性和团队协作,一般都小写,而在XHTML 中元素名称和属性是必须小写的。)

    无道
  • 编程小白 | 每日一练(103)

    这道理放在编程上也一并受用。在编程方面有着天赋异禀的人毕竟是少数,我们大多数人想要从编程小白进阶到高手,需要经历的是日积月累的学习,那么如何学习呢?当然是每天都...

    闫小林
  • H5 和 CSS3 新特性

    HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证

    岚孩子
  • 104 道 CSS 面试题 - 知识点总结

    对于组合声明的特殊性值计算可以参考: 《CSS 优先级计算及应用》 《CSS 优先级计算规则》 《有趣:256个class选择器可以干掉1个id选择器》

    Savalone
  • Dancing Links算法

     Dancing Links算法主要用于解决精确覆盖问题,精确覆盖问题就的定义:给定一个由0-1组成的矩阵,是否能找到一个行的集合,使得每个集合中每一列恰好只包...

    mathor
  • 前端入门4-CSS属性样式表声明正文-CSS属性样式表

    作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

    请叫我大苏
  • Selenium常见报错问题(2)- 解决和分析StaleElementReferenceException异常

    如果你在跑selenium脚本时,需要某些异常不知道怎么解决时,可以看看这一系列的文章,看看有没有你需要的答案

    小菠萝测试笔记

扫码关注云+社区

领取腾讯云代金券