初识HTML

发表于 | 分类于

一.互联网的三大基石:
1.HTML（超文本标记语言）
2.HTTP（超文本传输协议）
3.URL（统一资源定位符）

二.入门基本的标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<!--HTML中的文档约束（DTD）>

<html>
  <head>
    <!--head中会书写一些浏览器中配置标签-->
    <!--告诉浏览器解析的编码格式-->
    <meta charset='utf-8'/>
   <title>这是我的第一个网页</title>
  </head>
  <body>
     <!--body中写呈现给用户的信息-->
     This is my first HTML
  </body>
</html>

1.head中的标签

1
2
3
4
5
<!--搜索引擎优化-->

<meta name="author" content="朱自清，张三"/>
<meta name="description" content="盼望着盼望着，春分的脚步近了"/>
<meta name="description" content="东风，盼望"/>
1
2
<!--自动刷新网页（此处的5为5秒后刷新网页）-->
<meta http-equiv="refresh" content="5,https://www.baidu.com"/>
1
2
3
4
5
<!--禁止网页缓存--->

<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>

2.body中常用的标签

1
2
3
4
<!--标题标签   h1——h6 自动的加粗加黑  会自动换行 align: 调整标签的位置 （默认是left）  -->

<h1>[美丽新时代]</h1>
<h1 align="right">[美丽新时代]</h1>
1
2
3
<!--分割线标签   500px: 像素    color:颜色  align:位置（默认center） size:垂直方向的大小-->

<hr width="500px" color="red" align="right" size="20px"/>
1
2
3
4
<!--p段落标签  br:换行  &nbsp；:空格 -->

<p>&nbsp;&nbsp;新华网balabalabalabalabal <br/>
玛雅balbalbalablablalbal</p>

3.body中常用的小标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!--下划线标签--> 
<u>北京</u> 

<!--斜体标签--> 
<i>北京</i> 

<!--加粗加黑标签--> 
<b>北京</b> 

<!--删除线标签--> 
<del>北京</del> 

<!--上标标签--> 
  2<sup>3</sup> 
  
<!--下标标签--> 
  log<sub>7</sub>  
  
<!--字体变小标签--> 
  <small>我们是孩子</small> 
 
<!--字体放大--> 
  <big>北京</big>  
  
<!--字体标签  face：指定字体的风格--> 
    <font color="red" size="25px" face="宋体">北京大学
    </font>
  
<!--列表标签{[1]有序列表，[2]无序列表，[3]自定义列表}--> 
作用： 
    【1】树形菜单 
    【2】导航栏的布局 
    
<!--[1]有序列表--> 
  <ol type="I"> 
   <li>javaSE</li> 
   <li>javaEE</li> 
   <li>javaME</li> 
  </ol> 
  
<!--[2]无序列表--> 
  <ul type="square"> 
   <li>javaSE</li> 
   <li>javaEE</li> 
   <li>javaME</li> 
  </ul> 
  
<!--[3]自定义列表--> 
  <dl> 
   <dt>java</dt> 
   <dd>javaSE</dd> 
   <dd>javaEE</dd> 
   <dd>javaME</dd> 
  </dl> 
  

<!--跑马灯标签 direction:滚动方向 scrollamount:滚动的数独 --> 
  <marquee direction="right" scrollamount="40px">北京大学</marquee>

(2)超链接标签的作用（不会自动换行）

【1】实现不同页面之间的跳转
href:指定跳转到目标资源的位置
target：打开网页的方式
【2】实现锚点功能 

1
2
3
4
5
6
7
8
9
<!--跳转到本地的资源位置    _blank:打开一个空白页面进行加载--> 
<a href="02body中常用小标签.html" target="_blank">02小标签测试</a> 

<!--跳转到网络的位置--> 
<a href="http://www.bjsxt.com">北京尚学堂</a> 

锚点功能 
<a href="#bottom" name="top">返回底部</a> 
<a href="#top" name="bottom">返回顶部</a>

(3)图片标签
图片标签的注意
img (不会自动的换行)
src:引入图片的位置{相对路径、绝对路径、网络路径 }
title：图片的标题
原始 宽和高 (如果只指定一个属性，则等比例的放大或缩小)
400px 260px
200px 130px
border:图片的边框
alt：图片无法正常显示的时候显示的属性
align: 图片的位置 ，必须有参照物 

1
2
3
4
5
6
7
8
<!--相对路径--> 
<img src="img/2.jpg" /> 

<!--绝对路径--> 
<img src="C:\\Users\\my\\Documents\\HBuilderProjects\\01HTML\\img\\1.jpg" /> 

