前端入门笔记之一

OXO1常识

一. web

1.网页

通常是html格式的文件,通过浏览器来解析。

2.网站

英特网上根据一定的规则,使用html等制作的用于展示特定相关内容的网页集合。

3.web标准的构成

(1)结构:

结构是对页面元素的整理和分类,eg : html

(2)表现

用于设置网页元素的版式,颜色,大小等外观样式,eg : css

(3)行为

是指网页模型的定义以及交互。eg : js

注 :

web最佳的体验方案:结构,表现,行为相分离。

二.浏览器

浏览器内核(渲染引擎):

负责读取网页内容,整理讯息,计算网页显示方法并显示页面。

Trident : IE 猎豹安全 360极速浏览器 百度浏览器

Gecko : firefox

Webkit : safari(苹果浏览器)

Blink : chrome Opera

注释 : Blink是webkit的一个分支。

OX02 HTML

一.HTML

1. HTML指的是超文本标记语言(Hyper Text Markup Language),它不属于编程语言,而是属于一套标签,用来描述网页。

2. HTML文档的后缀为” .html “或者“ .htm ”

3.HTML语法

(1)标签通常是由尖括号括起来关键字的一对标签。(双标签)
1
<html>  </html>
(2)单标签
1
<br />

3.标签关系

(1)包含关系
1
2
3
<head>
<title></title>
</head>
(2) 并列关系
1
2
<head> <body>
<body> </body>

4. HTML基本结构(骨架)标签

1
2
3
4
5
6
7
8
<html>
<head>
<title> 第一个页面 </title>
</head>
<body>
键盘敲烂,工资过万
</body>
</html>

注:

1
2
3
4
5
6
7
<html></html>   跟标签

<head></head> 头部标签

<title></title> 标题标签

<body></body> 主体标签

5.html注释符

1
<!--  我是被注释掉的东西 -->

注:

css注释:

1
/* 我是注释的内容 */

js注释(两种)

1
2
3
// 我是注释的东西

/* 我是注释的东西*/

6.DOCTYPE,lang标签,字符集的作用

1
2
3
4
5
6
7
<!DOCTYPE  html>     
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
</head>
</html>

注;

(1)<!DOCTYPE> 声明不是 HTML 标签;它是标注HTML版本。
(2)lang标签:用来标注网页的语言
(3) 用来标注所用的字符集。

二.常见标签上

1.标题标签

1
2
3
4
5
6
7
8
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标签</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>

效果
e22fde34200e102aeec3a1fd6083ed2c.png

2.落标签和换行标签

段落标签

1
<p>   </p>

换行标签

1
<br />

3.文本格式化标签

加粗
(推荐) or

1
<p>这是一个段落,<strong>我是加粗的标签</strong></p>

效果 :
bb20635c1275419e922f456cf9c9c1e1.png

倾斜

1
<em></em>(推荐) or <i></i>

删除线

1
<del></del>(推荐) or <s></s>

下划线

1
<ins></ins> (推荐)or <u></u>

4.

没有具体的语义,可以理解为一个盒子
1
<div>我是div,每个div独占一行,每行一个div,我是division的缩写<div>
1
<span>helle,word 。我是span,</span>

5. 图像标签和路径

1
2
3
4
5
6
<img src="imgal.jpg"/>   // srv属性:图片路径,是必须的。
<img src="imgal.jpg" alt="我alt属性,在图片加载不出来的时候可以替换”/>

<img src="imgal.jpg" title="我是提示属性"/>
其他属性:
width height border 分别设置图像的宽度,高度,和图像边框的粗细。

总结:

src alt title width height border

注意点:

(1)图像标签拥有多个属性;
(2)属性之间不分先后顺序,属性之间要用空格隔开;
(3)属性采用键值对的格式,即key=”value”的格式,属性=“属性值。

6.链接标签

1
<a href="跳转的目标" target="目标窗口弹出的方式"> 文本或者图像</a>

注 :

target : 默认为_self,新窗口打开的方式为_blank

7.链接的分类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html lange="zh-CN>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<h4>1.外部标签</h4>
<a href="https://www.baidu.com/" target="_self"> 我是一个超链接</a>
<h4>2.内部标签</h4>
<h4>3.空链接</h4>
<a href="#" target="_self">我是一个空链接</a>
<h4>4.下载链接:地址链接是文件,eg:.exe .zip等形式</h4>
<a href="demo.zip" target="_self">我是一个下载链接</a>
<h4>5.网页元素链接:文本,图片,表格,音频,视频等</h4>
<a href="#" target="_self"><img src="https://www.baidu.com/" alt="哦豁 "></img></a>
<h4 id="锚点链接id">6.锚点链接</h4>
<a href="#锚点链接id">我是一个锚点链接</a>
</body>
</html>

三.常见标签下

1.表格标签

(1)表格基本语法
1
2
3
4
5
<table>
<tr>
<td>单元格内容 <td>
</tr>
</table>

