目录
HTML学习笔记1
开发工具
使用 Webstom：https://www.jetbrains.com/webstorm/
常用快捷键：
- Ctrl + /?（右shift键左边的那个键） ：快速注释选中行
- Ctrl + D：复制当前行到下一行
- 输入标签后按Tab，自动生成带尖括号的代码
基本概念
-
浏览器
概念：浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件。
个人学习时使用的浏览器：Google Chrome
Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
-
web标准
WEB标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。
结构（Structure）：html
表现（Presentation）：css
行为（Behavior）：js（dom + es）
-
html简介
HTML 是用来描述网页的一种超文本标记语言(Hyper Text Markup Language)，属于标记语言，而非编程语言。
常包含三部分：
声明：DOCTYPE声明（区分是html5、html4还是xhtml）
然后是<html>标签，在其内有
头部：<head></head>
主体：<body></body>
常用标签
meta
meta：单标签，charest属性 设置字符编码
name属性 keywords 可以设置关键字 description可以设置描述
其后一般跟content属性 设置关键字的内容或者描述的内容
<meta charset="UTF-8">
<meta name="keywords" content="牙疼，牙痛">
<meta name="description" content="有牙齿问题，找河马牙医">title
title：双标签，定义文档的标题；浏览器标签显示的标签。
<title>河马牙医</title>
以上两个标签都位于head内。
h1..6
hi(i=1,2,3,4,5,6)：双标签，定义标题，1-6的区别是标题的大小不一样，h1最大，h6最小，可以理解为h1是一级标题，h2是二级标题
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>
p
p：双标签，定义段落
<p>人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器。本课程包括视觉方向和机器学习方向，在学习过程中，除针对知识点的编程作业之外，还提供了大量工业应用案例数据集，使学员能够积累丰富的工业实战经验。</p>
<p>本课程系统地介绍了传统机器学习领域的经典模型，原理及应用。并初步介绍深度神经网络领域的一些基础知识。针对重点内容进行深入讲解，并通过习题和编程练习，让学员掌握工业上最常用的技能。除针对知识点的编程作业，还提供大量工业应用案例数据集，使学员能够积累丰富的工业实战经验。</p>
hr、br
hr：单标签，定义一条水平的切割线
br：单标签，定义换行
<!----!>
<!----!>：注释语句
<!--这是注释标签-->
<!--
可以换行
-->img
<img src="image/示例图片01.png" alt="图片加载不出来时就会显示我" title="鼠标在图片上悬停会显示我" width="40%">a
a：双标签，超链接标签；
属性：
- herf 属性 规定链接指向的页面的 URL。
- target 属性 target="_self" 原窗口打开超链接；target="_blank" 新窗口打开超链接。
<a href="http://www.baidu.com" target="_blank"><!--以跳转百度为例，target为在新窗口中打开-->锚点跳转
在同一个页面当中,可以设置标记.通过a链接,跳转到指定的标记
<a href="#id标记名称">to div1</a>
<a href="#one">早年经历</a>
<p id="one">在sql_mode中加入STRICT_TRANS_TABLES则表示开启严格模式，如没有加入则表示非严格模式，修改后重启mysql即可</p>
此时，点击早年经历就会跳转到下方的 p 标签处。
列表标签
均为双标签，分为无序列表（ul）、有序列表（ol）和定义列表（dl）。
ul 有type属性，可以设置 item 前的符号样式。
<!--无序列表-->
<ul type="circle">
<!--外层是 unorder list-->
<!--内层是list item-->
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<!--有序列表-->
<ol>
<!--外层是 有序列表order list-->
<!--内层是list item-->
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
<!--定义列表-->
<dl>
<dt>标题</dt>
<dd>我就是个弟弟</dd>
<dd>我也是个弟弟</dd>
<dt>我又是一个标题</dt>
<dd>我是这个标题的弟弟</dd>
</dl>
表单标签
此部分有许多标签：
<form> 定义供用户输入的 HTML 表单。
<input> 定义输入控件。
<textarea> 定义多行的文本输入控件。
<select> 定义选择列表（下拉列表）。
<option> 定义选择列表中的选项。
<label> 定义 input 元素的标注。
<form action="https://www.csdn.net/">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名"><br><br>
<label>密 码：</label>
<input type="password" placeholder="请输入密码"><br><br>
<label>个人介绍</label>
<textarea name="intro" cols="30" rows="10"></textarea>
<br>
<br>
<label>性 别：</label>
<select name="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
<br>
<br>
<input type="submit" value="提交">
</form>
密码的文本框输入内容后为密文形式（即****）；
性别可以下拉，选取男/女；
提交之后会跳转到csdn首页，在 form 的 action 属性可以设置跳转页面。
总结一下：输入用 input，密码改 type 为password，提交按钮改 type 为submit； 文字标注用 label；下拉选择用 select，选项用 option；多行文本用 textarea。
节
定义文档中的节，也是万能标签；双标签，div 划分较大的区块，span 划分较小的区块
参考内容：
https://study.163.com/course/courseMain.htm?courseId=1006399046