Web阶段--HTML基础知识点

Web阶段–HTML与CSS基础知识点

一、Html简介

1.概念
1) 标记语言: 使用一些特殊的标记符号对所要展示的文本内容进行标记说明,不会向发出机器指令,不体现具体的业务信息
2) 超文本标记语言(HTML):对文本内容的显示样式,风格进行标记说明
3) 可扩展的标记语言(xml):对文本内容的含义进行标记说明
2.html说明
1)使用html技术定义的文档,通常成为“网页” , 文件名会以.html 或者 .htm为结尾
2)使用任意文本编辑器开发,使用浏览器解释执行(存在浏览器差异)
3.基本语法
1)使用“标签”的形式来进行标记
 <标签名>             ---- 开始标签
     标签体           ---- 文本内容 or 其他标签
 </标签名>            ---- 结束标签
 特例: <标签名/>   --- 空标签,没有标签体的标签
2)标签可以有属性
	 <标签名 属性名=“属性值”  属性名=‘属性值’ 属性名= >  ...... </标签名>
		例如: <hr color="red" size="3"  width="90%"/>
3)标记语言文档只能有一个”根标签“(所有内容都必须定义在根标签里)

二、Html技术里的根标签

1.根标签
语法:
	<html>     ---- hntml文件的根标签
 		<head> </head>
 		<body> </body>
    </html>
2.head标签
用来对网页的特性属性进行说明定义,通常head标签里的定义不会显示在浏览器中
 1) <title> 定义网页标题的标签,唯一一个可以出现在浏览器中的head标签
 2)<meta/> 用来为网页定义特征属性
   . <meta http-equiv="content-type" content="text/html;charset=GBK" />
   . <meta http-equiv="refresh" content="3;url=http://www.baidu.com"/>
   . <meta name="keywords" content="oracle,java,sql"/>
3.body标签
用来定义可以显示在浏览器窗口的正文内容
1)text:用来定义正文内容的颜色。  英文单词 或者 用6位16进制数(RGB)
2)bgcolor:背景色

三、body中常用标签

1.基础标签
1) 注释标签: <!--  注释内容  -->
2) 标题标签: <h1>   .....  <h6>  值越大字越小, 自占一行, ”块级元素“
3) 标尺先:<hr color="颜色" size="粗细,数字" width=“100px,或者使用百分比”/>
4) 水平居中:<center> </center>
5) 设置字体:<font color="" size="单位像素"></font>
6) 特殊设置: <br/> 换行       空格
7) 字体设置: <b> 加粗   <i> 斜体   <s>删除线   <u>下划线    <sub>下标    <sup>上标
8) 段落标签:<p>    <pre>预览
9) 跑马灯:<marquee scrolldelay="速度" direction=“方向 left right”></marquee>
2.列表标签
1)无序列表: <ul type=“circle,square”>   <li>每一项
2)有序列表: <ol type="A,a,I,i">     <li>
3)定义列表: 做概念定义的标签 <dl>    <dt>概念     <dd>解释文字
3.图片标签
<img src="图片的路径" width="100px" height="" align="top,middle,bottom,left"/>
 align属性控制图片与后面文字的对齐方式
4.超链接标签
1)普通的超链接【重点】
<a href="目标资源的路径" target=“控制资源打开的窗口,_self(自己), _blank(新窗口)”>提示</a>
2)设置锚点( 需要配合第一种方式使用 )
 <a name="锚点名"></a>   
 用来在一张网页的上下文之间切换
5.表格标签
语法:
	<table border="数字" bordercolor=“颜色” cellspacing=“0” width=“” 			 align=“left,right,center”>
 	 <tr bgcolor="" align="left,center,right"> 
      	<td> 第一行第一列</td>  <td> 第一行第二列 </td>
  	</tr>
  	<tr valign="top,middle,bottom">
      	<td> 第二行第一列</td> <td> 第二行第二列 </td>
  	</tr>
	</table>
注意: <td>可以写文本内容,可以放图片,也可以存放任意网页元素。数据必须放在<td>

四、表单标签

1.作用
与用户交互的通道(主要完成数据的采集)
2.form标签
语法:
	<form  action="目标程序的地址" method="get|post">
 	 	表单
	</form>
method属性: get和post的区别
get方式:表单提交默认方法,将表单数据以特殊的格式拼接到地址栏随着资源跳转一并发送数据
        格式 -->  地址?name=value&name=value&name=value .....
        缺陷 --> 数据不安全  传递的数据量小   容易出现中文乱码
post方式:优选此种方式, 将表单数据打成数据包,随着请求发送(跳转)一并传递到目标程序
3.常见表单元素
1)文本框:<input type="text" name="" size="" maxlength="" readonly value="默认值"/>
2)密码框:<input type="password" name="" />
3)单选钮:<input type="radio" name="" value="" checked/> 提示
        注意:必须将多个单选钮的名字定义成同一个,才能达到“排他性"\
4)复选框:<input type="checkbox" name="" value="" checked/>提示
        注意:如果多个复选框采集的是同一组数据,则name必须保持一致
5)下拉列表:<select name="">
             	<option value="" selected>提示文字</option>
         	</select>
6)文本域:<textarea cols="" rows="">默认值</textarea>
7)email输入框:<input type="email" name=""/>  在提交时,自动对内容进行格式检查
8)提交按钮:<input type="submit" value="按钮上的提示文字"/>
9)重置按钮:<input type="reset" value="提示文字"/>
10) 普通按钮:<input type="button" value="提示文字"/>
11)url(网址)输入框:<input type="url" name="" value=""/> 提交时,自动检查value是否为合法网址
12)日期输入框:<input type="date" name="" /> 
   		 type可选值 --- date time week month  datetime
