Java前端基础知识

最新推荐文章于 2024-04-06 18:30:12 发布

小折老师

最新推荐文章于 2024-04-06 18:30:12 发布

阅读量1k

点赞数 4

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41573718/article/details/89460894

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一，html+css基础
1-1
Html和CSS的关系
学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

1-2
HTML标签不区分大小<.h1.>和<H1.是一样的，但建议小写，因为大部分程序员都以小写为准。

1-3
一个HTML文件是有自己固定的结构的。

... ... 代码讲解： 1. 称为根标签，所有的网页标签都在中。 2. 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有、

1-4
1，下面这些标签可用在 head 部分：

... 2，代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。语法： 3，CSS注释代码就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用 )

1-5
1，语义化：说的通俗点就是：明白每个标签的用途（在什么情况下我可以使用这个标签才合理）比如，网页上的文章的标题就得用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。
2，语义化的作用
1）. 更容易被搜索引擎收录。
2）. 更容易让屏幕阅读器读出网页内容。

1-6
元素分类–块级元素
什么是块级元素？在html中<div.>、 <p>、<h1.>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

a{display:block;}

<strong>1-7 块级元素特点：</strong>

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

元素分类–内联元素
在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从页使用div元素具有内联元素特点。

<strong>1-8</strong>内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

 块状元素独占一行，在默认的情况下，宽度自动填满父元素宽度
 
 行内元素不会独占一行，宽度随着元素的内容改变而变化
 
 行内元素的width和height的设置无效
 
 行内元素的margin和padding的垂直方向上不产生边距效果
 
 可以使用display:block;或者display:inline;实现块级元素和行内的相互转换

HTML元素分为三大类：
块状元素：
网页框架基本结构块：html、body、frameset、frame、noframe、iframe
表单结构块：form、filedset、legend
布局结构块：div
段落结构块：p
标题结构块：h1-h6
列表结构块：ol、ul、dl、dt、dd、menu、dir
居中结构块：center
预定义结构块：pre
引用结构块：blockquote
结构装饰线：hr
网页标题框：title
行内元素：
行内包含框：span
超链接和映射包含框：a、area
图像包含框：img
格式化信息包含框：abbr、b、bdo、cite、code、del、dfn、em、font、i、ins、kbd、q、s、samp、small、strike、strong、sub、sup、tt、u、var
表单对象包含框：button、select、textarea、label
可执行的插件或对象包含框：applet、object
表格标题包含框：caption
无脚本包含框：noscript
其他元素：
头部区域隐藏元素：
头部包含框：head
默认基础字体属性：basefont
链接：link
元信息：meta
脚本：script
样式：style
url基础：base
行内块状元素：
输入框：input
下拉选框：option
下拉框的分组：optgroup
列表项元素：
列表项：li
结构内隐藏元素：
图像映射包含框：map
参数：param
换行：br
表格系列类型元素：
表格框显示：table
表格行显示：tr
单元格显示：td
表格标题显示：th
表格行组显示：tbody
表格脚注组显示：tfoot
表格标题组显示：thead
HTML标签嵌套规则

body可以直接包含块状元素、ins、del、script。不可以直接包含行内元素
ins和del（行内元素）可以包含块状元素或者行内元素，其他任何行内元素都不允许包含块状元素
p、h1-h6可以直接包含行内元素和文本信息，但是不允许包含块状元素
dl元素只允许包含dt和dd，同时dt不能包含块状元素，只允许包含行内元素，对于dd可以包含任何元素
form元素不能够直接包含input元素。原因在于input元素属于行内元素，form元素仅仅能够包含块状元素
table元素只能够包含caption、colgroup、col、thead、tbody、tfoot，不能够直接包含tr或者其他任何元素

二、认识标签（第一部分）
2-1
如果想在网页上显示文章，这时就需要

标签了，把文章的段落放到

标签中。
语法：

段落文本

2-2
标签来制作文章的标题。
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
语法：
<hx>标题文本</hx> (x为1-6)
文章的标题前面已经说过了，可以使用标题标签，另外网页上的各个栏目的标题也可使用它们

2-3
有了段落又有了标题，现在如果想在一段话中特别强调某几个文字，这时候就可以用到<em>或**<strong**>标签。
但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调

2-4
<em>、<strong>、<span>的区别：

<em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。
<span>标签是没有语义的，它的作用就是为了设置单独的样式用的，把一段话圈起来，然后用css设置样式。

2-5
换行标签<br/>
<br/>标签作用相当于word文档中的回车。
分割线标签<hr/>
<hr/>标签和<br/>标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。
<hr/>标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。

2-6
html特殊字符
空格： (;分号必不可少)

2-7
address标签，为网页加入地址信息
语法：

地址信息

如：

北京市西城区德外大街10号

