前端三剑客-03html
一丶什么是HTML
写网页的一套标准
二丶HTML注释
注释是代码之母
<!--单行注释-->
<!--
多行注释
多行注释
-->
一般情况下 html的注释都会按照下面的方式书写
<!--导航条样式开始-->
<!--导航条样式结束-->
三丶HTML文档结构
<html>
<head></head>:head内的标签 不是用来展示给用户看的 而是定义一些配置 主要是给浏览器看的
<body></body>:body内的标签 就是浏览器展示给用户看的内容
</html>
四丶标签分类
1.双标签(
)2.单标签(自闭和标签
五丶head内常用标签
-
title用来显示网页标题
-
style用来控制样式的 内部支持写css代码
-
script内部支持写js代码 也支持导入外界的js文件
-
link专门用来引入外部的css文件
-
meta定义网页原信息
提供网页的元信息
位于文档的头部
用户不可见
六丶标签的分类
- 块儿级标签(独占浏览器一行)
div p h
1.块儿级标签可以修改长宽
2.块儿级标签内部可以嵌套任意的块级标签
是p标签虽然是块儿级标签 但是他不能够其他块儿级标签 包括自身可以嵌套行内标签- 总结:
只要是块儿级标签 都可以嵌套行内标签
p标签只能嵌套行内 其他块儿级可以嵌套任意的块儿级标签
- 总结:
- 行内标签(自身文本多大就占多大)
span b s i u
七丶标签的三个重要属性
- id值 该值就类似于人的身份证号 在用一个html文档id应该保证唯一不重复
- class值 该值就类似于面向对象里面的继承 可以写多个
- style(不是必备) 支持在标签内直接写css代码 属于行内样式 优先级最高
补充 任何标签都支持自定义属性!!!
八丶body内常用标签
8.1基本标签
h标签:标题标签
p标签:段落标签
8.2符号标签
| 内容 | 对应代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
8.3常用标签
div标签
span标签
div标签和span标签
div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
p标签
p标签只能嵌套行内 其他块儿级可以嵌套任意的块儿级标签
img标签
- src 存放的是图片的路径(本地或者往上)
- alt 当图片加载不出来的时候,显示的提示信息
- title 当鼠标悬浮在图片上,提示的信息
- heght , width 当你只指定一个参数的时候 另外一个会等比例缩放
a标签
超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
-
href后面存放url的时候, 点击跳转到该url
-
target默认是_self当前页面跳转
_blank新建页面跳转
-
锚点功能(回到顶部)
href还可以写另一个a标签的id值,点击就会跳到id值所对应的a标签
列表相关标签
1.无序列表(记忆方法:uniform)
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
2.有序列表(记忆方法:order)
<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>
type属性：
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
3.标题列表(记忆方法:describle)
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
表格标签
1.语法:
大致结构体:
<table>
<thead></thead>
<tbody></tbody>
</table>
完整列子:
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>杠娘</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>日天</td>
</tr>
</tbody>
</table>
记忆方法:
tr表示一行
th和td都是文本
建议在thead内用th
tbody内用td
2.属性
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格）
form表单标签
1.功能
能够接收用户输入(输入 选择 上传)并将其发送给后端
2.表单属性
这边列几个常用熟悉
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。为了实现传文件 添加enctype="multipart/form-data" |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。改为post |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
3.action控制数据提交的目的地
1.不写的情况下 默认提交到当前页面所在的路径
2.写全路径(https://www.baidu.com)
3.路径后缀(/index/)
4.form注意点
form表单默认是get请求 你需要通过method参数 换成post提交
form表单中 要想触发提交动作
只有两种情况可以
1.input标签type指定成submit
2.直接写button标签
获取用户输入(输入 选择 上传...)的标签 都必须有一个name属性
这个name属性就类似于字典的key,而标签获取到的用户写入的值就类似于字典的value
<input type="text" id="d1" name="username" value="默认值">
name就相当于是字典的key
value就是字典的值
获取的用户输入都会被放入value属性中
form表单传文件的时候 需要指定enctype参数
input标签
input标签就类似于是前端变形金刚
1.属性type:
- text:普通文本
- password:密文 不展示明文
- date:日期
- submit:触发提交动作
- button:普通按钮 没有实际意义 但是可以通过js绑定事件实现自定义动作
- reset:重置表单内容
- radio:单选 可以通过checked控制默认选择(当属性值和属性名相同的情况下 可以简写 checked)
- checked="checked"
- checkbox:多选 同上 可以设置默认值
- file:获取用户上传的文件
- hidden:隐藏输入框
- file:文本选择框
2.属性说明:
- name：表单提交时的“键”，注意和id的区别
- value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
- checked：radio和checkbox默认被选中的项
- readonly：text和password设置只读, 推荐用disabled!!
- disabled：所有input均适用,使之无法修改,相较readonly推荐用它!!
select标签
- 默认是单选 可以通过multiple变成多选
- 想默认选择 用selected (selected="selected")
textarea标签
获取用户输入的大段文本
label标签
定义：
- label 标签为 input 元素定义标注（标记）。
属性:
- label 元素不会向用户呈现任何特殊效果。
- **label **标签的 for 属性值应当与相关元素的 id 属性值相同
作用:
label会和嵌套里面的标签进行绑定,比如input,当点击除了input标签输入框外的文字时候,呈现可输入文本内容状态
九丶emmet插件
双标签自动修改就是靠它实现的,功能强大
十丶防呆措施
所有软件都要把用户当完全不懂来看,傻瓜式操作,一步一步都限制死了.
