第一周前端自学内容

html,css,js 简单介绍

一.结构：HTML 从语义的角度来描述页面结构

• html即超文本标记语言，以超链接的形式将文本连接起来；html的标记称为标签，每一元素有特定的功能。

  ---

html标签：

上图为基本结构

---

• 标题：<h1>~<h6>
• 正文：正文<p align=“#”> 段内换行<br> 空格字符&nbsp 预留格式<pre>

注释添加<!--注释内容--!> 特殊表示<span> 水平线<hr color =" clr">  

<center>...</center> 使文本居中显示

• 超链接：

链接到本站点其他网页：<a href="name.html">标题</a>

超链接的添加：<a href="http://">标题</a>

虚拟超链接：<a href="#">标题</a>

• 图片链接：

存在于网页所在文件夹：<img src="name.jpg/gif/png" />

存在于图片自建文件夹：<img src="images/name.jpg/gif/png" />

存在于网页所在文件夹的上一级文件夹：<img src="../name.jpg/gif/png" />

存在于网页所在文件夹的上一级文件夹且图片自建文件夹:<img src="../images/name.jpg/gif" />

• 列表：

无序列表 <ul>+<li>...</li>+</ul>

有序列表 <ol>+<li>...</li>+</ol>

表格:<table>+<tr>+<td>...</td>+<tr>+</table>(<th>...</th>代表表头)

• 表单：

文本框与密码框:

<input type="textbox/password" name="用户名" size="初始宽度" value="初始值">

提交与重置按钮:

<input type="submit/reset" name="用户名" size="初始宽度" value="按钮表面的文字">

单选框和复选框:

<input type="radio/checkbox" name="用户名" value="值" checked="checked"(表示默认选择项)>

下拉列表框:

<select >+<option>...</option>(<option selected="selected">表示默认选择项)+</selected>

文本域:

<textarea rows="..." cols="..." >文本</textarea>

---

二.样式：CSS 从审美的角度美化页面

1.CSS即层叠样式表是一种用来表现html等文件样式的计算机语言,CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

2.CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力

---

三.行为：JS 从交互的角度来提升用户体验

1.JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

2.是一种解释性脚本语言（代码不进行预编译）。 

主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

JavaScript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。JavaScript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

---

• html的标签的小练习如下: