前端三剑客-03html

时间 2019-11-30

标签前端剑客 03html html 栏目 HTML 繁體版

原文原文链接

一丶什么是HTML

写网页的一套标准css

二丶HTML注释

注释是代码之母html

<!--单行注释-->

<!--

多行注释

多行注释

-->

通常状况下 html的注释都会按照下面的方式书写
<!--导航条样式开始-->

<!--导航条样式结束-->

三丶HTML文档结构

<html>
<head></head>:head内的标签 不是用来展现给用户看的  而是定义一些配置 主要是给浏览器看的
<body></body>:body内的标签 就是浏览器展现给用户看的内容
</html>

四丶标签分类

1.双标签(前端

)
2.单标签(自闭和标签

)

五丶head内经常使用标签

title用来显示网页标题后端
style用来控制样式的内部支持写css代码浏览器
script内部支持写js代码也支持导入外界的js文件post
link专门用来引入外部的css文件编码
meta定义网页原信息url

提供网页的元信息spa

位于文档的头部插件

用户不可见

六丶标签的分类

块儿级标签(独占浏览器一行)
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插件

双标签自动修改就是靠它实现的,功能强大

十丶防呆措施

全部软件都要把用户当彻底不懂来看,傻瓜式操做,一步一步都限制死了.