初识HTML流水笔记

html概述

中文全称：超文本标记语言。
不是一种编程语言，是标记语言。
标记语言是一套标记标签。
HTML 使用标记标签来描述网页。

HTML，css，javaScript三者的关系
网页主要由三部门组成：结构、表现和行为。
HTML---结构，决定网页的结构和内容。
css---表现，设定网页的表现样式。
JavaScript（JS）---行为，控制网页的行为。

开发工具
1、webStorm（web前端）
2、Subline Text 代码编辑器
3、HBuilder（HTML5的web开发IDE）
4、eclipse(集成开发环境)
5、Visual studio（简称vs，微软的开发工具集）
6、记事本---需要更改后缀名为.html，且将格式改成utf-8。

HTML标签基本语法
1、基本的语法：
<p> </p>
<开始标签>内容</结束标签>
2、标签通常用<>包围关键字，且成对使用，有一个开始标签就对应有一个结束标签，结束标签只是在开头标签的前面加一个斜杠“/”
特殊：<img scr="" alt="" />空标签
3、在元素的开始标签中，还可以包含“属性”来表示元素的其他特性，它的格式是：
<p style="color:red;"></p>
color:属性名
red：属性值

4、属性只能写在开始标签中。

HTML注释
注释内容可插入文本中任何位置，其内容不在网页中显示，只在源码文档中供备注使用，方便程序员自己和他人查看。






 方法适用于文档主体部分（body）

//注释内容
/* 注释内容 */ 方法适用于文档引用标签部分
快捷键：ctrl+“/”

HTML注意事项
1、所有标签的元素和属性的名字都必须使用小写
2、所有的属性必须用双引号“”括起来，如属性值本身就含有双引号
3、文件的扩展名要以.html结束
4、任何空格和回车在代码中都无效，插入空格或回车有专用的标记。分别是&nbsp、<br>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>

doctype三种解析模式
IE 准标准模式
标准模式
混杂模式（非标准）

doctype：声明，文档类型，用哪种解析方式
html：html文档，也就是网页
head：所有头部元素的容器，如<title>.<link>.<meta>.<script>.<style>等
title：
1.定义浏览器工具栏中的标题。
2.提供页面被添加到收藏夹时显示的标题。
3.显示在搜索引擎结果中的页面标题。

meta：描述文档（作者或编辑软件），或定义文档的关键词，或重定向用户到新的网址，此处是设置编码格式，否则为乱码，不会显示在页面上。
body：网页内容的主体部分。所有的标签都应该写在这里面。

锚点（回到顶部）
1、创建锚点
2、指向锚点

from表单

输入框

input type=“text”

<form action="#" method="post或get">------get安全性低，速度快，显示用户信息。 post安全性高，速度慢，不显示用户信息。
用户名：<input class="username" id="username1" name="username2" type="text"---------------------------class常用于html，css

readonly="readonly">
密码：<input name="password" type="password" placeholder="请输入密码">---------------------id常用于js---------name常用于交互时（供后台）
<input type="button" value="登录">
<input type="submit">--------------自带提交功能
<button>我是一个按钮</button>

单选框

在操作时他的type必须一样可以设置多个选项

<span style=" 100px;height: 100px;border: 1px solid red;font-size: 100px">我是格一个span</span>
<strong>我是一个srtong</strong>

<div style=" 500px;height: 500px;border: 1px solid red">我是一个盒子</div>
<img src="图片名称.png" alt="">f
<input type="text">用户名

</form>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<table border="1" cellspacing="10px" cellpadding="20px"---单元格内边距 align="center"----表格内容对齐方式 style="border-collapse:collapse"----合并表格边框>
<caption>学生管理表</caption>
<tr>
<th>Heading</th>
<th>Another Heading</th>-------表示表格的列标题
<th>非得给第三</th>
</tr>--------------------------表示行（row）
<tr>
<td colspan="2">1-1</td>----表示列，单元格

<td>1-3</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>

<td>3-2</td>
<td>3-3</td>
</tr>

</table>

</body>
</html>
colspan="2"列上两个单元格合并，占用相邻单元格的空间。
rowspan="2"行上两个单元格合并，占用相邻行上同位置单元格的空间。

表格的语义化，thead页眉，tbody主体内容，tfoot页脚。

placeholder：提供一种提示，描述输入域所期待的值。

块级元素有：div、表单、表格、标题、段落等。
行内元素有：图片，输入框、span、strong等。
两者的区别：
块级元素特点：
1、块级元素比较霸道，总是独占一行。
2、具有一定的宽高。其宽高与内容无关。
3、常用作容器，可以容纳行内元素和其他块级元素。

行内元素特点：
1、和其他行内元素都在一行上。
2、其宽高只与内容有关。
3、行内元素只能容纳文本或者其他行内元素，无法容纳块级元素。
4、内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用。