注释:

: 用于定义表格的标签 : 行标签,嵌套在标签里面 :单元格标签,嵌套在标签里面。

eg :

1
2
3
4
<table>
<tr> <td>姓名</td> <td>年龄</td><td>性别</td> </tr>
<tr> <td>小杨</td><td>永远18</td><td>男</td><tr>
</table>
(2)表头单元格 (table head)
1
2
3
4
5
<table>
<tr>
<th>单元格内容 <th>
</tr>
</ta>
注释:

表头单元格也是单元格,不过内容居中加粗。

(3)表格属性

表格属性添加在table标签的头标签后面

1
2
3
4
5
6
7
8
9
10
11
align 对齐 :left  center  right

border 是否拥有边框 :1 or ""(没有边框)

cellpadding 单元格内容和边框的内容,默认为1像素

cellspacing 单元格边框之间的留白,默认2像素

width 表格的宽度

height 表格的高度

eg :

1
2
3
4
<table align="center" border="1" cellpading="1" cellspacing="2"> 
<tr> <th>姓名</th> <th>年龄</th><th>性别</th></tr>
<tr> <td>小杨</td><td>永远18</td><td>男</td><tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <table>
<tr>
<th>排名</th>
<th>关键字</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>鬼吹灯</td>
<td>100</td>
<td>1000</td>
<td><a href="#">贴吧</a> <a href="#">baidu</a></td>
</tr>
</table>
(4)表格结构标签

<thead></thead> 用于定义表格的头部。
<tbody></tbody> 用于定义表格的主体,用于存放数据本体。

(5)合并单元格

跨行合并 :rowspan=”合并的个数”
最上侧单元格为目标单元格(写合并代码)
跨列合并 :colspan=”合并的个数”
最左侧单元格为目标单元格

合并三部曲:

1.确定合并的是列还是行
2.在目标单元格添加合并代码
3.删除多余的行

eg :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table border="1" width="500" height="249" cellspacing="0"> 
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

效果图
47eea900b89e5744105d26c1030b7f2e.png

2.列表

(1)概述

如果说表格是用来展示数据的,那么列表就是用来布局的,让网页更加的整洁,有序。

(2)无序列表(unordered list)

语法 :

1
2
3
4
<ul>
<li>序列一</li>
<li>序列二</li>
</ul>
(3)有序列表(orderly list)

语法 :

1
2
3
4
<ol>
<li>我是有序列表1</li>
<li>我是有序列表2</li>
</ol>
(4)自定义列表(definition list)

语法:

1
2
3
4
5
<dl>
<dt>名词1</dt>
<dd>名词1衍生1</dd>
<dd>名词1衍生2</dd>
</dl>

注释:

标签用来描述自定义列表
一起使用

总结:

(1)

    标签里面只能包含
  • 标签;
    (2)
  • 标签里面可以放任何元素
    (3)
    标签里面只能放
    标签
    (4)
    里面可以放任何标签

    3.表单

    (1)表单的构成 :表单域,表单控件(表单元素),提示信息。
    (2)表单域 :
    标签用于定义表单域,以实现用户信息的收集和传递。

    语法:

    1
    2
    3
    <form action="url地址" method="提交方式" name="表单域名称">
    各种表单插件
    </form>
    (3)表单控件(表单元素)

    表单元素

    语法:

    1
    2
    3
    <form>
    <input 属性=“属性值”/>
    </form>

    属性:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    (1)name :input 元素的名称。

    (2)type : input元素的类型
    type属性值:
    text 文本 默认20个字符
    radio 定义单选框
    checkbox 定义复选框
    submit 定义提交按钮
    password 定义密码字段
    file 定义文件上传
    button 一般配合js使用
    (3) value : 规定input元素的值

    eg :

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <form>
    <!-- 实现简单的输入框-->
    账号 <input type="text"/><br />
    密码 <input type="password"/><br />
    验证码 <input type="text" />
    <!-- button属性一般配合js实现-->
    <input type="button" value="获取验证码"><br />
    <!--实现单选框 -->
    性别 <input type="radio" name="radio1"/>男<input type="radio" name="radio1"/>女<br />
    <!-- 实现复选框-->
    绝活 <input type="checkbox" name="checkbox1" checked="checked"/>html<input type="checkbox" name="checkbox1"/>php<input type="checkbox" name="checkbox1"/>python
    <!-- 上传file属input性,用于上传文件--><br />
    上传头像 <input type="file">
    <!-- 提交按钮--><br />
    <input type="submit" value="提交"/>
    <!-- 清除 按钮-->
    <input type="reset" value="清除">
    </form>
    注:

    1.要实现单选和多选,name属性的值要相同。
    效果

    效果 :
    f77b14c1312e8576b68249b202e3076d.png

    4.

    用于绑定一个表单元素,当点击

    1
    2
    <label for="nan">男</label>
    <input type="radio" id="nan">

    5.