web前端笔记1：html入门

今天开始学习前端，这个主要是参加百度ife的笔记。记笔记方便自己，也给其他自学的同学一个参考。
任务一：零基础HTML编码

学习的资料均在上面链接中有，我在这里也贴一下

• Web相关名词通俗解释
• MDN HTML入门
• 慕课HTML+CSS基础教程视频

而这篇既然叫笔记，也就是简单记录方便我回顾，毕竟只学一遍是容易忘记的。因为任务一只是html学习，慕课网的教程先学完前五章便可，后面的在任务二的时候再学习。

Web相关名词

1. html 一种标记语言，用来告诉浏览器应该怎样显示内容，如 这样来告诉浏览器显示图片，还有其他的文字、表格。按钮等
2. css 用来规定显示的样式，也就是如何排版和字体颜色等改变显示内容让页面变得美观。
3. JavaScript 一种脚本语言，主要用于实现一些动态效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变

html入门

• 标签的语法 标签由英文尖括号<和>括起来，如就是一个标签。html中的标签一般都是成对出现的，分 开始标签 和 结束标签 。结束标签比开始标签多了一个/。标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：

  里嵌套

  ，那么

  必须放在
  的前面。如下图所示。另外html不区分大小写，一般建议用小写。

• html文档结构
  固定式如下。head为头部，body为主要内容。

    ...
    ...

• head标签 可以有如下内容

• 注释 ``

• body标签相关

名称	代码	说明
段落	段落文字	-
标题	一级标题	二级标题用h2，依此类推,共6级
斜体	要斜体的文字	-
粗体	要粗体的文字	-
单独样式	要设置样式的文字	-
短文本引用	引用文本	被引用的文本不加双引号
长段文本引用	引用文本	被引用的文本不加双引号
换行		html中是忽略回车和空格的
空格		同上，要有分号
水平分隔横线		-
地址	北京	-
单行代码	...	-
多行代码	代码段	-
-	-	-
无序列表	信息 信息	前面带小圆点
有序列表	信息 信息	前面带数字编号
容器		将元素组成一个单独的逻辑部分
链接	博客	target那个表示在新标签页中打开链接，title为鼠标移动到链接处浮现的说明
图片		-

• mailto
  看这里的图

• 表格

成绩单
  

    

      
班级
      
学生数
      
平均成绩
    
    

      
一班
      
30
      
89
    
    

      
二班
      
35
      
85
    
    

        
三班
        
32
        
80
    
  

…标签后，这个表格就要等表格内容全部下载完才会显示。…

标题文本

…	表格的开始和结束，定义全在中间
当表格内容非常多时，表格会下载一点显示一点，但如果加上
表格的一行，所以有几对 tr 表格就有几行。
	…	表格的一个单元格，一行中包含几对	说明一行中就有几列。表格中列的个数，取决于一行中数据单元格的个数
	…	表格的头部的一个单元格，表格表头
表格标题
	表格样式：加上边框

• 表单和控件

1.form 标签是成对出现的，以开始，以结束。
2.action 浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method 数据传送的方式（get/post）。

控件名	代码	说明
文本输入框		-
密码输入框		-
文本区域	文本	-
复选框		-
单选框		name要一致
下拉选择框	看书旅游	设置multiple后可以按住ctrl多选
提交按钮		-
重置按钮		-
文本	显示内容	for表示是哪个控件的描述文本