<!--网络路径-->    
<img src="https://www.baidu.com/img/bd_logo1.png" />

三.表格
(1)
table表格的自适应能力 (align=”center”)整个的表格整体居中
width=”300px” height=”300px”
cellpadding：内容和单元格的距离
cellspacing：单元格和单元格的距离
tr：行 :height
td/th：列 width
td:普通的列
th:标题列:自动的居中，加黑效果
colspan:列合并
rowspan：行合并
bgcolor：背景颜色
（快捷键：table>tr3>th3 :声明3行3列的表格 ）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
tr:是行  td:是列  下面的是2行3列的表格
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
         <td></td>
        <td></td>
        <td></td>
    </tr>    
    
</table>

四.表单标签:
1.form表单
action：表单提交的位置
method（get/post）：表单提交的方式

Get方式 提交数据:
(1)参数会依附于url地址之后
(2)利用get方式提交数据，数据的长度有限制
(3)利用get方式提交数据，是不安全的

Post方式 提交数据:
(1)请求不会依附于地址，
(2)利用post处理参数不受限制
(3)post提交数据比较安全 

1
2
3
4
5
6
7
<form action="https://www.baidu.com/s" method="get">
    
    <!--普通文本框-->
    <input type="text" name="wd"/> 
    <input type="submit" value="百度一下">   
    
</form>

2.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<form>   
     <!--普通文本框  value：文本框中值--> 
    账号： <input type="text"  name="zh" value="123" />  
    密码： <input type="password" name="pwd" value="123"/>
     
    <!--单选框  实现单选的效果必须指定同一个name属性 value:是最后保存在数据库里的值 checked：默认的选择--> 
    男：<input type="radio"  name="sex"  value="1" checked="checked"/> 
    女：<input type="radio"  name="sex" value="0"/>      
    
    <!--多选框  默认选中单选框或者单选框中的值添加checked属性--> 
    抽烟:<input type="checkbox"  value="1" checked="checked"> 
    喝酒:<input type="checkbox" /> 
    烫头:<input type="checkbox" /><br /> 
    
    <!--多行文本框--> 
    个人介绍： <textarea rows="15" cols="20" value="">你好</textarea><br /> 
    
    <!--文件选择框 上传文件的--> 
    <input type="file" name="file" /><br /> 
    
    <!--隐藏框--> 
    <input type="hidden" name="sno" value="20180607" /> 
    
    <!--下拉框  selected：默认的选择--> 
    <select name="ch"> 
    <option value="1">中国</option> 
    <option value="2" selected="selected">美国</option> 
    <option value="3">日本</option> 
        <option value="4">新加坡</option> 
    </select>  
    
    <!--提交按钮--> 
    <input type="submit" value="提交" />  
    
    <!--清除按钮,清空写好的内容--> 
    <input type="reset" value="清除" /> 
    
    <!--普通的按钮  没有提交数据的功能--> 
    <input type="button" value="提交" /> 
    
</form>

五.框架标签
（1）iframe框架:相当于在网页中嵌套了另外一种框架

1
2
3
4
5
6
7
8
<ul>
    <li><a href="http://www.baidu.com" target="ifm">百度</a></li>
    <li><a href="http://www.taobao.com" target="ifm">淘宝</a></li>    
</ul>

<!--框架  width：宽度  height: 高度  src: 默认路径-->

<iframe width="1000px" height="550px" name="ifm" src="http://www.baidu.com"></iframe>

（2）frameset ：（去除body属性）
点击左侧的left.html中的百度，使用target=“rig”，表示在右侧名为rig的部分处打开显示
使网页结构固定了，不可以滑动: noresize=”noresize”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<frameset rows="150px,*,100px">
	 	
	 	<!--顶部部分-->
	 	 <frame  src="admin/top.html" noresize="noresize"/>
	 	<!--中间的部分-->
	 	
	 	<frameset cols="10%,*">
	 		<!--左侧部分-->
	 		<frame  src="admin/left.html"/>
	 		<!--右侧部分-->
	 		<frame  src="admin/right.html" name="rig"/>
	 	</frameset>
	 	
	 	
	 	<!--底部部分-->
	 	<frame  src="admin/bottom.html"/>
	 	
	 </frameset>
	
	<!--<body>
	</body>-->

六: div 标签学习
div本身是没有任何的含义
div：作用就是把网页进行模块化的划分 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--头部模块--> 
<div class="top"></div> 

<!--中间提示--> 
<div class="tips"></div> 

<!--中间的展现--> 
<div class="center"> 
     <div class="login"> </div>
</div> 

<!--底部模块--> 
<div class="bottom"></div>