分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置：首页 > IT知识

HTML知识点总结

发布时间：2023-09-06 01:38责任编辑：傅花花关键词：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）左右对称，左右手臂，左右手指，左右腿都会用到。
附代码：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<style>
body{background:#595959;}
#baymax{
margin:0auto;
height:600px;
}
#head{
height:64px;
width:100px;
background-color:white;
border-radius:50%;
margin:0auto;
border-bottom:5pxsolid#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:0auto;
background:white;
border-radius:45%;
border:5pxsolid#DCDCDC;
border-top:none;
z-index:1;
}
#belly{
width:200px;
height:240px;
position:relative;
z-index:5;
}
#cover{
width:180px;
height:250px;
margin:0auto;
background:white;
border-radius:47%;
position:relative;
top:-20px;
}
#heart{
width:20px;
height:20px;
border-radius:50%;
background:white;
border:1pxsolid#DCDCDC;
box-shadow:2px5px2px#cccinset;
margin:0auto;
z-index:111;
position:relative;
right:-40px;
top:50px;
}
#left-arm,#right-arm{
width:80px;
height:220px;
margin:0auto;
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:0auto;
background:white;
border-radius:47%;
transform:rotate(125deg);
position:absolute;
top:190px;
left:35px;
}
#l-smallfinger{
width:15px;
height:40px;
margin:0auto;
background:white;
border-radius:47%;
transform:rotate(125deg);
position:absolute;
top:190px;
&nb

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved