HTML基础

1. 标题

HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的。

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

2.段落

HTML 段落是通过标签<p>来定义的。

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

3.折行

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 < br > 标签:

<p>这个<br>段落<br>演示了分行的效果</p>

4.水平线

<hr> 标签在 HTML 页面中创建水平线。

5.注释

可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。

注释写法如下:

6.列表

6.1无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表使用<ul>标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
属性 描述
square 实心方块
type circle 空心圆
disc 实心圆

6.2有序列表

同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于<ol>标签。每个列表项始于<li>标签。

列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
属性 描述
1 数字序号
a 小写字母
type A 大写字母
i 小写罗马字母
I 大写罗马字母

7.div和span标签

7.1div 标签

<div>是一个块级元素,通常与CSS配合使用,用于页面布局

<div>标签可以把文档分割为独立的,不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

<div>是一个块级元素。这意味着它的内容自动地开始新的一行。实际上,换行是<div>固有的唯一格式表现。可以通过<div>的class或id应用和外的样式

<div>content</div>

常用属性:

属性 描述
align left、right、center 规定div元素中内容的对齐方式,以后可以用样式取代它

7.2span 标签

<span>被用来组合文档中的行内元素,审判没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

<span>content</span>

8 格式化标签

8.1font

规定文本的字体颜色、字体尺寸、字体样式

常见属性:color(颜色名、十六进制,rgb)

​ size(字体大小)

​ face(字体风格)

8.2pre

定义预格式化的文本。被包围在pre的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

8.3文本标签

<b>加粗文本</b> 或者<strong>加粗文本</strong>
<i>斜体文本</i>
<u>下划线<u/>
<del>删除线<del/>
<code>电脑自动输出</code>
<sub> 下标</sub> 和 <sup> 上标</sup>

9.超链接a标签

HTML 链接是通过标签<a>来定义的。

HTML 链接由<a>标签定义。链接的地址在 href 属性中指定

使用 target 属性,

常用属性

​ href: 必须属性,链接的地址在 href 属性中指定

target :你可以定义被链接的文档在何处显示。

​ _self 表示当前页面(默认)

​ _blank 表示打开新页面进行跳转

9.1a标签实现锚点

​ 利用a标签的name属性:

<a name="top"></a>

​ 利用一般标签的id属性:div id="", a id=""等;

<div id="top"> </div>、<a id="top"><a/>

​ 锚点定位,#别忘记了

<a href="#top">返回首部<a/>

10. 图像标签 img

在 HTML 中,图像由<img> 标签定义。

要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。

img标签,是一个行内标签,不会自动换行

<img src="" alt="" />

必须属性

属性 描述
alt text 规定图像的替代文本,一般在图片无法正常显示占位的文字。
src URL 规定显示图像的URL

常用属性

属性 描述
align top、bottom、middle、left、right 规定如何根据周围的文本来排列图像
border pixels 定义图像周围的边框
height pixels、% 定义图像的高度
width pixels、% 定义图像的宽度
title 文本 当鼠标在图片上时显示的文字

11.表格

<tab></tab>标签定义HTML表格
<tr></tr>标签定义表格的行,tr元素包含一个或者多个td\th
<td></td>标签定义HTML表格中的标准单元格
<th></th>标签定义表格内的表头单元格。th元素内部的文本通常会呈现为剧中的粗体文本,而td元素内的文本通常是左对齐的普通文本

简单的HTML表格table元素以及一个或多个tr、hd或td元素组成。

理解:table相当于表格的外框,tr相当于行,td为一个单元格,th为有标题作用的单元格,同时th中的内容有加粗效果。

table标签常用属性

属性 描述
align right、left、center 表格对齐方式
border px 规定表格边框的宽度
width px、% 规定表格的宽度

table标签中,width:px、%

​ % :参考的是上一级元素的宽度,如果上一级元素未设置,则参考屏幕宽度

height:表格的高度

tr标签常用属性

属性 描述
align right、left、center 定义表格行的内容对齐方式
bgcolor rgb(x,x,x)、#xxxxxx、colorname 定义表格的背景颜色,以后用样式取代
valign top、middle、bottom 规定表格中内容的垂直对齐方式,以后用样式取代

css样式:

​ border-collapse:collapse; 合并表格边框

​ 合并单元格

​ 的colspan和rowspan分别规定单元格横跨的列数和行数

