html学习笔记

HTML CSS Js

HTML是什么？
百度百科：https://baike.baidu.com/item/HTML/97049
总结：“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言。HTML是用来开发网页的。（网页后缀 html，htm）html是标记语言不是编程语言。

超文本：超级文本，比文本更加牛逼，可以更加丰富的呈现文字信息。
标记：也叫做标签，这个是html里面的一个基本语法，所有的结构都是通过标记来控制的。

为什么学习HTML？
HTML网页开发在JavaEE开发中的承担的部分。（网页设计师+JavaEE工程师）
在团队中会有专门的人，做网页开发，那我们为什么还需要学习HTML？虽然我们不需要能够开发精美的网页，因为我们需要拿到人家开发好的网页，并且能看到人家的网页代码，后后续的开发，所以我们需要掌握HTML和其他网页前端的知识。

本课程的适用对象?
网页零基础入门课程
Web前端工程师
JavaEE工程师
PHP Web工程师
Python Web工程师
.net Web工程师

html xhtml html5

使用什么开发工具？
notepad++
记事本 word sublime dreamweaver

学习方法？
一定要跟着老师练习，不要认为看了一眼简单，就不练了。

遇到不会的单词怎么办？
自己查询词典（有道词典），记录笔记！

html的版本：html xhtml html5
http://www.w3school.com.cn/h.asp

创建第一个HTML文件？
里面显示Hello World。
显示其他内容。

如何更加丰富的控制这个网页？
通过标记

什么是标记？

是开始标记是结束标记，xxx是标记名

标记的语法
成对的标记，必须有开始标记，必须有结束标记。
单个的标记 直接结束，xx是标记名。
不区分大小写
所有标记和标记的属性都是英文输入法
(html的语法不严谨，在很多种情况，下都可以识别出来，
比如大小写，标记里面加空格，不写结束标记
我们编写的时候，尽量严谨一点！)
html语法比较随意，在很多时候，可以自行测试效果。

基本网页结构

身体

文档类型声明

放在第一行

http://www.w3school.com.cn/tags/tag_doctype.asp
网页编码声明

放在head标签里面 (支持中文的utf-8 gbk gb2312)

标题标签
n从1到6，逐渐变小。（加速，行距，单独一样）

注释

水平线

---

换行

段落标签（分段落，自动换行，跟其他段落间距）

预格式标签

标记的属性（可以有多个属性，不分先后顺序）

字体

修饰标签
加粗
倾斜
下标

显示特殊符号
http://www.w3school.com.cn/html/html_entities.asp
 

图片

如果使用百分比的时候，是相对于父容器大小的百分比
alt的作用：http://www.w3school.com.cn/tags/att_img_alt.asp
alt利于搜索引擎的搜索

相对路径和绝对路径
path =
当前路径./xx.jpg
上一级路径…/xx.jpg
上上一级路径…/…/xx.jpg (相对路径就是从当前路径寻找，当前路径只的是当前html所在路径)
下一级路径 xx/xx.jpg
path=“C:\Users\souke\Desktop\web01\01.jpg”
一般在项目中都使用相对路径

w3dschool HTML教程（可以当做字典来查询）
http://www.w3school.com.cn/html/index.asp
可自行搜索w3cschool离线手册

无序列表

• Coffee
• Milk

有序列表

50. 咖啡
51. 牛奶
52. 茶

自定义列表

水果

苹果

香蕉

运动

打篮球

踢足球

超级链接
百度
百度
可以是本机页面，也可以是任意的网页地址(内部链接或者外部链接)
空链接
href="#"
超级链接可以给文字或者图片添加
target
_self _blank _top _parent
title属性
手放在链接上的时候显示的提示文字
name属性
定义锚名称

跳转到锚点
（可以使用某个文字或者某个图片作为锚点，也可以定义一个空的锚点）
href="#锚名"

跳转到别的页面的锚点位置
href=“xxx.html#锚名”

邮件链接
给我发

文件下载
下载 浏览器会根据链接类型，决定是否下载。

空格
 

--------------------------------------------第二章
表格 tr:table row td table data

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

table上的属性 border width height align bgcolor cellspacing cellpadding
tr上的属性 align水平对齐方式 valign垂直对齐方式 bgcolor width height
td上的属性 height bgcolor

表格合并操作
合并多列

row 1, cell 1 合并多行 row 1, cell 1 多列多行合并 row 1, cell 1

商品上月本月销量销售额销量销售额手机100500200400笔记本20045045700

百分比

单元格里面可以嵌套子表格
被嵌套的表格是一个完整的表格
要放在td，某个单元格里面

表格的表头
效果：内容居中，加粗显示
注意：可以有多个表头

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

表格的标题

我的标题

100	200	300
400	500	600

表格的布局
做siki学院的课程页面的布局

如何查看网页源代码
F12调试

------------------------------------------------表单
自己写一遍，有个印象就可以了，不用背不用记，后续遇到了再查询

表单的作用
注册账号
登录账号
发表话题
发表问题
总结：需要输入信息，并提交给服务器的地方
表单的作用就是把用户输入的信息，发送给服务器处理。

表单标签

在表单标签里面可以包含各种其他标签 文本框，文本域，列表，单选框，多选框，按钮...... 上述一个或者多个来组成一个表单

input 输入
textarea 文本域
select 下拉列表
option 下拉列表的项
button 按钮
…

input 可以做文本输入框，按钮，文件，单选按钮，复选按钮

text 文本
password 密码
file 文件
checkbox 多选按钮
radio 单选按钮
button 按钮
submit 提交按钮
reset 重置按钮
hidden 隐藏
image 图片

text和password
其他属性
name 名字
maxlength 最大字符长度
value 默认值
placeholder 提示信息

单选框

复选框

按钮(普通按钮，提交按钮，重置按钮)

图片提交按钮按钮

隐藏域

下拉列表

1 2 3 例子：月份选择，城市选择

文本域

form表单属性
action 提交路径
method get/post传送数据的方式
get直接把要传输的数据放在URL里面，适合传输少量数据，一般用于请求数据，明文传输
post把数据封装到http请求里面，适合传输大量数据和重要数据传输（登录，注册，发表文章）
name 表单名字
target _self _blank
提交一个表单，相当于点击了一个超链接，打开了一个新的网页，不过通过表单的方式请求
网页的时候，这个请求里面是带有数据的。
enctype http://www.w3school.com.cn/tags/att_form_enctype.asp

---------------------------框架

rows上下划分 cols 左右划分 frame的name，可以作为超链接的target（目标） 注意：不能将 标签与 标签同时使用！