web前端高级第一课

最新推荐文章于 2020-02-25 20:46:39 发布

原创最新推荐文章于 2020-02-25 20:46:39 发布 · 435 阅读

1 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了HTML的基本概念，包括超文本标记语言的定义、标签的作用及重要标签的使用，如表格、表单元素和表单标签。同时，文章还探讨了CSS和JavaScript在网页设计中的角色。

HTML

什么是HTML？

HTML——htyper text markup language，超文本标记语言，是一种标识性的语言。

超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标记语言: 标记（标签）构成的语言.

能表现如文字、视频、音频、程序等复杂元素。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

什么是标签？

是由一对尖括号包裹的单词构成例如: <html>。标签分为两部分: 开始标签<a> 和结束标签</a>. 。标签对的组成：标签名、属性（名值对）、内容。

属性类似是给这个标签的内容加了个装备，让这些标签具有一些特殊的能力。
标签属性通常是以键值对形式出现，如：href="www.baidu.com"。

重要标签说明：

1.表格标签 table

thead tr th
tbody tr td

<table border="1">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</tbody>
</table

2.表单标签 form

action:submit 操作执行的请求地址
method:指定请求的类型 get/post

一、直接利用form表单submit提交

<form action="Login" method="post">

	username:<input type="text" name="username" /><br>
	
	password:<input type="password" name="password" /><br>
	
	<input type="submit" value="登录">

</form>

二、利用ajax请求

<form  method="post" action="##" id="formtest">

	username:<input type="text" name="username" /><br>
	
	password:<input type="password" name="password" /> <br>
	
	<input type="button" value="登录" onclick="login()">

</form>

<script type="text/javascript">
function login() {
    $.ajax({
        type: "POST",
        dataType: "text",
        url: "/Login",
        data: $('#formtest').serialize(),
        success: function (result) {
        	alert("成功")
        },
        error : function(s,s2,s3) {
            alert("异常！");
        }
    });
}
</script>

3.表单元素标签

通过submit提交，浏览器会把表单元素的数据以名值对的方式提交给服务器。

标签的语义

H1/H2/H3 表现大纲级别
div/span/p 表现布局
使用带语义的标签可以让搜索引擎快速的进行收录

<style>
.hstyle {
display: block;
font-size: 2em;
font-weight: bold;
}
</style>
<h1>标题1</h1>
<span class="hstyle">标题1</span>

关于浏览器

浏览器是电脑上网时经常使用到的应用软件，用来显示在万维网或局域网等内的文字、图像及其他信息，是能解析HTML、CSS、JavaScript、图片、音视频等内容。主流的浏览器分为IE、Chrome、Firefox、Safari等几大类，其中Firefox/Chrome我们称之为标准浏览器，最符合W3C组织定义的相关技术规范。

如果没有一个规范定义，为了迎合不同厂商的浏览器，程序员将为此付出沉重的代价。但是即便如此，不同的浏览器之间还是有些细微的差异的，这个一般是前段开发要注意的问题，要考虑浏览器的兼容性。我们一般使用360、搜狗都是基于某个浏览器内核深度改造的。

CSS

层叠样式表：元素样式可以通过多种方式进叠加。是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

本身HTML 元素是不具备样式的，但是在不定义样式的情况下，不同的标签也能表现不同的显示样式，原因是浏览器对不同的标签是有个默认样式的。

DIV + CSS 布局基础，充分理解盒子模型

<div id='menu'>
	<a href="#">链接</a>|
	<a href="#">链接</a>|
	<a href="#">链接</a>|
	<a href="#">链接</a>|
	<a href="#">链接</a>
</div>


*{margin:0;padding:0}
#menu{
		font-size: 14px;
        color: #333;
        margin-bottom: 15px;
        text-indent: 2em;
        line-height: 24px;
	}
#menu a{
		padding:0 1rem;
		color:#000;
		text-decoration:none;
		font-weight:bold
		}

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

语法

box-sizing: content-box|border-box|inherit;

JavaScript

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。是弱类型语言，而且书写比较随意。

弱语言体现在变量是没有准确的数据类型定义。通过 var 关键字定义。

var x=5;
var y=6;
var z=x+y;

作用

1. 业务逻辑处理

2. 对 DOM 进行操作（DOM : Document Object Model）:通过事件驱动页面模型发生变化（DOM 树中元素的增删改查，特别是改：改内容，改样式），JavaScript 能操作 DOM 的原因在于 JavaScript 实现了 DOM 相关操作的接口，能满足对 DOM 的操作。