前端HTML基础

最新推荐文章于 2022-10-15 20:47:14 发布

diyang2670

最新推荐文章于 2022-10-15 20:47:14 发布

阅读量131

点赞数

原文链接：http://www.cnblogs.com/jiangss/articles/11131673.html

版权

　　首先我们要知道HTML 是用来描述网页的一种语言。html是超文本标记语言(Hyper Text Markup Language)的缩写。HTML不是一种编程语言,而是一种标记语言 (markup language)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

网页开发概述

以网页技术来说，大致可以分为静态网页和动态网页。
HTML （HyperText Makeup Language）超文本标记语言，目前版本为html5。

认识HTML标记

HTML标记

　　　　<标记名称属性1=”值1” 属性2=”值2” …>组件资料</标记名称> *标记不区分大小写，属性值可以不加引号

HTML结构

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>标题</title>
    </head>
    <body>
        主体内容
    </body>
</html>

网页的基本组成部分:

1.文档类型

<!doctype html>
建议浏览器使用html5的内核标准来阅读并解析后文

2.文档内容区
<html></html>

3.文档头部内容(对体部内容的提前声明)
<head></head>

4.文档标题
<title></title>
百度等搜索引擎收录起着很大的作用

5.建议浏览器在阅读本文档时以utf-8的编码来阅读
<meta charset='utf-8'>

6.文档体部内容
<body></body>

html5标签注释:

html颜色:

 1 1.英文
 2 red
 3 
 4 2.十六进制
 5 #ff0000
 6 #f00
 7 
 8 3.十进制
 9 rgb(255,0,0);
10 
11 4.十进制
12 rgba(255,0,0,0.5);
13 
14 常用的html5颜色(16进制):
15 1.白色
16 #ffffff
17 
18 2.黑色
19 #000000
20 
21 3.红色
22 #ff0000

详细理解body主体中各个标签

1、<p></p>段落标签，让内容成段展示

2、标题标签，成段展示，独占一行，加粗字体，更改字体大小（从 1 到 6 依次减小）

<h1>从大到小</h1>
<h2>从大到小</h2>
<h3>从大到小</h3>
<h4>从大到小</h4>
<h5>从大到小</h5>
<h6>从大到小</h6>

3、特殊的文字样式

<b></b>    粗体
<i></i>      斜体
<u></u>    下划线
<s></s>    删除线
<sup></sup>    上标
<sub></sub>    下标
<em></em>       斜体
<strong></strong>     粗体
<del></del>    这是一个中划线
<address></address>这是一个地址标签。可以用斜体+成段展示模拟

4、无意义块标签和行标签:

1.div
2.span

这两个标签是为了成块展示，规格化，这两个就是容器，其功能 1：分块明确，让整个页面更加结构化；功能 2：捆绑操作的作用。

5、html中标签实体:

1 < 小于的意思，less than，html编码是&lt;
2 > 大于的意思，great than，html 编码是&gt;
3 空格 &nbsp;
4 << &laquo;
5 >> &raquo;
6 x &times;

6、<br>换行符，就是为了换行，还有就是br是单标签。

7、<hr>水平线，也是单标签。

8、文字列表设计

1)无序列表：unorder list 只有 type = ""这一个属性可以改

<ul type="square">
        <li>项目符号</li>
        <li>项目符号</li>
        <li>项目符号</li>
</ul>
type的属性值（默认为实心圆disc）有：
ircle        空心圆
disc        实心圆
square     实心方块

2)有序列表:

1 <ol>
2        <li>项目符号</li>
3        <li>项目符号</li>
4        <li>项目符号</li>
5 </ol>
6 
7 type的属性值（默认为数字格式123）有：1,A,a,I,i
8 可以设置编号的开始序号   start=n（只能是数字）

9、图像

图片标记：<img src="图片路径" />

　　图片属性：高度：height；宽度：width；边框宽度：border；优先读低分辨率图：lowsrc；文字标注：alt；鼠标放在图片上时显示说明文字：title

　　绝对路径： http://www.cnblogs.com/ 或 D:\Downloads

　　相对路径: ../../a/b.jpg

/表示网站根目录 ~/表示当前应用程序目录

10、超链接标记

标签的功能： 1）超链接 2）锚点 3）打电话，发邮件 4）协议限定符

 1 #超链接
 2 <a href="http://www.baidu.com" target="_blank">百度</a>
 3 <a href="#">百度</a>
 4 <a href="javascript:;">百度</a>
 5 说明：（1）如果在链接中写网址时必须加上http://，不能直接写www.baidu.com。
 6         （2）#表示打开一个空的页面。
 7         （3）javascript:;它表示一个真正的空链接。
 8         （4）target的属性值有：_blank在单独页面中打开；_parent是在父级窗口打开；_self是在本窗口打开；_top是在上级窗口打开。
 9 
