从零开始的前端

对于上次学习前端知识已经过去很久了，所有从零开始做一个笔记温故而知新。

HTML(HyperText Markup Language)(超文本标记语言)

html

html结构

这是一个html的文件的基本结构

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>  //给浏览器告知是什么协议
<html lang="en">	//使用什么语言
<head>
    <meta charset="UTF-8">  //编码
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> //移动端
    <title>Document</title>//标题
</head>
<body>
    网站主题
</body>
</html>

虽然h1-h6等等排版标签拥有先置样式，但是可以随意修改，虽然全部标签可以使用div来完成显示需求，但是不推荐，标签拥有语义化的时候能被浏览器所认识，利于SEO搜索引擎检索，方便设备解析。

比如p标签是文章标签

标签类型

  • 块级标签 —>独占一行
  • 行内标签 —>不独占一行

块元素可以写块元素行内标签

行内只能写行内

h1~h6不能嵌套

p中不写块元素

文本标签

标签名 语义
p
em 斜体（着重内容
strong 加粗（重要>em
span 无语义
cite 作品名
dfn 特殊用语
del 删除文本 删除线
ins 下划线 插入文本
sub /sup 下标和上标
code 代码
samp 提取内容，表示设备输出
kbd 键盘输入
abbr 缩写，鼠标触碰会有title显示
bdo 反向标签，dir属性取值ltr和rtl即从左到右和从右到左
var 标记变量，code中嵌套var标记
small 附属细则，版权之类法律的细则
b 摘要中关键字
i 本体人物思想活动，现 图标
u 与正文反差，错字不合适 的描述等等
q 短引用
blockquote 长引用
address 地址信息

图片标签

img

属性 值
src 地址
title 标题
alt 图片描述/
加载不出图片所显示的文本
width 宽度px，vw,em等等
height 高度

网站图标

两种方式

  1. 网站根目录放置``

  2. link

注释

1
<!--注释-->

超链接

<a></a>中间可以放任何数据（图片/文字）点击则跳转页面,可跳转文件，锚点#name的值、#id选择器、甚至是js代码、应用也可以，比如邮件和电话等等

属性 效果
target 跳转方式
_self本页面跳转/默认
_blank新页面跳转
href 跳转的地址
download 无值，启动文件下载模式，可取值默认文件名
name 设置锚点给人跳转

列表

有序列表

  1. 11111
  2. 2222
  3. 333
  4. 444
嵌套
  1. 11111
    2. 222
    1. 22.11
    2. 222.22
    3. 22.333
    4. 22.4444
  3. 333
  4. 333
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<ol>
    <li>11111</li>
     <li>2222</li>
     <li>333</li>
     <li>444</li>
</ol>
嵌套

<ol>
    <li>11111</li>
    <li>
        <ol>222
        <li>22.11</li>
        <li>222.22</li>
        <li>22.333</li>
        <li>22.4444</li>
        </ol>
    </li>
     <li>333</li>
     <li>333</li>
</ol>

无序列表

  • 11111
  • 222
  • 333
  • 444
1
2
3
4
5
6
<ul>
    <li>11111</li>
     <li>222</li>
     <li>333</li>
     <li>444</li>
</ul>

自定义列表

这是标语，类似 1.
这是内容
哈哈哈
这是内容
11111
这是内容
1
2
3
4
5
6
7
8
<dl>
    <dt>这是标语，类似 1.</dt>
    	<dd>这是内容</dd>
     <dt>哈哈哈</dt>
    	<dd>这是内容</dd>
     <dt>11111</dt>
    	<dd>这是内容</dd>
</dl>

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<table border="1px solid">
        <caption>表格标题</caption>
        <thead>
            <!--表格头部-->
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>爱好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>13</td>
                <td>男</td>
                <td>钓鱼</td>
            </tr>
            <!-- 表格内容 -->
            <tr valign="top">//垂直位置  可选bottom/middle
                <td>翁达</td>
                <td>22</td>
                <td>女</td>
                <td>上课</td>
            </tr>
            <tr>
                <td>桐崎千棘</td>
                <td>17</td>
                <td>女</td>
                <td>一条乐</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                
                <td align="right" bgcolor="green" colspan="4">制表人：Kirari</td>
                <!-- rowspan="2"一列两行 -->
            </tr>
            <!-- 表格脚注 -->
        </tfoot>
    </table>
