第59节:Java中的html和css语言

素颜马尾好姑娘i 2021-09-17 00:58 210阅读 0赞

![标题图][1240]

> 欢迎到我的简书查看我的文集

## 前言: ##

`HTML` 英文: `HyperText Markup Language`内容

`html`是超文本标记语言,是网页语言的基础知识,`html`是通过标签来定义的语言,所有代码都是由标签所组成的,在html代码中不用区分大小写.

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    </head>
    <body>
        
    </body>
    </html>

`html`代码是由`<html>`开始的,并且由`</html>`结束的,包含头部分`<head></head>`和体部分`<body></body>`两部分组成.

头部分是用来给`html`页面添加属性信息的,头部分是最先加载的内容,而体部分是页面数据存储的地方.

在`html`代码中,多数标签都是有开始标签和结束标签的，其中有个别标签因为只有单一功能,所以没有开始标签和结束标签这样.

这种个别标签: `<br />`, 要建议使用 `"/"`, 这是规范要求.

`html`为超文本标记语言,标记语言,要对标签进行修饰,添加丰富的内容操作,可以对属性值进行改变,增强效果,也可以增强用户体验感.

属性与属性值之间用“=”连接.  
文本尾部 “.txt” 改扩展名 为 “.html”.  
打开时默认关联打开浏览器.

格式：

// 超文本标记
    <标签名 属性名='属性值' />
    <标签名 属性名='属性值'> 数据内容 </标签名>

在`html`中,代码都是由标签所组成的,代码逻辑相当低.

// 头和体
    <html>
     <head>
      <title></title>
     </head> // 网页的属性信息
     <body>
     </body> // 网页的数据内容
    </html>

`html`是网页的最基本语言,为了操作数据,需要对数据进行不同标签的封装并通过标签中的属性可以对封装的数据进行操作.

> 字体标签

字体标签为: `<font>`

例如: `<font size="10px" color="red">`达叔小生`</font>`

复杂颜色用`16`进制表示，表现形式`#FF0000`两个数为一组，按红，绿，蓝排列，如：`#00FF00`表示绿色.

标题标签: `<h1><h2>...<h6>`  
数字越大越小来着.

![特殊字符][1240 1]

> 列表标签

<dt>为上层项目
    <dd>为下层项目

实例:

<dl>
    	<dt>名称</dt>
    		<dd>达叔小生</dd>
    		<dd>dashucoding</dd>
    	<dt>部门名称</dt>
    		<dd>技术部</dd>
    		<dd>研究部</dd>
    </dl>

<ol>为数字标签,<ul>为符号标签,<li>为具体项目内容标签

![列表][1240 2]

> 图像标签

<img>
    // 实例
    <img src=”1.jpg” align=”middle” border=”3” alt=”图片说明文字”/>
    // align时属性定义图片的排列方式
    // border是用来设置图像的边框

地图 `<map>`

> 表格标签

<table>
    标题标签为<caption>,是表格的标题
    表头标签:<th>
    行标签:<tr>
    单元格标签:<td>

实例:

![表格][1240 3]

// width值为百分比,让表格的宽度随浏览器窗口的大小变化
    <table border="1" width=”40%”>
    	<caption>表格标题</caption>
    	<tr>
    		<th>姓名</th>
    		<th>年龄</th>
    	</tr>
    	<tr algin=”center”>
    		<td>达叔小生</td>
    		<td>dashucoding</td>
    	</tr>
    </table>

实例2:

// 表头标签:<th>
    // colspan：th标签占两列
    <table border="1" width="40%">
    <tr>
    	<tr>
    	<th colspan="2"> 
    	个人信息
    	</th>
    	</tr>
    	<tr align="center">
    		<td>达叔小生</td>
    		<td>dashucoding</td>
    	</tr>
    </tr>
    </table>

<tbody></tbody>表格体

> 超链接 `<a>`标签

1. 超链接<a href=””>
    <a href=”http://www...cn” target=”_blank”>达叔</a>
    2. 定位标记<a name=””> 
    <a name=”标记”>标记位置</a>
    <a href=”#标记”>返回标记位置</a>

> 框架

// <frameset>
    框架标签会到<head>和<body>之间
    例子:
    <frameset>
    </frameset>

