HTML知识点总结

Posted zxh1314

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML知识点总结相关的知识,希望对你有一定的参考价值。

  • table元素

table用来创建表格,表格也可以用来布局,但是嵌套过于复杂,不利于灵活布局,已经几乎没人用它来布局了。

表格基本上有如下几个标签构成:

(1)<table>标签用来创建表格的外部框架。

(2)<tr>标签用来创建表格的行。

(3)<th>标签用来创建表头单元格。

(4)<td>标签用来创建tr行中的单元格。

(5)<caption>标签用来创建标题。

(6)<thead>标签用来创建表格的表头。

(7)<tbody>标签用来创建表格的主体部分。

(8)<tfoot>标签用来创建表格的页脚。

其中 <thead>、<tbody>和<tfoot>标签实现了表格的语义化布局,这样表格所组织的内容结构就更加清晰了。也就是说,假如,有一个表格,希望对其中的内容进行分组:

(1)一行能够起到表格标题的作用。

(2)一些行是表格的主要数据。

(3)最后一行位于表格最底部的总结类型的行。

<thead>中的<th>也是语义化布局的一部分,<th>中的字体会默认加粗。

  • <td>rowspan属性:定义了单元格应该纵跨的行数,也就是实现了单元格纵向合并的效果。
  • <td>colspan属性:定义单元格应该横跨的列数,也就是实现了单元格横向合并的效果。
 
技术分享图片

<col>标签—— column 列:可以为表格中一个或多个列定义属性值

<colgroup>标签—— column group 列组:对表格中的列进行组合,以便对其进行样式修改。

【属性】

span:规定col元素应该横跨的列数

 
技术分享图片
 
  • div元素

div是块级元素,相当于一个容器,在语义上不代表任何特定类型的内容。主要用作大的框架布局,也就是说网页的骨架主要通过div来架设的,而网页的血肉则是有span、p或者ul等元素完成。

  • section元素

<section>标签是html5新增的语义化标签,代表文档中的“节”或“段”。“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组。主要作用为对页面的内容进行分块或者对文章的内容进行分段。

section是块级元素,section标签通常带有一个标题和一个内容块。?

  • article元素?

<article>标签也是HTML5新增的语义化标签,代表一个页面中自成一体的内容,目的是为了让开发者独立开发或重用。譬如论坛的帖子,博客上的文章,一篇用户的评论等。除了内容,article会有一个标题(通常会在header里)和一个footer页脚。article也是块级元素

如果在article内部再嵌套article,代表内嵌的article与它外部的内容有关联。

  • section与article的区别:

section和article可以互相嵌套,也就是说他们没有上下级关系,section可以包含article,article也可以包含section。

拿报纸举个例子:

一份或一张报纸有很多个版块,有头版、国际时事版块、体育版块、娱乐版块、文学版块等等,像这种有版块标题的、内容属于一类的版块就可以用section包起来。