10 #锚点
11 <div id="link1"> 内容区</div>
12 <a href=“#link1”>点一下，直接到达id为link1的div中</a>
13 
14 #打电话发邮件
15 <a href="tel:xxx的电话号码">xxx</a>
16 <a href="mailto:xxx的邮箱">xxx</a>
17 
18 #协议限定
19 <a href="javascript:alert('aaa')">点击一下</a>

11、表格

 1 <table>
 2     <caption>表格标题</caption>
 3     <tr>
 4         <th>表头1</th>
 5         <th>表头2</th>
 6     </tr>
 7     <tr>
 8         <td>列表1</td>
 9         <td>列表2</td>
10     </tr>
11 </table>
12 说明：<caption></caption>是表格标题标记，它的属性（如果不写默认显示在表格上边）有align：top,left,right,bottom。
13         <tr></tr>是行。
14         <th></th>是表头标题列，默认字体加粗居中显示
15         <td></td>是数据列。
16 (2)、表格属性
17 border(边框），width(表格宽度），height(表格高度），align(对齐方式left,right,center，bordercolor(边框颜色），bgcolor(背景颜色），cellpadding(单元格中的文字距边框的距离，上边和左边），cellspacing(单元格之间的间距，也就是外边距），
18 行列属性：
19 　　　　高：height； 框颜色：bordercolor； 背景色：bgcolor； 水平对齐：align； 垂直对齐：valign
20 (3）跨行跨列：
21 　　　　合并行：rowspan＝"3"
22 　　　　合并列：colspan="2"

12、form表单

表单的动作Action:"" 好比写信，这里写的就是收信人的地址比如http://localhost/index.php

Method:get或post 提交表单的发送方式

1. get是从服务器上获取数据，post是向服务器传送数据。

2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。Post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

4、get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB， IIS5中为100KB。

5. get安全性非常低，post安全性较高

 1 表单标签:
 2 <form action='login.php' target='_blank'></form>
 3 
 4 文本框:
 5 <input type='text' name='username' value='user1'>
 6 
 7 密码框:
 8 <input type='password' name='password' value='123'>
 9 
10 提交按钮:
11 <input type='submit' value='Ok'>
12 
13 重置按钮:
14 <input type='reset' value='Cancel'>
15 
16 表单占位:
17 <input type='text' placeholder='请输入姓名:'>
18 
19 表单只读属性:
20 <input type='text' readonly>
21 
22 表单禁用属性:
23 <input type='text' disabled>
24 
25 文本框宽度:
26 <input type='text' size='5'>
27 
28 文本框最大长度:
29 <input type='text' maxlength='5'>
30 
31 单选框:
32 <label>
33     <input type='radio' name='love' value='linux'> linux
34 </label>
35 <label>
36     <input type='radio' name='love' value='php'> php
37 </label>
38 
39 多选框:
40 <label>
41     <input type='checkbox' name='love[]' value='linux'> linux
42 </label>
43 <label>
44     <input type='checkbox' name='love[]' value='php'> php
45 </label>
46 
47 下拉菜单:
48 <select name='love'>
49     <option value='linux'>linux</option>
50     <option value='linux'>linux</option>
51 </select>
52 
53 多选下拉菜单:
54 <select name='love[]' size='5' multiple>
55     <option value='linux'>linux</option>
56     <option value='linux'>linux</option>
57 </select>
58 
59 文本域:
60 <style>
61     textarea{
62         resize:none;
63     }    
64 </style>
65 <textarea name='mess'></textarea>
66 
67 提交按钮:
68 <input type="submit" value='Ok'>
69 
70 取消按钮:
71 <input type="reset" value='Cancel'>
72 
73 文件上传框:
74 <input type="file" name='img'>
75 
76 图片按钮:
77 <input type="image" src='submit.gif' width='200px'>
78 
79 隐藏框:
80 <input type="hidden" name="id" value='10'>
81 
82 按钮:
83 <input type="button" value="不提交表单">
84 <button>提交表单</button>

View Code

提醒：如果是需要提交表单那么就要在input中写入name属性不然后端找不到数据

<input type="text" name='username' value='jack'>
<input type="text" name='age' value='18'>
提交后
http://localhost/index.php?username=jack&age=18

浏览器

主流浏览器和内核，主流浏览器是有一定市场份额，并且有自己独立研发的内核浏览器分 shell+内核

主流浏览器（必须有独立内核）市场份额大于 3%	内核
IE	trident
Friefox	Gecko
Google chrome	Webkit/blink
Safari	Webkit
Opera	presto

转载于:https://www.cnblogs.com/jiangss/articles/11131673.html