前端基础学习
html
- html是什么？超文本标记语言
- 作用？网页的结构
- 如何使用？标签
html发展史
html1.0 - html2.0- html3.0-html4.0-xhtml1.0 =》html5.0
- XHTML（x:可扩展）
- XML：可扩展标记语言
html4.0与xhtml1.0的区别：xhtml1.0对于语言更见严格
语法规则：
- 标签与属性都小写
- 标签必须闭合
- 属性=“值”，不能简写
- 标签的顺序要一致
后缀名
- .html
- .htm（DOS操作系统最开始只识别3位后缀）
- .shtml（包换SHH的指令）
术语
- 元素：一个整体
- 标签：标签名称
- 属性：对标签的一些附加描述
如何学习HTML（整体上）
- 标签的用途（含义）
- 标签在浏览器中的默认样式
基本结结构
<!doctype html>
<html>
<head>
<title>这是我的第一个网页</titile>
<meta charset="utf-8"/>
</head>
<body>
哈哈哈
</body>
</html>
- head：结构头部，主要定义网页的信息
- body：网页的具体内容
- doctype:定义文档类型，引用DTD（文档类型定义）参考文件
html5为什么不用指定dtd文件？
- DTD三种类型：
- S（strict）：严格型
- T：过渡型
- F：框架型
标签类型
- 单标签
- 双标签
基本标签（标记）
- 标题：
<h1></h1>....<h6></h6> - 段落：
<p></p> - 强调(加粗)：
<strong></strong> - 倾斜：
<em></em>:强调 - 换行：
<br> - 水平换：
<hr/> - 地址标签：
<address></address> - 短引用：
<q></q>：自动添加双引号 - 长引用：
<blockquote></blockquote>：自动换行- 缩减 - 预格式化文本：
<pre></pre>：源文件是什么样式浏览器就显示什么样式
样式标签已经取消如:加粗的<b></b><i></i>，font
网页由：结构（HTML&XHTML，样式（CSS），行为（Javascript）组成，其原则是结构、样式、行为分离
注：语义化（方便搜索引擎了解网页）
基础标签2
- 图片
<img src=" " height=" " width=" " />- src（路径）:
- 绝对路径
- 相对路径：
- ./表示当前路径
- …/表示返回上一级目录
- 最开始的/:表示根目录
- 文件夹名后面的/：对应文件夹的下一级
- height：高度
- width：宽度
- alt：替换文本，图片路径不正常时，才显示
- title：标题，鼠标悬停时显示
- src（路径）:
- 超链接
<a href="链接地址" target="目标"></a>- href：链接地址
- 绝对路径：只能以文件的形式才能打开，不能以服务的形式打开
- 相对路径
- 三类：
- 页面链接
- 锚点链接
- 同一页面锚点
<a href="#锚点名" target="目标" ></a> - 不同页面锚点
<a href="页面链接#锚点名" target="目标" ></a>
- 同一页面锚点
- 功能链接
<a href="mailto:xxx.qq.com" >xxx.qq.com</a>
- href：链接地址
列表
- 无序列表 unorder list
<ul><li></li></ul>
默认实心圆
type：circle：空心圆
square：实心方块 - 有序列表 order list
<ol><li></li></ol>
注：li不能单独使用
type：默认是数字（ i | I | A | a ) - 定义列表 define list
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
表格
-
table 表格，
属性：- border，边框；
- width，宽度
- cellspacing，单元格之间的空隙
- height，高度
- align，文字水平位置
- valign，文字垂直位置
- colspan，跨列
- rowspan，跨行
-
td 列
-
tr 行
-
扩展：
- caption
- thead
- tbody
- tfoot
特殊实体（字符）
- 大于>：
> - 小于<：
< - 空格符 ：
- 双引号"：
" - 版本号©：
©
结构标签
<div>：块，相当于一个容器，存储元素。
html5：结构标签<header>：页头<footer>：底部<section>：章节<aside>：侧边栏<figure>：一组媒体对象及文字<figcaption>：表示figure的标题
非结构性，见名知义
<article>：文章
见名知义：SEO（搜索引擎优化）
页面布局：划分结构、写备注、标签见名知意
表单
表单的作业
采集和提交用户信息
创建表单
定义表单，让浏览器知道这是一个表单结构
<form action="提交的地址" method="get|post">
</form>
提交方式method
get：数据显示在url（统一资源定位符）上面。有大小限制，一般不超过2kb。
post：数据放在网页的头部，通过network查看，相对安全一点。没有大小限制。
表单元素
输入框
<input/>
type：值不同
- 文本框text:
- value值
- size设置输入框的长度
- max
- minlength
- 密码框password：
- 单选框radio：
- 注：同一组单选框使用一个name
- 复选框checked：
- 注：同一组复选框使用一个name
- 隐藏域（针对用户隐藏）hidden：
- 文件域file：
注意:
1. 表单中有文件域，必须使用post提交
2. 表单的编码，必须设置成enctype=“multipart/formdata”,默认编码：enctype=“application/x-ww-form-urlencode” - h5中在type里加了：number、data、color、
下拉列表
<select name="">
<option value="值">用户看到的</option>
<option></option>
</select>
注：选中属性：selected=“selected”
选中多行：multiple=“multiple”
显示个数：size=“数量”
多行文本框
<textarea name="" id="" rows="行数" cols="列数"></textarea>
按钮
<button name="" id="" ></button>
type：
- 重置按钮reset：将表单元素制为初始值
- 普通按钮button
- 提交按钮submit
- 图片按钮image 注意：图片按钮具有提交功能
- h5添加了一个button按钮
默认：type：submit提交按钮，还可以为button，reset
html分类
div与span
两个标签没有任何含义
div：容器
span：范围，跨度（文字的范围）
元素的分类
- 块级元素：不管内容多少，都独占一行
- 行内（内联）元素：内容有多少就显示多少，只有一行不够显示，才换行显示
总结：- 块级元素：p、h1-h6
- 行内元素：a、strong
元素嵌套规则： - 内联元素不能嵌套块级元素
- 块级元素与块级元素并列，内联元素与内联元素并列
表单高级应用
表单的属性
- 只读属性 readonly=“readonly” 一般与文本框结合使用
- 禁用属性 disable=“disable” 一般与按钮，文本框结合使用
域标签
<fieldset></fieldset>- 域标题
<legend></legend>
文本标签
<label></label>
功能：文本标注
<label for="标注的标签ID"></label>
元素name与id属性的区别
同一个页面：name可以相同，而id必须唯一
属性的分类
- 共有属性（一般属性）name、id、class、style，所有标签都有的属性
- 特殊属性：只有对应的标签才有的特殊属性
- 自定义属性：用户可以根据自己的情况，自己定义属性
注：自定义属性一般都以"data-"开头
音频，视频标签
- h5：音频
<audio></audio>视频<video></video>
3893
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