​ 纵向合并:rowspan

​ 横向合并:colspan

12.表单

12.1form标签

表单是一个包含表单元素的区域。

表单使用表单标签 <form> 来设置:

表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

注:

  • 表单用于向服务器传输数据,form元素是块级元素,其前后会产生折行。
  • 表单提交时,必须设置表单元素的name属性值,否则无法获取数据
  • 表单需要结合表单元素去使用

常用属性:

属性 描述
action URL 规定当提交表单时向何处发送表单数据
method get、post 规定用于发送form-data的HTTP方法
name Form_name 规定表单的名称
target _ bank(空白窗口)、_ self(当前窗口) 、_parent_top framename 规定在何处打开action URL(提交数据时打开窗口的方式)

method:表单提交方式:get、post

​ get:默认,主动的获取方式,数据放在url上(浏览器中地址栏的后面),数据的容量有限,安全性差,有缓存(会将数据保存在浏览器中)

​ post:数据放在请求时体中,数据量理论上没有限制,相对安全,没有缓存。post请求需要服务器的支持

所有标签都有的属性:

  • id属性:用来标识元素的唯一性
  • name属性:提交数据时的参数名
  • stytle属性:设置元素的行内样式(具体样式)
  • class属性:设置元素的样式名

12.2input标签

<input>标签用于收集用户信息。

常用属性:

属性 描述
alt text 定义图像输入的替代文本
checked checked 规定此input元素首次加载时禁用此元素
disabled diaabled 当input元素加载时禁用此元素
readonly readonly 规定输入字段为只读
maxlength number 规定输入的字符串最大长度
value value 规定input元素的值
type text
password
radio
checkbox
file
hidden
ibutton
submit
reset
date
规定input元素的类型。文本框、密码框、单选框、复选框、文件域、隐藏域、普通按钮、提交按钮、重置按钮、日期框

注:

  1. 单选框需要通过name属性设置为一组,复选框也是一样的
  2. 如果是上传文件的表单,则表单需要设置一个属性 enctype="multipart/form-data",提交方式为post请求
  3. 没有name属性是无法提交数据的!!!

文本域(Text Fields)

文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

浏览器显示如下:

First name:

Last name:

注意:表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是 20 个字符。


密码字段

密码字段通过标签<input type="password"> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

浏览器显示效果如下:

Password:

注意:密码字段字符不会明文显示,而是以星号或圆点替代。


单选按钮(Radio Buttons)

<input type="radio"> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

浏览器显示效果如下:

Male

Female


复选框(Checkboxes)

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

浏览器显示效果如下:

I have a bike

I have a car


提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

浏览器显示效果如下:

Username:

假如您在上面的文本框内键入几个字母,然后点击确认按钮,那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

12.3textarea标签

该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本,可以通过cols和rows属性来规定text area的尺寸。cols规定文本区内的可见宽度。rows规定文本区内的可见行数。

<textarea>content<textarea/>

12.4lable标签

<lable>标签为input元素定义标注(标记)

lable元素不会呈现任何的特殊效果。

lable标签的for属性应当与相关元素的id属性相同,此时点击lable标签会自动为元素聚焦

12.5button标签

input按钮:

​ type="button" 普通按钮

​ type="submit" 提交按钮

​ type="reset" 重置按钮

button按钮:

​ type="button" 普通按钮

​ type="submit"(默认) 提交按钮

​ type="reset" 重置按钮

注:button按钮为双标签,标签之间可以添加内容(文本或标签等)