然后在各个版块下面,又有很多文章、报道,每篇文章都有自己的文章标题、文章内容。这个时候用article就最好。如果一篇报道太长,分好多段,每段都有自己的小标题,这时候又可以用section把段落包起来。(以上内容来自知乎https://www.zhihu.com/question/20227599 )

  • section和div的区别

1、section和div都可以对内容进行分块,但是section是进行有意义的分块,无意义的分块应该由div来做,例如用作设置样式的页面容器。
2、section内部必须有标题,标题也代表了section的意义所在。

  • 注意:

?1、不要将<section>作为用来设置样式或行为的“钩子”容器,那是<div>的工作。
2、如果<article>、<aside>或<nav>更符合状况,不要使用<section>。
3、不要为没有标题的内容区块使用<section>。

4、一条简单的准则是,只有元素内容会被列在文档大纲中时,才适合用section元素。

 

网页不可能是纯静态的,没有任何的交互功能;绝大多数的网站都有表单元素的使用。表单提供了一个浏览者和网站交互的途径,比如用户注册登录,用户留言等功能。

  • form

form元素只是一个数据获取元素的容器,而容器内的元素称为表单控件。让表单数据能够提交,可以将表单元素包裹在<form>之中,最常用的表单控件是input元素。form元素为块级元素。

  • form的主要属性

name属性:指定表单的名称。

action属性:规定将表单元素数据提交到哪个页面。

method属性:规定以何种方式提交表单数据,取值如下:

(1)get:默认值,通过url方式传输,并且最大不能够超过1k,安全性也不是太好。

(2)post:传输上大小上没有限制,并且安全性良好,不通过url传输。

novalidate属性:是HTML5新增的一个属性,规定当提交表单时不对其进行验证。

autocomplete属性:是HTML5新增的一个属性,规定表单是否应该启用自动完成功能。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。

  • input

?input是很强大的表单控件,它的主要属性有:

  1. name属性:用于规定input元素的名称
  2. accept属性:用来规定能够通过文件上传进行提交的文件类型,该属性只能与type="file"配合使用。
  3. checked属性:规定在页面加载时应该被预先选定的input元素,checked属性只能在input元素type="radio"或type="checkbox"时使用。
  4. disabled属性规定应该禁用input元素。被禁用的字段是不能修改的。
  5. readonly属性:规定输入字段为只读。
  6. maxlength属性:规定输入字段的最大长度,以字符个数计,该属性只能在input元素type="text"或type="password"的时候使用。

  7. input的type属性:?

  text    定义单行的输入字段,用户可在其中输入文本

  password 定义密码字段。该字段中的字符被掩码

  file    定义输入字段和 "浏览"按钮,供文件上传

  radio   定义单选按钮

  checkbox 定义复选框

  hidden   定义隐藏的输入字段

  button   定义可点击按钮(多数情况下,用于通过javascript启动脚本)

  image   定义图像形式的提交按钮

  reset    定义重置按钮。重置按钮会清除表单中的所有数据

  submit   定义提交按钮。提交按钮会把表单数据发送到服务器

 
技术分享图片

 date      定义选取日、月、年的输入域
 month     定义选取月、年的输入域

    time      定义选取月、年的输入域

  • select下拉列表

下拉列表由<select>和<option>标签配合使用生成。下拉的菜单项是由<option>标签定义,当提交表单,选中的option的value属性值会被发送。

<select>标签还有两个重要属性:

(1)multiple:规定select下拉菜单可以选择多项,默认情况下下拉列表只能选择一项。

(2)size:规定下拉列表展开之后可见列表项的数目。

 
技术分享图片
 
  • <h1>~<h6>

在HTML中,标题(Heading)元素共有6个级别的标签:<h1>~<h6>。它们都是块级元素。标题数字越小,字体就会越大,标题的级别也就越高。

 
技术分享图片
  • <p>元素

在HTML中,使用p标签来标记一段文字。段落标签会自动换行,并且段落与段落之间有一定的空隙。<p>也是块级元素,是文本的容器,可以对文本进行更多的操作,比如设置字体大小,颜色,段落的宽度等等。

而<br/>可以在任意地方插入实现换行,但是不会产生空隙,只是单纯的换行,他是内联元素。

  • <span>元素?

<span>元素其实和<div>相似,但div是块级元素,span是内联元素,它的作用是对一些文本进行修饰,比如你想强调大量文本中同类的短语,那么对他们使用<span>元素包裹之后就可以很便利的应用相同的样式。如下图中,我们只想让块级元素和内联元素这8个字变成红色且加粗,就可以将“块级元素”和“内联元素”包裹在<span></span>中,再对他们设置css样式。

 
技术分享图片
  • <strong>元素

strong:表示内容的重要性,一般表现为加粗。<strong>元素为内联元素。

  • <em>元素

em:表示强调,表现为斜体<em>元素是可以嵌套的,嵌套层次越深,表示其包含的内容越需要强调。

 

HTML列表分为有序列表,无序列表和描述列表。我们常用的是有序列表(ol)与无序列表(ul)。

  • 有序列表

<ol>标签就可以定义一个有序列表,之所以称其为有序列表,是因为可以使列表具有排序功能。具体的列表项使用<li>元素来规定。

type属性:实现不同方式的有序排序功能,不赞成使用,通常都会使用样式取代它。

(1)1表示以1,2,3,4数字方式的排序。

(2)a表示以a,b,c,d小写字母的方式排序。

(3)A表示以A,B,C,D大写字母的方式排序。

(4)i表示以i,ii ,iii罗马数字小写的方式排序。

(5)I表示以 I,II,III罗马数字大写的方式排序。

编号的样式可以使用CSS中的 list-style-type 属性定义。

HTML5中新增的reversed属性可以规定倒序排序。

 
技术分享图片
  • 无序列表

HTML无序列表用<ul>标签定义,之所以称其为无序列表,是因为列表没有排序功能。具体的列表项还是使用<li>元素来规定。

type属性:定义列表项前面的符号形状,不赞成使用,通常都会使用样式取代它。

(1)dise:实心圆(默认值)。

(2)circle:空心圆。

(3)square:实心方块。

 
技术分享图片

?

纯CSS打造网页大白知识点:

     首先要把大白分割,整体baymax中包含header(eye1,eye2,mouth),torso(heart),belly(cover),l-bigfinger,r-bigfinger,l-smallfinger,r-smallfinger,l-leg,r-leg。
  1.    因为大白是白色,所以背景颜色(body)要设为深色。
  2.    大白居中,div居中要用margin:0  auto;
  3.    保险起见overflow:hidden
首先写head:
  1.     设置宽高之后以百分比定义圆角的形状   border-radius:50%
  2.     margin-bottom设为负值,使身体与头部有重叠
  3.     因为只有设置了position 为relative absolute fixed 后 ,设置z-index才生效。并且z-index是相对于同一父亲元素的所有子元素的层级关系,z-index的值越大,说明他的位置越高。 
             所以给头部设置position:relative,然后将层级z-index:100
其次写eye1,eye2:
  1.      用到旋转对称使左右眼对称,transform:rotate(**deg)与transform:rotate(-**deg)左右对称,左右手臂,左右手指,左右腿都会用到。
 技术分享图片
附代码:
 
<!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title></title>
           <style>
           body{background: #595959;}
                #baymax{
                      margin: 0 auto;
                     height: 600px;
                }
                #head{
                     height: 64px;
                width: 100px;
                     background-color: white;
                     border-radius: 50%;
                     margin: 0 auto;
                      margin-bottom: -20px;
                     border-bottom: 5px solid #E0E0E0;
                     z-index: 100;
    /*生成相对定位的元素*/
                   position: relative;
                }
                #eye1{
                     width: 15px;
                     height: 15px;
                     background: black;
                     border-radius: 50%;
                     position: absolute;
                     left: 20px;
                     top: 20px;
                     transform: rotate(8deg);
                }
                #eye2{
                     width: 15px;
                     height: 15px;
                     background: black;
                     border-radius: 50%;
                     position: absolute;
                     transform: rotate(-8deg);
                left: 60px;
                 top: 20px;
                }
                #mouth{
                     width: 40px;
                     height: 2px;
                     background: black;
                     position: absolute;
                     left: 30px;
                     top: 27px;
                     
                }
                #torso,#belly{
                     width: 150px;
                     height: 180px;
                     margin: 0 auto;
                     background: white;
                     border-radius: 45%;
                     border: 5px solid #DCDCDC;
                     border-top: none ;
                     z-index:1;
                }
                
                #belly{
                     width: 200px;
                     height: 240px;
                     margin-top: -145px;
                     position: relative;
                     z-index: 5;
                     }
                #cover{
                     width: 180px;
                     height: 250px;
                     margin: 0 auto;
                     background: white;
                     border-radius: 47%;
                     position: relative;
                    top:-20px ;
                     }
                #heart{
                     width: 20px;
                     height:20px;
                     border-radius: 50%;
                     background: white;
                     border: 1px solid #DCDCDC;
                     box-shadow:2px 5px 2px #ccc inset;
                     margin: 0 auto;
                     z-index: 111;
                     position: relative;
                    right:-40px;
                top:50px;
                     
                }
                #left-arm,#right-arm{
                     width: 80px;
                     height: 220px;
                     margin: 0 auto;
                     background: white;
                     border-radius: 47%;
                     transform:rotate(23deg);
                     position: relative;
                     top: -270px;
                     left: -95px;
                }
                #right-arm{
                     transform:rotate(-23deg);
                     position: relative;
                     top: -490px;
                     left: 95px;
                }
                #l-bigfinger{
                     width: 20px;
                     height: 60px;
                     margin: 0 auto;
                     background: white;
                     border-radius: 47%;
                     transform:rotate(125deg);
                     position: absolute;
                     top: 190px;
                     left:35px;
                }
                #l-smallfinger{
                width: 15px;
                     height: 40px;
                     margin: 0 auto;
                     background: white;
                     border-radius: 47%;
                     transform:rotate(125deg);
                     position: absolute;
                     top: 190px;
                     left:52px; 
                }
                
                #r-smallfinger{
                     width: 15px;
                     height: 40px;
                     margin: 0 auto;
                     background: white;
                     border-radius: 47%;
                     transform:rotate(-125deg);
                     position: absolute;
                     top: 190px;
                     left:12px;
                }
                #r-bigfinger{
                     width: 20px;
                     height: 60px;
                     margin: 0 auto;
                     background: white;
                     border-radius: 47%;
                     transform:rotate(-125deg);
                     position: absolute;
                     top: 190px;
                     left:25px;
                }
                #left-leg{
                     width: 75px;
                     height: 150px;
                     margin: 0 auto;
                     background: white;
                     border-radius: 47%;
                     position: relative;
                     left: -40px;
                     top: -500px;
                     border-bottom-right-radius: 15%;
                }
                #right-leg{
                     width: 75px;
                     height: 150px;
                     margin: 0 auto;
                     background: white;
                     border-radius: 47%;
                     position: relative;
                     left: 40px;
                     top: -650px;
                     border-bottom-left-radius: 15%;
                }
                
           </style>
     </head>
     <body>
           <div id="baymax">
           <div id="head">
                <div id="eye1"></div>
                <div id="eye2"></div>
                <div id="mouth"></div>
           </div>
           <div id="torso">
                <div id="heart"></div>
           </div>
           <div id="belly">
                <div id="cover"></div>
           </div>
           <div id="left-arm">
                <div id="l-bigfinger"></div>
                <div id="l-smallfinger"></div>
           </div>
           <div id="right-arm">
                <div id="r-bigfinger"></div>
                <div id="r-smallfinger"></div>
           </div>
           <div id="left-leg"></div>
           <div id="right-leg"></div>
     </div>     
     </body>
</html>




以上是关于HTML知识点总结的主要内容,如果未能解决你的问题,请参考以下文章

BootStrap有用代码片段(持续总结)

IFE_part1(task1-7)_blog.html总结

10个超级有用必须收藏的PHP代码样例

项目开发收尾总结(片段)

#yyds干货盘点#愚公系列2023年02月 .NET/C#知识点-程序运行计时的总结

python常用代码片段总结