坚持努力背

特殊字符：
空格符  
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
￥ 人民币 &yen;
  版权 &copy;
R 注册商标 &reg;
。 摄氏度 &deg;
正负号 &plusmn;
X 乘号 &times;
除号 &divide;
2 平方2 (.上标2) &sup2;
3 立方3 (上标3) &sup3;

标签有两种（单标签、双标签）：
双标签：<html></html>、<head></head>、<title></title>、<body></body>、<p>段落标签</p>、
<h1>标题标签</h1>~<h6></h6>、<strong>加粗</strong>、<b>加粗</b>、<em>斜体</em>、<i>斜体</i>、
<del>删除线</del>、<s>删除线</s>、<ins>下划线</ins>、<u>下划线</u>、<div>大盒子</div>、<span>小盒子</span>、
<a>超链接标签</a>、
标题标签：1、加了标题的文字会加粗、字体也会变大。
2、一个标题独占一行。
段落标签：1、会根据浏览器的窗口大小自动换行。
2、段落和段落之间会有间距/空隙。
文本格式化标签：是指给文字 加粗、斜体、下划线的效果。
大盒子： 1、<div>标签是用来布局的，不做处理一般一行只能放一个<div>。大盒子
小盒子： 2、<span>标签用来布局，一行可以有多个<span>。小盒子
超链接标签：1、一般写成<a href="跳转目标" target="目标窗口的弹出方式">文本或图片</a>
2、里面的属性：href:用于指定目标链接的地址，（必须属性）当标签应用href属性时，他就居于了超链接的功能。
targte:用于指定连接的打开方式，其中_self为默认值（当前窗口打开），_blank为在新窗口中打开。
3、锚点连接：点击之后快速跑到你想看到的内容。（）点击后可以快速定位的页面的某个位置）
格式：<a href="#id名"></a>
<h1 id=名字></h1>
单标签：换行标签<br/>、图像标签<img>、、、、、、、、、、、、、、、、、、、、、
换行标签：1、强制换行、并不产生间距。
图像标签：1、一般写成<img src="图片URL" />、src是<img />标签的 必须属性，用于指定文件的路径和文件名。
所谓属性：简单讲就是属于这个图像标签的特性。
图像标签的其他属性：src——————图片的路径——————必须属性
alt—————— 文本 ——————替换文本，图像不能显示的文本
title———— 文本 ——————提示文本。鼠标到图片上显示的文字
width———— 像素 ——————设置图片的宽度
height———— 像素 ——————设置图片的高度
border———— 像素 ——————设置图像的边框粗细

双标签可以分成两类（包含关系、并列关系）：
包含关系：
<head>
<title>有时候又叫——父子关系</title>
</head>
并列关系：
<head></head>
有时候又叫——兄弟关系
<body></body>
总结
1.以上三个代码vscode自动生成，基本不需要我们重写.
2. <! DOCTYPE html>文档类型声明标签 ,告诉浏览器这个页面采取htm15版本来显示页面.
3. <html lang= "en” >告诉浏览器或者搜索引|擎这是一个英文网站本页面采取英文来显示----中文zh-cN为定义语言为中文
4. <meta charset="UTF-8" />必须写.采取UTF-8来保存文字.如果不写就会乱码.具体原理后面分析.---UTF-8称为：万国码
（包含全世界所有国家要用到的符号）
<!-- 表格标签： -->

标签 描述
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚


作用：主要用于显示、展示数据。
表格的基本语法：
<table border="" cellspacing="" cellpadding="">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>
其中：
<table>表格标签</table>——用于定义表格标签
<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
<th>表头单元格</th>标签表示表头部分、表头部分显示加粗、里面的文字是居中的。
<thead></thead>表示表格的头部区域
<tbody></tbody>表示表格的主题区域
合并单元：
跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
表格会不出现边框，需要给他追加属性：
align left、center、right 规定表格相对周围元素的对其方式
border 1或者"" 规定表格单元格是否拥有边框，默认为""，表示没有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认为1像素
cellspacing 像素值 规定单元格之间的空白，默认为2像素
width 像素值或百分比 规定表格的宽度

