目录
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