HTML知识总结——javaweb笔记总结

最新推荐文章于 2022-07-13 23:00:14 发布

北朽暖栀24

最新推荐文章于 2022-07-13 23:00:14 发布

阅读量215

点赞数

分类专栏： javaweb 文章标签： html css javascript web

本文链接：https://blog.csdn.net/weixin_43484977/article/details/106410240

版权

javaweb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML标签的结构

<!DOCTYPE html> <!--约束，申明-->
<html>//html的开始
<head>
<meta charset="UTF-8">  <!--表示使用utf-8集-->
<title>Insert 标题 here</title> <!--表示标题-->
</head>
<body>//显示的主体内容
   hello
</body>
</html>

HTML标签的介绍
1.标签对大小写不敏感
2.属性
基本属性：可以修改简单的样式效果
如这里的 bgcolor=“green”

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
</head>
<body bgcolor="green">
   hello
</body>
</html>

事件属性：可以直接设置事件相应后的代码

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
</head>
<body onclick="alert('好')">
   hello
</body>
</html>

如这里的 οnclick=“alert(‘好’)”

3.标签的分类
单标签和双标签
单标签

  <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
</head>
<body onclick="alert('好')">
   hellojianshan
   <hr/>
</body>
</html>

这里的 <hr/> 是单标签，代表了下划线。

而就是双标签

HTML标签的语法：
1.标签不能嵌套
2.标签正确的关闭
3.标签必须有/ 如
就是错的
4.属性必须有值，属性值必须加引号
5.注释不能嵌套

常用标签介绍：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
</head>
<body >
  <font color="red" face="黑体" size="3">
     我是字体标签
   </font>
</body>
</html>

font中表示的是color表示颜色，face表示字体，size表示字体大小。

一些特殊的表示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
</head>
<body >
 
     我是<br>标签
   
</body>
</html>

这里输出不了<br>因为把它当作换行了
那怎么办？
写成这样就行

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
</head>
<body >
 
     我是&ltbr&gt标签
   
</body>
</html>

以下是几种常见的符号的特殊表示

<  &lt
>  &gt
空格 &nbsp

空格有很多个的时候系统会自动变成一个，所以需要有&nbsp来表示空格

标题用h1-h6表示，h7之后就不能识别了

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
</head>
<body >
 
<h1 align="left">好</h1>
<h1 align="right">不好</h1>
<h1 align="center">不好</h1>
</body>
</html>

align用来表示居中，居左，还是居右

超链接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
</head>
<body >
 
<a href="http://localhost:8080">百度</a><br/>
<a href="http://localhost:8080" target="_self">百度</a><br/>
<a href="http://localhost:8080" target="_blank">百度</a><br/>

</body>
</html>

无序列表

 target="_self"是默认值，表示当前页面变成那个链接
 target="_blank"是跳出一个新的页面变成那个链接
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
</head>
<body >
 
<ul type="none">
  <li>赵四<li>
  <li>王5<li>
  <li>李六<li>
 </ul>
</body>
</html>

ul是无序列表，li是列表项内容，type可以修改列表项前面的符号（但是不同浏览器有兼容问题）

img标签

<img src=" "  width=""   height=""  border="" alt="">

src表示？
src=" “里面是相对路径./文件名 表示当前目录下的文件
src=” “里面是相对路径文件名 表示当前目录下的文件 ./可以省略
src=” "里面是相对路径../文件名 表示上一级目录下的文件
绝对路径：http:// ip:port/工程名/资源路径
错误格式：盘符：/目录：/文件名

width表示宽度。
height表示高。
border表示边框。
alt在图片加载出错的时候显示“”里面的文本信息。

table 标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
</head>
<body >
 
<table align="center" border="1" widdth="500" height="100" cellspacing="120">
<tr>
   <th align="center"><b>1.1</b></th> <!--这里的align是指数据在单元格的大小-->
   <th>1.2</th>
</tr>
<tr>
   <td>2.1</td>
    <td>2.2</td>
</tr>
<tr>
   <td>3.1</td>
    <td>3.2</td>
</tr>
   </table>

table是表格标签：align是表格的位置，border设置表格边框，width设置表格宽度。height设置表格高度，cellspacing是单元格间距。

   <th>是表头标签会加粗
   <tr>是行标签
   <td>是单元格标签
   <b>是加粗标签

跨行跨列合并：

<td colspan="2" rowspan="2">  </td>

这里是将这个单元格的左右各两列合并了（记得删除要合并的数据）

iframe的使用

<iframe src="标题标签.html" name="abc"> <iframe>
<ul>
<li><a href="http://localhost:8080" target="abc">百度</a><li> <br/><!--这个一定要写,不然图片把标签覆盖了，就看不见了-->
</ul>

iframe是在当前窗口上拿一个小的窗口，底下的超链接设置了target="abc"那么点击跳出的这个页面会显示在小窗口上。

表单：
就是html页面中，用来手机所有html元素的集合，并且把这些信息发送给服务器。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
</head>
<body >
 <form> 用户名称：<input type="text" value="默认值"/>
 <br/> 用户密码：<input type="password" value="abc"/>
 <br/> 确认密码：<input type="password" value="abc"/>
 <br/> 性别：<input type="radio" name="sex"/>男<input type="radio" name="sex" checked="checked" />女<br/> 
 兴趣爱好：<input type="checkbox" checked="checked" />Java<input type="checkbox" />JavaScript<input type="checkbox" />C++<br/>
  国籍：<select> 
  <option>--请选择国籍--</option> 
  <option selected="selected">中国</option>
   <option>美国</option>
    <option>小日本</option> 
    </select><br/> 
    自我评价：<textarea rows="10" cols="20">我才是默认值</textarea><br/>
     <input type="reset" value="abc" /> 
     <input type="submit"/> 
     </form> 