画中画标签：`<iframe>`

> 表单

![form][]

![sex][]

表单标签：<form>
    输入标签 input
    文本框 text
    密码框 password
    
    单选框 radio
    复选框 checkbox
    隐藏字段 hidden
    
    提交按钮 submit
    重置按钮 reset
    按钮 button
    按钮 button
    图像 image
    
    选择标签 <select>
    子项标签 <option>
    多行文本框 <textarea>

![表单][1240 4]

表单提交：明确提交方式,指定`method`属性值,默认为`get`,`form`表单中的`action`属性值,是指定表单数据提交的目的地.

> `get`和`post`

`get`提交的数据会显示在地址栏中,而`post`不会,使用`get`会对敏感信息不安全.

`get`的提交数据体积有限,而`post`可以提交大体积的数据.

`get`将提交数据封装到了`http`消息头的第一行,而`post`将提交的数据封装到消息头后

> 提交表单建议使用`post`

> 头标签

头标签放在<head></head>头部分之间
    <title>用于显示浏览器的标题栏内容
    <base> href 属性和 target 属性
    <meta>用于网页的描述信息,是搜索引擎的关键字进行搜索
    <link> 
    rel (目标文档与当前文档的关系)属性 
    type (文档类型)属性 
    media (在哪种设备上起作用)属性

> `XHTML`(可扩展的超文本标记语言)  
> `Extensible HyperText Markup Language`  
> `XML`(可扩展标记语言) -> 对数据信息的描述  
> `Extensible Markup Language`  
> `HTML` \-> 数据显示的描述

public class Server{
     public static void main(String[] args) throws Exception {
      ServerSocket ss = new ServerSocket(90);
      Socket s = ss.accept();
      System.out.println(s.getInetAddress().getHostAddress());
      InputStream in = s.getInputStream();
      byte[] buf=new byte[1024];
      int len = in.read(buf);
      String text = new String(buf,0,len);
      System.out.println(text);
      PrintWriter out = new PrintWriter(s.getOutputStream(),true);
      out.println();
     }
    }

> meta标签

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    
    
    <title>Insert title here</title>
    </head>
    <body>
    
    你好
    
    </body>
    </html>

## `Java`中`css`的学习 ##

`css`是用来实现网页的页面效果,层叠样式表(`Cascading Style Sheets`),`css`将页面的内容和显示样式进行了分离,提高了显示功能.

四种方式:

1.  style属性方式

1.  style内嵌方式

1.  导入方式

@import url(css_1.css);

1.  链接方式

> 样式优先级是由上到下，由外到内

`css`选择器共有三种：

1.  `html`标签名选择器
2.  `class`选择器 -> 标签名`.class`值
3.  `id`选择器 -> `#id`值

i. 关联选择器

p b { color:#fff;}

ii. 组合选择器

p,div { color:#fff;}

iii. 伪元素选择器

a:link  超链接未点击状态。
    a:visited 被访问后的状态。
    a:hover 光标移到超链接上的状态（未点击）。
    a:active 点击超链接时的状态。

![标签][1240 5]

> `@import`

![导入][1240 6]

> 达叔小生：往后余生，唯独有你  
> You and me, we are family !  
> 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
> 简书博客： 达叔小生  
> [https://www.jianshu.com/u/c785ece603d1][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

*  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

[1240]: /images/20210724/b6461b4862224c2fb3489750ed2ddfc0.png
[1240 1]: /images/20210724/ba929bd6964246bcb24b9dc12cc29a9a.png
[1240 2]: /images/20210724/e9e891b1103743f0bc0857fceb81b69d.png
[1240 3]: /images/20210724/aa87a5ecfdde4fedb267f723805d3d5d.png
[form]: /images/20210724/0638ff40b2184979aab169c6f670b50a.png
[sex]: /images/20210724/bc1f439da4db46c3991d89ced5ae1fba.png
[1240 4]: /images/20210724/62e0449fdd644bf09f3ffeaabf4d49f5.png
[1240 5]: /images/20210724/fb1574fbe8834f2caa0bea7b9ccd5808.png
[1240 6]: /images/20210724/141a50bd997543df9890b93af95f0163.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1