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 的操作。