</body> 
</html>

这是一个表单，其中各个标签的意思如下：

<!-form 标签就是表单 
input type=text 是文件输入框 value 设置默认显示内容 
input type=password 是密码输入框 value 设置默认显示内容
 input type=radio 是单选框 name 属性可以对其进行分组 checked="checked"表示默认选中
input type=checkbox 是复选框 checked="checked"表示默认选中 
input type=reset 是重置按钮 value 属性修改按钮上的文本
 input type=submit 是提交按钮 value 属性修改按钮上的文本 
 input type=button 是按钮 value 属性修改按钮上的文本 
 input type=file 是文件上传域 input type=hidden 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的 时候同时发送给服务器）
select 标签是下拉列表框 option 标签是下拉列表框中的选项 selected="selected"设置默认选中
textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值） rows 属性设置可以显示几行的高度 cols 属性设置每行可以显示几个字符宽度
-->

如何发送给服务器：form表单后发送信息

其中
form 标签是表单标签
action 属性设置提交的服务器地址
method 属性设置提交的方式 GET(默认值)或 POST

表单提交的时候，数据没有发送给服务器的三种情况：
1、表单项没有 name 属性值
2、单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器
3、表单项不在提交的 form 标签中
GET 请求的特点是：
1、浏览器地址栏中的地址是
action 属性[+?+请求参数] 请求参数的格式是：name=value&name=value
2、不安全
3、它有数据长度的限制
POST 请求的特点是：
1、浏览器地址栏中只有 action 属性值
2、相对于 GET 请求要安全
3、理论上没有数据长度的限制

span标签和 div标签和 p标签的区别

div 标签默认独占一行
span 标签它的长度是封装数据的长度
p 段落标签默认会在段落的上方或下方各空出一行来（如果已有就不再空）

CSS 技术介绍
CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

CSS和HTML一起使用：

1.在标签的 style 属性上设置”key:value value ;”，修改标签样式。

<body >
<!--需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。--> 
<div style="border: 1px solid red;">div 标签 1</div>
 <div style="border: 1px solid red;">div 标签 2</div>
  <span style="border: 1px solid red;">span 标签 1</span> 
  <span style="border: 1px solid red;">span 标签 2</span> 
</body>

这种方式的缺点？
1.如果标签多了。样式多了。代码量非常庞大。
2.可读性非常差。
3.Css 代码没什么复用性可方言。

在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。格式如下： xxx { Key : value value; }

在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。
格式如下： xxx { Key : value value; }

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
<style type="text/css"> 
div{ border: 1px solid red; }
 span{ border: 1px solid red; } </style> 
</head>
<body >
<div>div 标签 1</div>
<div>div 标签 2</div>
  <span >span 标签 1</span> 
  <span >span 标签 2</span> 
</body> 
</html>

缺点：
1.只能在同一页面内复用代码，不能在多个页面中复用 css 代码。
2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。

把 css 样式写成一个单独的 css 文件,再通过 link 标签引入即可复用。
使用 html 的标签导入 css 样式文件。在href=里面导入。

<head> 
<meta charset="UTF-8"> 
<title>Title</title> <!--link 标签专门用来引入 css 样式代码-->
 <link rel="stylesheet" type="text/css" href="1.css"/>
</head>

选择器：

1.标签名选择器
标签名选择器的格式是：标签名{ 属性：值; }
标签名选择器，可以决定哪些标签被动的使用这个样式。

2.id选择器
id 选择器的格式是： #id 属性值{ 属性：值; }
id 选择器，可以让我们通过 id 属性选择性的去使用这个样式。

3.类型选择器
class 类型选择器的格式是： .class 属性值{ 属性：值; }
class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式。

组合选择器的格式是：选择器 1，选择器 2，选择器 n{ 属性：值; }
组合选择器可以让多个选择器共用同一个 css 样式代码。

常用样式：
1、字体颜色 color：red；颜色可以写颜色名如：black,blue,red,green 等颜色也可以写 rgb 值和十六进制表示值：
如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#
2、宽度 width:19px; 宽度可以写像素值：19px；也可以写百分比值：20%；
3、高度 height:20px; 高度可以写像素值：19px；也可以写百分比值：20%；
4、背景颜色 background-color:#0F2D4C
5、字体样式： color：#FF0000；
字体颜色红色 font-size：20px; 字体大小;
6、红色 1 像素实线边框 border：1pxsolidred;
7、DIV 居中 margin-left:auto; margin-right:auto;
8、文本居中： text-align:center;
9、超连接去下划线 text-decoration:none;
10、表格细线 table
{ border:1pxsolidblack;/设置边框/
border-collapse:collapse;/将边框合并/ }
td,th
{ border:1pxsolidblack;/设置边框/ }
11、列表去除修饰 ul
{
list-style:none;
}

北朽暖栀24

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML知识总结——javaweb笔记总结

HTML标签的结构<!DOCTYPE html> <html>//html的开始<head><meta charset="UTF-8"> <title>Insert 标题 here</title> </head><body>//显示的主体内容 hello</body&g
复制链接

扫一扫