不给type的话 :<button>按钮</button>————这个是"submit"(默认提交按钮,而不是普通按钮

12.6select标签

<select>用于定义下拉列表。

<select name="student" >				//下拉框
<option value ="">小学生</option> //下拉框的选项标签
<option value="">中学生</option>
<option value="">大学生</option>
</select>

select常用属性

属性 描述
disabled disabled 禁用该下拉框
multiple multiple 规定可选多个选项
name name 规定下拉列表的名称
size number 规定下拉列表中可见选项的数目

option常见属性

属性 描述
disabled disabled 禁用该下拉选项
selected selected 规定选项(首次显示在列表中)表现为选中状态
value text 定义送往服务器的选项值

13.HTML常见字符实体

实体名称对大小写敏感!
显示结果 描述 实体名称 实体编号
空格    
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '

虽然 html 不区分大小写,但实体字符对大小写敏感。

13.1标签的分类

​ HTML中标签元素三种不同的类型:块元素,行内元素,行内块元素

块级元素

​ 元素都从新的一行开始,并且其后的元素也另起一行;元素的高度、宽度、行高以及顶和底边距都可以设置;元素宽度在不设置情况下,是它本身父容器的100%(和父元素宽度一致),除非设定一个宽度。

html中常见的块级元素:`

标签 描述
<caption> 定义表格标题。
<div> 定义文档中的节。
<dl> 定义定义列表。
<dt> 定义定义列表中的项目。
<form> 定义供用户输入的 HTML 表单。
<h1> to <h6> 定义 HTML 标题。
<header> 定义 section 或 page 的页眉。
<hr> 定义水平线。
<li> 定义列表的项目。
<ol> 定义有序列表。
<p> 定义段落。
<pre> 定义预格式文本。
<section> 定义 section。
<table> 定义表格。
<td> 定义表格中的单元。
<th> 定义表格中的表头单元格。
<thead> 定义表格中的表头内容。
<time> 定义日期/时间。
<tr> 定义表格中的行。
<ul> 定义无序列表。

行内元素

​ 和其他元素都在一行上;元素的高度、宽度及顶部和底部的边距不可设置;元素的宽度就是它包含的文字或者图片的宽度,不可改变。

html中常见的行内元素:

标签 描述
<a> 定义锚。
<b> 定义粗体字
<br> 定义简单的折行。
<button> 定义按钮 (push button)。
<del> 定义被删除文本。
<i> 定义斜体字。
<img> 定义图像。
<input> 定义输入控件。
<label> 定义 input 元素的标注。
<q> 定义短的引用。
<select> 定义选择列表(下拉列表)。
<span> 定义文档中的节。
<strong> 定义强调文本。
<sub> 定义下标文本。
<sup> 定义上标文本。
<textarea> 定义多行的文本输入控件。

行内块元素

和其他元素都在一行上;元素的高度、宽度、行高以及顶部和底部的边距都可以设置。

img:用于标记网页中的图像 ,有属性src:图片资源路径 ,alt:提示信息 当图片加载失败 ,以指定文本形式代替图片显示

button:按钮

input:输入框,有属性type输入框类型,有属性值(text表示文本输入框,file文件选择器,password密码输入框,email邮箱输入框,number数字输入框,button按钮)。placeholder占位字符,用于提示输入框应该输入的内容。value表示输入框中的内容。name和后台服务器交互时,必须携带name属性,发送请求时的参数名。

单选 type=“radio” 表示一个单选选项处于同一组单选框只能选中一个值,将多个radio的name属性值设置为相同的值

type="checkbox"复选框

label:和input标签绑定到一块使用,有属性for,属性值就是input输入框的id值。checked属性为标签选中状态

select:下拉列表

option:下拉选项

总结:

注:

以上是HTML重点知识的总结,如果文章有任何错误和建议,请各位大佬尽情评论留言!如果这篇文章对你有些许帮助,希望可爱亲切的您点个赞推荐一手,非常感谢啦!最后,感谢各位大佬们看到了这里!愿你韶华不负,青春无悔!

HTML重点总结的更多相关文章

  1. 微软.Net 社区虚拟大会 -- 首日重点(dotnetConf 2016)

    6月7日--9日,为期三天的微软.NET社区虚拟大会正式在 Channel9 上召开. 在 Scott Hunter, Miguel de Icaza (Xamarin CTO) , ScottHan ...

  2. ios官方菜单项目重点剖析附项目源码

    原版教程:https://developer.apple.com/library/content/referencelibrary/GettingStarted/DevelopiOSAppsSwift ...

  3. Expert 诊断优化系列-------------针对重点语句调索引

    上一篇我们说了索引的重要性,一个索引不仅能让一条语句起飞,也能大量减少系统对CPU.内存.磁盘的依赖.我想上一篇中的例子可以说明了.给出上一篇和目录文链接: SQL SERVER全面优化------- ...

  4. Android开发重点难点1:RelativeLayout(相对布局)详解

    前言 啦啦啦~博主又推出了一个新的系列啦~ 之前的Android开发系列主要以完成实验的过程为主,经常会综合许多知识来写,所以难免会有知识点的交杂,给人一种混乱的感觉. 所以博主推出“重点难点”系列, ...

  5. Java编程思想重点笔记(Java开发必看)

    Java编程思想重点笔记(Java开发必看)   Java编程思想,Java学习必读经典,不管是初学者还是大牛都值得一读,这里总结书中的重点知识,这些知识不仅经常出现在各大知名公司的笔试面试过程中,而 ...

  6. capwap协议重点分析

    一.     CAPWAP概述 CAPWAP由两个部分组成:CAPWAP协议和无线BINDING协议. (1)CAPWAP协议是一个通用的隧道协议,完成AP发现AC等基本协议功能,和具体的无线接入技术 ...

  7. npm 重点小结

    npm作为javascript一个用得比较广的包管理工具,已经集成在了node里面,基本一安装node就可以用npm了,十分方便.这里的小结主要沿着官方文档的思路,挑出一些比较重点的,平时常用的部分进 ...

  8. Java重点之小白解析--浅谈数据流形式图片上载

    文档上载,上载也不知道哪个大神(混球)起的名字,读起来怪怪的,反正平时我只读上传. 闲话少说,直入主题.先等等这两天做文件上传,都快把宝宝折磨疯了,不会呀,各种查呀,最可悲的是废了老大功夫学会了传送文 ...

  9. Java重点之小白解析--浅谈HashMap与HashTable

    这是一个面试经常遇到的知识点,无论什么公司这个知识点几乎是考小白必备,为什么呢?因为这玩意儿太特么常见了,常见到你写一百行代码,都能用到好几次,不问这个问哪个.so!本小白网罗天下HashMap与Ha ...

  10. python课程第二周重点记录

    python课程第二周重点记录 1.元组的元素不可被修改,元组的元素的元素可以被修改(字典在元组中,字典的值可以被修改) 2.个人感觉方便做加密解密 3.一些方法的使用 sb = "name ...

随机推荐

  1. 计算机、程序和java简介

    内存 计算机的内存是由一个有序的字节序列组成,用于存储程序及程序需要的数据.你可以将内存想象成计算机执行程序的工作区域.一个程序和它的数据在被CPU执行前必须移到计算机的内存中. 每个字节都是有一个唯 ...

  2. 通过CRM客户系统改变销售工作模式

    CRM客户管理软件对于企业来说,能够优化销售流程.维护客户关系.销售流程管理等.但是很多销售人员认为企业购买CRM软件,是用来监视他们的武器,自然会受到销售团队的抵触.所以经常会出现管理者辛苦的选型, ...

  3. JDBC:MySQL5.x 与 MySQL8.x

    jar包下载地址: https://dev.mysql.com/downloads/connector/j/ 或者 :http://central.maven.org/maven2/mysql/mys ...

  4. ptm经验总结

  5. leetcode第156场周赛5207

    当时做的时候,一直理解想搞dp,后面可能思路有点乱了,写不出来... 看了评论区的大佬,才发现是滑动窗口的题目,学习到了. 思路分析: 1.这题可以转化成求数组最大子数组的和不超过maxCost的长度 ...

  6. Acunetix在SDLC中的安全性测试

    DevOps只是害怕尝试新事物.它们用于Selenium测试,这些测试占用了管道并提供了难以解释的结果,但是与此同时,它们经常避开了DAST测试,这远没有那么麻烦. 由于他们的应用程序是完全用Java ...

  7. ABP Framework 为什么好上手,不好深入?探讨最佳学习姿势!

    离写上一篇经验总结 ABP Framework 研习社经验总结(6.28-7.2) ,已经过去两周. ABP Framework 研习社(QQ群:726299208) 最近一周,又迎来了很多新伙伴,成 ...

  8. 因为它,我差点删库跑路:js防抖与节流

    前言 前端踩雷:短时间内重复提交导致数据重复. 对于前端大佬来说,防抖和节流的技术应用都是基本操作.对于"兼职"前端开发的来说,这些都是需要躺平的坑. 我们今天就来盘一盘js防抖与 ...

  9. take for granted

    解释含义1 Take for granted是一句地道的英语口语,意思是to expect someone to always be there and do things for you even ...

  10. Serverless与Web后端天生不合?

    Serverless/Faas/BaaS 等概念在这几年的技术圈中是绝对的热点词汇之一,国内外众多云厂商也纷纷推出自家的 Serverless 和函数计算产品,微信也依托腾讯云推出了基于 Server ...