Web阶段--HTML基础知识点

最新推荐文章于 2022-02-04 10:46:59 发布

「已注销」

最新推荐文章于 2022-02-04 10:46:59 发布

阅读量277

点赞数 1

分类专栏：前端文章标签： HTML与CSS

本文链接：https://blog.csdn.net/GYmimi/article/details/90695219

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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