Html入门
前端
前端开发是创建web页面或app等前端页面呈现给用户看的过程，通过HTML,CSS,及JavaScript以及衍生出来的各种技术
框架解决方案等来实现互联网产品和用户界面的交互。
前端三板斧
- HTML 超文本标记语言
html描述了一个网站的结构，是一种标记语言而非编程语言
浏览器使用html标签和脚本来诠释网页内容 - CSS 层叠样式表
主要职能就是确定布局和元素的表现
css不能单独使用 - JavaScript (JS,高级的，解释型的编程语言)
支持面向对象编程，命令式编程，函数式编程
与java不同
Html元素的结构
html标签
- 由尖括号包围关键词组成，比如：
,
,
- 通常成对出现，一个开始一个结尾，结尾比开始多/，比如：
,
- 并不是所有的标签都有结尾标签，比如：
,![]()
等，都是单独出现的
- html标签中大小写不敏感，但是一般要求小写
剖析一个html元素，可以看到一般由
开始标签，内容，结尾标签组成
如果是单独出现的标签，一个标签就是一个元素
html中的嵌套
html中的元素可以嵌套
HTML是一门伟大的语言！
完整的html文档结构
-
- 告知浏览器该页面文件的文档类型，指示浏览器该用html的哪个版本编写
- 位于文档第一行
- 对大小写不敏感，没有结束标签
...
- 告知浏览器该文档是html文档
- 限定文档的开始和结尾，在他们之间是文档的头部和主体，头部由
- lang属性(语言属性)，当搜索引擎或浏览器拿到语言属性时可能做一些针对语言属性的辅助操作，"en"表示英语
- 标签属性
- 一个标签可以拥有零个或多个标签属性
- 标签属性采用
key="value"
- 常见标签属性： class,id,style,lang,src等
- 文档的头部
- head元素定义文档的头部，我们通常在这里引用样式表，提供元信息等
- 文档头部中的
...
- 一个head 元素必须且只能包含一个title元素
- 文档主体
- 包括文档的所有内容（图片，文字，超链接等）
html文档中的注释
表示注释，不会显示
MDN
MDN网站
图片![]()
音频
块状标签和内联标签
内联标签常常嵌套在块状标签中
- 内联标签不会为自己的内容占据新的一行
![]()
- 块状标签会为自己的内容占据新的一行
段落：，
标签标题
尽量不要跨级别写标签
常用文本标签
段落标签
内联标签
加粗，
行内标签，包含的内容具有重要性
内联标签
本身如果没有加样式处理，就不会有变化，而且span可以使网页更加有条理
图片标签![]()
url是图片地址，绝对地址或相对地址，也可以是gif文件，alt是替换文字
链接标签
wenzi
里面不仅能放文字，还能是图片等
属性：
- href是链接指向的地址
- title属性给出链接的说明信息
鼠标悬停在链接上方时，浏览器将这个属性的值以提示块的形式显示出来
- target属性指定如何展示打开的链接
target属性的值可以是"_self","_blank","_parent","_top"之一
self是当前页面打开，blank是新页面打开
列表标签
- 无序列表标签
- 有序列表标签
- 列表每一项内容用标签
html表单标签
form块状标签
- 属性
action 一个处理此表单信息的程序所在的url，所述表单信息将在表单提交时被发送到定义的地址
method 它的值可以是GET或POST，用来规定如何发送表单信息
单行文本输入框
没有结束标签
属性：
type
占位文本placeholder
输入框名字name
输入框的值value
readonly只读
disabled无法更改
disabled和readonly的区别
多行文本输入框和密码输入框
- 用
rows和cols表示文本框的行数和文本域的可视宽度
右下角的斜线拖动可改变文本框的大小
- 密码输入框
密码输入框输入的内容会变成小黑点
只需将type = "text" 改为type = "password"
单选框和复选框
- 单选框
单选框就是把控件类型type = "text"改为了type = "radio"
大部分表单类型就是通过改标签属性type实现的
同一道单选题的单选选项应该具有相同的name属性值
在input标签后直接加内容可以显示
但是普通的只能点击圆点进行选择，要将选择范围变大可以用
另一种写法,增加了id属性，label的for属性和input的id属性应该保持一致
s
- 复选框
复选框的标签属性是checkbox
再配合name，value，label等
选项菜单(下拉菜单)
- 默认单选
例：
- 多选菜单
给select添加multiple属性
按住ctrl或者菜单进行多选
按钮
用
button标签是闭合标签所以之间的内容可以放图片，文字等
这个按钮放在form中点击会自动提交表单数据，但是在button中提交表单数据会有浏览器兼容的问题
所以会加上type= "submit"来确保数据的提交
完整的注册表单
input标签小结
相关