表格标题
姓名 年龄 性别 爱好
小明 13 男 钓鱼
翁达 22 女 上课
桐崎千棘 17 女 一条乐
制表人：Kirari

简单示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table border="1">
  <tr>
    <td rowspan="2">aaa</td>
    <td>bbb</td>
    <td>ccc</td>
  </tr>
  <tr>
    <td>ddd</td>
    <td>eee</td>
  </tr>
  <tr>
    <td>fff</td>
    <td colspan="2">ggg</td>
  </tr>
</table>
aaa bbb ccc
ddd eee
fff ggg

table的属性

  • border

    边框

  • width

    宽度

  • height

    只在body调整高度

  • cellspacing

    单元格间隙，0为无间隙

换行/分割线/按照原来效果显示

<br>

<hr>

<pre></pre>

表单

基本构成:

1
2
3
4
5
6
7
 <form action="./11.html" method="get" target="_self">
<!-- target="_blank" 是新标签页打开 -->
     <!-- mothod get  post -->
       <!-- action  是地址 -->
   <input type="text">
   <input type="submit">
 </form>

get和post的区别
特性 GET POST
目的 从服务器检索数据 向服务器提交数据进行处理
数据传输 数据作为查询参数附加到 URL 中发送 数据在请求体中发送
可见性 数据在 URL 中可见 数据不在 URL 中可见
缓存 可以被浏览器和中间服务器缓存 通常不被浏览器或中间服务器缓存
书签 可以被书签 不能被书签
大小限制 通常限制在 2048 个字符左右 数据大小限制较大
安全性 数据在URL中暴露，不适合传输敏感数据 数据在请求体中，不容易被窥视，较为安全
幂等性 请求应为幂等的 请求可能产生副作用
使用场景 获取数据（如搜索查询、检索用户信息） 提交表单（如登录表单、注册表单）、上传文件，修改数据

文本框和密码框

账号
密码 

1
2
3
4
5
6
7
<form action="https://kiko2568.top" method="get" target="_blank">
       账号 <input type="text" name="user" value="初始值" maxlength="10"><br>
        <!--maxlength 最大长度 -->
        密码<input type="password" name="pwd" value="csz" maxlength="10"><br>
        <input type="submit" value="commit"><br>
        <button>提交</button>
    </form>

单选框和复选框

性别男 女
爱好跑步 唱歌 阅读 跳舞

1
2
3
4
5
6
7
8
9
10
<form action="https://kiko2568.top"  target="_blank">
    性别<input type="radio" value="男" name="sex">男
    <input type="radio" value="女" name="sex" checked>女<br>
    爱好<input type="checkbox" value="跑步" name="habit" checked>跑步
    <input type="checkbox" value="唱歌" name="habit">唱歌
    <input type="checkbox" value="阅读" name="habit">阅读
    <input type="checkbox" value="跳舞" name="habit">跳舞<br>
    <input type="submit" value="commit"><br>
    <button>提交</button>
</form>

checked默认勾选

隐藏域

看不见的input 
1
2
3
4
5
6
<form action="https://kiko2568.top"  target="_blank">
        看不见的input
        <input name="hiden" value="hello" type="hidden">
        <input type="submit" value="commit"><br>
        <button>提交</button>
    </form>

提交和重置按钮


1
2
3
4
5
<form action="https://kiko2568.top"  target="_blank">
        <input type="submit" value="commit"><br>
        <input type="reset" value="重置111">
        <button>提交</button>
    </form>

普通按钮

1
2
3
<form action="https://kiko2568.top"  target="_blank">
        <input type="button" value="普通按钮">
    </form>

文本域和下拉框