13)数字输入框:<input type="number" name="" value="" max="" min="" step=""/>
4.补充
1)隐藏框: <input type="hidden" name="" value=""/>
     特点 --- 属于表单一部分,不会显示在网页中,会随着表单的提交一并提交,目标程序可以获取其中value数据
2)文件选择对话框: <input type="file" name=""/>

五、CSS技术

1.概念
级联样式表,层叠样式表
2.嵌入到html里的方式
1) 行内样式 --- 通过为标签添加style属性来指定css样式
	<h1 style="css代码 color:red;background-color:blue">  HelloWorld </h1>
2)内嵌样式
	 语法:将css样式定义在head标签中,通过style标签添加
	<head>
   		<meta http-equiv="content-type" content="text/html;charset=GBK"/>
  		<style type="text/css">
        	 选择器{  css属性样式  }  -- 通过选择器描述需要设置样式的html标签
   		</style>
	</head>
3)外部样式文件
	  特点: 将css代码定义在一个以.css为结尾的文件中,需要使用样式的网页通过link标签引入
		1. 将css代码(只是css代码不包括标签)存放到单独的css文件中
		2.在Html文本中导入方式
			<link type="text/css" rel="stylesheet" href="xxx.css"/>
4)注意:
	当三种样式引入同时作用在一个标签上时,如果样式之间不冲突,那么效果叠加;如果有冲突,采用就近原则,最终生效优先级别是:行内样式 --> 内嵌样式 --> 外部样式文件。
3.常见选择器
1. 标签名选择器 : 通过标签名指定标签
	h1{ color:red ; background-color:blue }
	h2,h3,h4{ color: pink }
2. class选择器 : 通过class属性指定标签
	定义 -->  .class名{ css代码 }     .abc{color:green}
	使用 -->  <h1 class="abc">
3. id选择器: 通过为标签添加id属性来指定标签样式
	定义 -->  #id值{css代码}       #p1{ color:orange }
	使用 -->  <p id="p1">
	注意: id属性主要用来在网页里唯一标识一个标签,其次还可以为这个标签指定css样式
4. 后代选择器
	语法: 选择器1 选择器2{ css代码 }
	定义:  p h1{ color:red }      #d1 .abc h1{ ...... }
	作用: 为所有出现在p里的h1标签定义风格样式(包括儿子,孙子,...)
5. 伪类选择器 --- 针对超链接标签(鼠标悬停状态)
	a:hover{ ....... }
4.常见CSS属性
统一设置 background:颜色  图片  偏移  重复
   1.  图片小 , 区域大  :  background-repeat
   2.  图片大 , 区域小 :  偏移   -300px 图片整体向左移动300px,  -300px 图片整体向上移动300px

六、静态网页的发布

1.搭建web服务器(Tomcat7 )
1)配置tomcat软件运行的环境
	a.为本机设置环境变量 JAVA_HOME --- jdk的安装路径
	b.修改Tomcat的端口    tomcat/conf/server.xml----->图示
2)启动软件测试
	a.启动命令 :  tomcat/bin/startup.bat     软件不能重复启动
	b.关闭命令 : tomcat/bin/shutdown.bat 
	c.测试请求的接收:  http://IP地址:端口号

在这里插入图片描述

2.发布网页
1.tomcat目录结构
	tomcat
		|-- bin       存储了tomcat软件的启动关闭命令
		|-- conf      存储了tomcat软件需要的配置文件
		|-- lib       存储了tomcat运行过程中所需要使用的jar包
		|-- log       存储了tomcat运行过程中的日志文件(记录软件运行中的结果数据)
		|-- work      存储tomcat自动生成的一些文件内容
		|-- webapps   存放web应用所需要的所有资源文件(每一个文件夹都代表了一个独立的web应用)
		|-- myweb   代表了自己的web应用(存放应用相关资源文件 html image css java程序 js jsp..)
2.访问资源的地址
	    Http://192.168.1.3:8989/应用名/相对路径/文件名
	案例:
	    http://192.168.1.3:8989/myweb/day1/xxx.html
3.名词解释
1)request: 客户端发出资源访问要求(地址栏手工输入,提交按钮,超链接)
2)response:服务器软件对客户端request的回应
3)http协议: 短连接无状态协议(通信双方一旦通信成功,则立刻断开连接,并且不记录client任何信息)
4)网络地址称呼解析
	案例:http://192.16.0.3:8989/myweb/abc/XX.html?name=zhangsan&age=18
		1.URL(统一资源定位符):在网络里唯一定位一个资源
			组成: 协议 + ip + port + 应用名 + 资源的相对路径(文件名)
			案例: http://192.16.0.3:8989/myweb/abc/XX.html
		2. URI(统一资源描述符):在一台服务器上唯一定位一个资源
			组成: / + 应用名 + 资源相对路径
			案例: /myweb/abc/XX.html
			注意: 如果目标资源文件与当前资源文件在同一个服务器上,在描述路径时可以简写为uri
		3. url-pattern : 用来在一个应用中唯一定位资源
			组成:  / + 资源相对路径
			案例: /abc/XX.html
		4. 请求参数:随着请求发送传递的数据
			案例:name=zhangsan&age=18
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值