<!-- 列表标签： -->
作用：是用来布局的
特点：整齐、整洁、有序、它的布局更加自由和方便。
列表有三大类（无序列表、有序列表、自定义列表）：
无序列表：
<ul>
<li></li>
<li></li>
</ul>
1、无序列表的各个列表项之间没有顺序之分，是并列的
2、<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他的标签或文字的做法是不允许的。
3、<li></li>之间相当于一个容器，可以容纳所有元素。
4、无序列表会带有自己的属性，但使用时我们会使用CSS来设置
有序列表：
<ol>
<li></li>
<li></li>
</ol>
1、<ol></ol>列表可以用数字来显示,<li></li>标签定义列表的项
2、<ol></ol>中只能嵌套<li></li>,直接在<ol></ol>标签中输入其他的标签或文字的做法是不允许的。
3、<li></li>之间相当于一个容器，可以容纳所有元素。
4、有序列表会带有自己的属性，但使用时我们会使用CSS来设置
自定义列表：自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
<dl></dl>标签定义描述的列表（或定义列表），该标签会与<dt>定义项目（名字）</dt>和<dd></dd>（描述每个项目/名字）一起使用。
1、<dl></dl>里面只能包含<dt></dt>和<dd></dd>
2、<dt></dt>和<dd></dd>是没有次数限制的，一般一个<dt></dt>带有多个<dd></dd>

<!-- 表单： -->
表单是用来收集用户信息的
表单域是一个包含表单元素的区域
<form></form>标签用于定义表单域，以实现用户的信息的收集与传递。
<form></form>会把范围内的表单信息提交给服务器
格式：
<form action="url地址" method="提交方式" name="表单域名称">

</form>
action url地址 用于指定接收并处理表单数据的服务器的程序的url地址
method get/post 用于设定表单的提交方式，其中值为get或post
name 名称 用于指定表单的名字，以区分一个页面的多个表单域

表单控件：
<input type="" name="" id="" value="" />输入表单元素-----用于收集用户信息
type可以取的值：
button 定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)。
checkbox 定义复选框。 //名字也要相同
file 定义输入字段和"浏览"按钮，供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。 //想要实现多选用一就要把按钮的名字命名的一样（name=相同）
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。

input的属性：
name 由用户自定义 定义input元素的名称。
value 由用户自定义 规定input元素的值。
checked checked 规定此input元素首次加载时应当被选中。
maxlength 正整数 规定输入字段中的字符的最大长度。

2.页面中的表单元素很多,如何区别不同的表单元素?
答: name属性:当前input表单的名字,后台可以通过这个name属性找到这个表单。页面中的表单很多,
name的主要作用就是用于区别不同的表单。

<laber></laber>标签为input元素定义标注（标签）
<laber></laber>标签用于绑定一个表单元素，当点击<laber></laber>标签内的文本时，浏览器会自动将焦点（光标）
转到或者选择对应的表单元素来增加用户体验
<laber for="sex">男</laber>
<input type="radio" name="sex" id="sex">
核心：<laber></laber>标签for属性应当与相关的id属性相同


<select></select>下拉表单元素

下拉列表
<select></select>在页面中，如果有多个选项让用户选择，并想节约页面空间
<option></option>中定义selected="selected"时，当前选项为默认选中项
结构：
<select>
<option></option>
<option></option>
</select>
<textarea rows="显示的行数" cols="每行中的字符数"></textarea>文本域元素
给body添加一个background属性，并将其值设为图片的路径，即可设定body的背景图片，如下所示：

视频

<video width="800" height="">
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放，点击这里下载视频: <a href="myvideo.webm">下载视频</a>
</video>

​<body background="background.gif">
<body bgcolor="yellow">可以将背景颜色改成黄色
制作电子邮件链接？
<a href="mailto:xxx@yyy">
电子邮件链接的实现也是使用a标签实现的（html中没有mail标签）；
实现电子邮件连接需要将href中的值替换为​mailto:邮箱地址​的形式。