文本
家乡 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form action="https://kiko2568.top"  target="_blank">
        文本<textarea name="textarea1" id="" cols="30" rows="10">123默认值</textarea>
        <br>
        家乡<select name="place" id="">
            <option value="sc">四川</option>
            <option value="cq">重庆</option>
            <option value="gx" selected>广西</option>
            <!-- selected 默认值 -->
            <option value="hebei">河北</option>
            <!-- 如果没value则取标签内的字 -->
        </select>
        <input type="submit" value="commit"><br> 
        <input type="reset" value="重置">
        <button>提交</button>
    </form>

文件控件

提交文件: 
1
2
3
4
5
<form action="https://kiko2568.top" target="_blank" method="post" enctype="multipart/form-data">
    <!--enctype是文件的编码，如果使用默认会只上传名字，更换编码后文件内容和文件数据一起s，同时请求的模式改为post 因为get数据少-->
    提交文件: <input type="file" name="file_sumit">
    <input type="submit" value="提交">
</form>

禁用控件

在控件中添加disabled,例如：

性别男 女

1
2
3
4
5
6
<form action="https://kiko2568.top"  target="_blank">
    性别<input disabled type="radio" value="男" name="sex">男
    <input type="radio" value="女" name="sex" checked>女<br>
    <input type="submit" value="commit"><br>
    <button>提交</button>
</form>

发现男这个单选不可选中

通过disabled和checked可以设置默认值不可修改

Label标签

文本关联控件



性别 男 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form action="https://kiko2568.top"  target="_blank">
        <label for="zhanghu">账号</label>
         <input id="zhanghu" type="text" name="user" value="初始值" maxlength="10"><br>
        <label >
            密码 <input type="password" name="pwd" value="csz" maxlength="10">
    </label>
      <br>性别
        <label for="nan"></label>
        <input id="nan" type="radio" value="男" name="sex">男
        <label >
            <input type="radio" value="女" name="sex" checked>女
    	</label>
            <br>
            <input type="submit" value="commit"><br>
        <button>提交</button>
    </form>

点击文本相当于点击控件！

fieldset与legend 作为分组使用

分组一

分组2 性别 男 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form action="https://kiko2568.top"  target="_blank">
    <fieldset>
        <legend>分组一</legend>
            <label for="zhanghu">账号</label>
            <input id="zhanghu" type="text" name="user" value="初始值" maxlength="10"><br>
            <label > 密码 <input type="password" name="pwd" value="csz" maxlength="10"></label>
            <br>
    </fieldset>
    <fieldset>
        <legend>分组2</legend>
            性别
            <label for="nan"></label>
            <input id="nan" type="radio" value="男" name="sex">男
            <label ><input type="radio" value="女" name="sex" checked>女</label>
    </fieldset>
        <br>
        <input type="submit" value="commit"><br>
    <button>提交</button>
</form>

框架

ifame

嵌入网站/图片/视频等等的框架


个人博客 生活博客 
1
2
3
4
5
<a href="https://blog.kiko2568.top/" target="wz">个人博客</a>
<a href="https://life.kiko2568.top/" target="wz">生活博客</a>
<form action="https://moments.kiko2568.top/" target="wz">
    <input type="submit" value="朋友圈"></form>
<iframe src="https://kiko2568.top" name="wz" frameborder="0" width="400px" height="300px"></iframe>

与a链接或表单搭配首先切换

特殊字符/字符实体

&nbsp;空格

字符表大全

meta

元信息—-页面基本信息

详细请参考

元数据元素 - HTML（超文本标记语言） | MDN

全局属性

  • title 给元素加上提示信息，鼠标放上去有提示

html 5新特性

1. 新增语义标签

  • header整个界面/区域头部

  • footer整个界面/区域尾部 —-多用于页脚

  • nav导航//栏

  • aside侧边栏

用上面的就行

  • article文章帖子杂志评论

  • section页面中某段文字，一个段落，通常包含标题

    article里面会有多个section，section强调分块分段

  • main文档主要内容，几乎不用

  • hgroup连续的标题

2. 新增状态标签

meter类似进度条

属性 值
high 区间最高值
low 区间最低
max 最大值
min 最小值
optimum 状态最好的值
value 当前值 








