坚持努力背

特殊字符：
空格符  
< 小于号 &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. SpirngBoot 错误(1)

    对于出现该错: Error starting ApplicationContext. To display the conditions report re-run your application ...

  2. 前端获取cookie，并解析cookie成JSON对象

    getCookie() { let strcookie = document.cookie; //获取cookie字符串 let arrcookie = strcookie.split("; ...

  3. 详解TCP四次挥手（断开TCP连接过程）

    在讲述TCP四次挥手,即断开TCP连接的过程之前,需要先介绍一下TCP协议的包结构. TCP协议包结构: 这里只对涉及到四次挥手过程的字段做解释 (1) 序号(Sequence number) 我们通 ...

  4. SQL中如何修改数据库名、表名、列名？

    文章目录 1.SQL中如何修改数据库的名字? 2.SQL中如何修改表的名字? 3.SQL中如何修改列的名字? 4.SQL中如何修改列的数据类型?(未完成,待续) 1.SQL中如何修改数据库名? 语法 ...

  5. Django从数据库导model迁移乱码

    python manage.py inspectdb > [your app name]\models.py 执行后 model.py乱码,将models.py以 UTF-16LE打开.

  6. （win环境）使用Electron打造一个桌面应用翻译小工具

    初始化项目 npm init 修改package.json {"name": "trans","version": "1.0.0& ...

  7. 【题解】Educational Codeforces Round 82

    比较菜只有 A ~ E A.Erasing Zeroes 题目描述: 原题面 题目分析: 使得所有的 \(1\) 连续也就是所有的 \(1\) 中间的 \(0\) 全部去掉,也就是可以理解为第一个 \ ...

  8. NC207040 丢手绢

    NC207040 丢手绢 题目 题目描述 "丢丢丢手绢,轻轻地放在小朋友的后面,大家不要告诉她,快点快点抓住她,快点快点抓住她." 牛客幼儿园的小朋友们围成了一个圆圈准备玩丢手绢的 ...

  9. 强化学习-学习笔记8 | Q-learning

    上一篇笔记认识了Sarsa,可以用来训练动作价值函数\(Q_\pi\):本篇来学习Q-Learning,这是另一种 TD 算法,用来学习 最优动作价值函数 Q-star,这就是之前价值学习中用来训练 ...

  10. RS485 MODBUS RTU通信协议

    1.RS485接口标准 RS485由RS232和RS422发展而来,弥补了抗干扰能力差.通信距离短.速率低的缺点,增加了多点.双向通信能力,即允许多个发送器连接在同一条主线上,同时增加了发送器的驱动能 ...