在浏览器上显示的样式为斜体，如果不喜欢斜体，当然可以，可以在后面的课程中使用css样式来修改它

标签的默认样式

2-8
在介绍语言技术的网站中，必免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用<code>标签了，如下面例子：
<code>var i=i+300;</code>
语法：
<code>代码语言</code>
注意：在文章中一般如果要插入多行代码时不能使用<code>标签，如果是多行代码，可以使用<pre>标签。

<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。如果用以前的方法，回车需要输入
签，空格需要输入。
注意：<pre> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

三，认识标签（第二部分）
3-1
1，无序列表
ul-li是没有前后顺序的信息列表。
语法：
<ul>
<li>信息</li>
<li>信息</li>
…
</ul>
举例：

<ul>
  <li>精彩少年</li>
  <li>美丽突然出现</li>
  <li>触动心灵的旋律</li>
</ul>

ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点

2,有序列表
语法：
<ol>
<li>信息</li>
<li>信息</li>
…
</ol>
举例：
下面是一个热点课程下载排行榜：

<ol>
   <li>前端开发面试心法 </li>
   <li>零基础学习html</li>
   <li>JavaScript全攻略</li>
</ol>

<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开

3-2

<div>容器标签

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，

这个<div>标签的作用就相当于一个容器。

语法：
<div>…</div>

确定逻辑部分：
什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用

<div>标签作为容器

注释：<div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个 换行符。

3-3
创建表格的五个元素：
table、tbody、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。（这个标签基本上不怎么用了）

3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...<td/>，说明一行中就有几列。

5、<th>…</th>：表格的头部的一个单元格，表格表头。

6、表格中列的个数，取决于一行中数据单元格的个数。

表格还是需要添加一些标签进行优化，可以添加标题和摘要

<table summary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量">

  <caption>2012年到2013年库存记录</caption>

3-4

1.使用<a>标签，链接到别一个页面

使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。

语法：
<a href=”目标网址”>链接显示的文本</a>

例如：
<a href = "http://www.imooc.com">click here!</a>

上面例子作用是单击click here!文字，网页链接到http://www.imooc.com这个网页。

3-5

认识<img>标签，为网页插入图片

在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<img>标签来插入图片。

语法：

<img src="http://m13121875965.blog.163.com/blog/图片地址" alt="下载失败时的替换文本" title = "提示文本">

举例：

<img src="http://m13121875965.blog.163.com/blog/myimage.gif" alt = "My Image" title = "My Image" />

讲解：
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。

四，表单标签（与用户进行交互）
4-1
表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

语法：
<form   method="传送方式"   action="服务器文件">

讲解：

>     1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。

>     2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

>     3.method ： 数据传送的方式（get/post）。

4-2
输入框
文本输入框、密码输入框
当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。

语法：
<form>
   <input type="text/password" name="名称" value="文本" />
</form>

1、type：
当type="text"时，输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
2、name：为文本框命名，以备后台程序ASP 、PHP使用。
3、value：为文本输入框设置默认值。(一般起到提示作用)

4-3
文本域，支持多行文本输入
当用户需要在表单中输入大段文字时，需要用到文本输入域。

语法：
<textarea  rows="行数" cols="列数">文本</textarea>
1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
2、cols ：多行输入域的列数。
3、rows ：多行输入域的行数。

4-4
单选框，复选框

语法：
<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

1、type:
当type="radio"时，控件为单选框
当type="checkbox"时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序ASP、PHP使用
4、checked：当设置checked="checked"时，该选项被默认选中
注意：同一组的单选按钮，name取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。

4-5
下拉列表框，节省空间
下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。

语法：

<option value="提交值">选项</option>

提交值是向服务器提交的值，选项是显示的值。

<form action="save.php" method="post" >
    
<label>爱好:</label>
    
<select>
      
<option value="看书">看书</option>
      
<option value="旅游" selected="selected">旅游</option>
      
<option value="运动">运动</option>
      
<option value="购物">购物</option>
    
</select>


</form>

4-6
使用下拉列表框进行多选
下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，
就可以实现多选功能，进行多选时按下Ctrl键同时进行单击，可以选择多个选项。
如下代码：

爱好:

  <option value="看书">看书</option>


  <option value="旅游">旅游</option>


  <option value="运动">运动</option>


  <option value="购物">购物</option>

4-7
在表单中有两种按钮可以使用，分别为：提交按钮、重置。
1，提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。

语法：
<input   type="submit"   value="提交">

type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字

2，重置按钮，重置表单信息
当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。

语法：
<input type="reset" value="重置">

type：只有当type值设置为reset时，按钮才有重置作用
value：按钮上显示的文字

小折老师

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Java前端基础知识

一，html+css基础1-1Html和CSS的关系学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改...
复制链接

扫一扫