1
2
3
4
5
6
7
8
9
10
11
12
13
<meter max="100" min="0" high="80" low="60" value="70"></meter>

<meter max="100" min="0" high="80" low="60" value="90"></meter>

<meter max="100" min="0" high="80" low="60" value="50"></meter>

<meter max="100" min="0" high="80" low="60" value="70" optimum="90"></meter>

<meter max="100" min="0" high="80" low="60" value="95" optimum="90"></meter>

<meter max="100" min="0" high="80" low="60" value="40" optimum="90"></meter>

<meter max="100" min="0" high="80" low="60" value="80" optimum="90"></meter>

progress进度条

属性 值 描述
max 数字 规定最大值
value 数字 规定当前值 








1
2
3
4
5
<progress max="100" value="30" > </progress>

<progress max="100" value="60" > </progress>

<progress max="100" value="90" > </progress>

3. 新增列表标签

  • datelist
  • details
标题 你好
示例 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form action="">
	<input type="text" list="date">
	<input type="submit" value="搜索">
</form>
<datalist id="date">
	<option value="12">12</option>
	<option value="23">23</option>
	<option value="34">34</option>
	<option value="14">14</option>
</datalist>


<details><summary>标题</summary>
    你好
</details>
### 4. 新增文本标签 - `ruby`拼音标签？ - `mark`高亮 你好，我是一个程序员ni hao , wo shi yi ge cheng xu yuan 你好ni hao ，我是一个程序员 你好，我是kirari 
1
2
3
4
5
<ruby>你好，我是一个程序员<rt>ni hao , wo shi yi ge cheng xu yuan</rt></ruby>

<ruby>你好<rt>ni hao </rt>，我是一个程序员</ruby>

<mark>你好</mark>，我是<mark>kirari</mark>
### 5. 新的表单控件 #### 5. 1 属性
名字 效果
required 必填入信息，否则不能通过，会出现提示文字不可留空之类
文本框不能为空
单选框必须选一个
多选框是必须选设置的选项
可规避不正确输入以及同意协议
autocomplete 属性值on开启off关闭
会有历史记录，提交后再次获取焦点可以获得历史输入
密码框和多行文本域不可使用
需要浏览器开启地址信息才生效
autofocus 自动获取焦点，多个autofocus只生效最开始的那个
placeholder 提示文字
pattern 正则表达式，必须有required才能使用
账号
密码
男 女
多选1 多选2 多选3 多选4
1
2
3
4
5
6
7
8
9
10
11
<form action="">
        账号<input type="text" name="" id="" required autofocus autocomplete="on" placeholder="提示"><br>
        密码<input type="password" name="" id="" placeholder="输入密码" required pattern="\b\d{6,12}\b"><br>
        <input type="radio" name="sex" value="nan">男
        <input type="radio" required name="sex">女<br>
        <input type="checkbox"  name="aa">多选1
        <input type="checkbox" required name="aa">多选2
        <input type="checkbox" name="aa">多选3
        <input type="checkbox" name="aa">多选4<br>
        <input type="submit" name="" id="" value="提交">
    </form>

5.2 新的控件，即type新属性值

网址
邮箱
搜索
数值max是最大值，min最小值。step是间距
电话
进度条
颜色
日期
月
周
时间
日期+时间
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form action="">
网址<input type="url"></input><br>
邮箱<input type="email"></input><br>
搜索<input type="search"></input><br>
数值<input type="number" step="2" max="100" min="0"></input>max是最大值，min最小值。step是间距<br>
电话<input type="tel"></input><br>
进度条<input type="range" max="100" min="0" value="80"></input><br>
颜色<input type="color"></input><br>
日期<input type="date"></input><br>
月<input type="month"></input><br>
周<input type="week"></input><br>
时间<input type="time"></input><br>
日期+时间<input type="datetime-local"></input><br>
<input type="submit" value="提交"></input>
 </form>

video

视频标签

媒体参与度，本来需要静音才能自动播放，媒体参与度高的网站可以开声音自动播放

chrome://media-engagement/

edge://media-engagement/

audio

音频标签

全局属性新增