两天时间学习的html的知识笔记的更多相关文章

  1. 如何学习FPGA？FPGA学习必备的基础知识

    如何学习FPGA?FPGA学习必备的基础知识 时间:2013-08-12 来源:eepw 作者: 关键字:FPGA   基础知识       FPGA已成为现今的技术热点之一,无论学生还是工程师都希望 ...

  2. 周末时间学习Linux

    大家都是如何度过周末时光的呢?好多人都认为一周的工作后要好好休息下,于是在家疯狂的补觉,刷剧,打游戏,自我觉得很是正常,工作几天了,休息下不是当然嘛.是的,休息下很正常,但是把周末的时光都用到这些东西 ...

  3. 初步总结javascript中学习DOM之前的知识

    嘿嘿,又到了周末时间,周六其实就是总结这周的学习的,记得周二周三刚开始接触javascript时间,还是不知道怎么学习的,就感觉找不到方向,那时间学习的只是总结了一些简单的定义或者是学习结构,今天就把 ...

  4. PHP用strtotime()函数比较两个时间的大小实例详解

    在PHP开发中,我们经常会对两个时间的大小进行判断,但是,在PHP中,两个时间是不可以直接进行比较,因为时间是由年.月.日.时.分.秒组成的,所以,如果需要将两个时间进行比较的话,我们首先要做的就是将 ...

  5. 掌握AI学习路上核心理论知识，你绝对不能错过这份最全资料包

    人工智能成为当下科技发展的代表之一,持续受到了不少追捧,不管你是否是这一专业的学生或者职场人,学习并掌握一项新潮技能总是不会被同龄人淘汰的.我曾经问过别人.也被别人问过关于学习人工智能(AI)最好的方 ...

  6. 我想立刻辞职，然后闭关学习编程语言，我给自己3个月时间学习C语言！这样行的通吗

    文章背景,回答提问:我想立刻辞职,然后闭关学习编程语言,我给自己3个月时间学习C语言!这样行的通吗? 我的建议是这样:1. 不要辞职.首先说,你对整个开发没有一个简单的了解,或一个系统的入门学习.换句 ...

  7. TestNG学习-001-基础理论知识

    此 文主要讲述用 TestNG 的基础理论知识,TestNG 的特定,编写测试过程三步骤,与 JUnit4+ 的差异,以此使亲对 TestNG 测试框架能够有一个简单的认知. 希望能对初学 TestN ...

  8. 两个容易被忽略的mysql知识

    原文:两个容易被忽略的mysql知识 为什么标题要起这个名字呢?commen sence指的是那些大家都应该知道的事情,但往往大家又会会略这些东西,或者对这些东西一知半解,今天我总结下自己在mysql ...

  9. Android开发学习必备的java知识

    Android开发学习必备的java知识本讲内容:对象.标识符.关键字.变量.常量.字面值.基本数据类型.整数.浮点数.布尔型.字符型.赋值.注释 Java作为一门语言,必然有他的语法规则.学习编程语 ...

随机推荐

  1. 821. Shortest Distance to a Character - LeetCode

    Question 821. Shortest Distance to a Character Solution 思路:遍历字符串S,遇到与字符C相等就分别向左/右计算其他字符与该字符的距离,如果其他字 ...

  2. 141_Power Query之获取钉钉审批流自动刷新Power BI报告

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 钉钉办公给很多企业带来了很多方便,比如审批流线上化,通用化.线上化填写后,数据自动获取又是一个硬伤了,虽然数据可 ...

  3. 浅析kubernetes中client-go Informer

    之前了解了client-go中的架构设计,也就是 tools/cache 下面的一些概念,那么下面将对informer进行分析 Controller 在client-go informer架构中存在一 ...

  4. Django虚拟环境详解

    Django虚拟环境之 Virtualenv 1.安装 pip install virtualenv 2.创建虚拟环境 创建虚拟环境文件夹在当前目录 virtualenv [env_name] 3.激 ...

  5. 《HALCON数字图像处理》第五章笔记

    目录 第五章 图像运算 图像的代数运算 加法运算 图像减法 图像乘法 图像除法 图像逻辑运算(位操作) 图像的几何变换 图像几何变换的一般表达式 仿射变换 投影变换 灰度插值 图像校正 我在Gitee ...

  6. MVC - forward 和 redirect 的区别

    MVC - forward 和 redirect 的区别 forward是服务器请求资源,服务器直接访问目标地址的URL,把那个URL的响应内容读取过来,然后把这些内容再发给浏览器,浏览器根本不知道服 ...

  7. 开发工具-SVG占位图片

    更新日志 2022年6月10日 初始化链接. https://toolb.cn/imageholder

  8. JVM学习笔记-从底层了解程序运行(一)

    1:JVM基础知识 什么是JVM 1. java虚拟机,跨语言的平台,实现java跨平台 2. 可以实现多种语言跨平台,只要该语言可以编译成.class文件 3. 解释执行.class文件 java是 ...

  9. 关于react的props你需要知道的一个简单方法

    //注意一点:函数名必须大写 function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h ...

  10. 多台云服务器的 Kubernetes 集群搭建

    环境 两台或多台腾讯云服务器(本人搭建用了两台),都是 CentOs 7.6, master 节点:服务器为 4C8G,公网 IP:124.222.61.xxx node1节点:服务器为 4C4G,公 ...