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

前言:

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>

数字越大越小来着.

列表标签

<dt>为上层项目

<dd>为下层项目

实例:

<dl>

	<dt>名称</dt>

		<dd>达叔小生</dd>

		<dd>dashucoding</dd>

	<dt>部门名称</dt>

		<dd>技术部</dd>

		<dd>研究部</dd>

</dl>


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

图像标签

<img>

// 实例

<img src=”1.jpg” align=”middle” border=”3” alt=”图片说明文字”/>

// align时属性定义图片的排列方式

// border是用来设置图像的边框

地图 <map>

<img src="dashucoding.jpg" alt="图片说明文字" usemap="#Map" />

  <map >

    <area shape="rect" coords="40,50,100,104" href="1.html" />

    <area shape="circle" coords="118,203,40" href="2.html" />

  </map>

表格标签

<table>

标题标签为<caption>,是表格的标题

表头标签:<th>

行标签:<tr>

单元格标签:<td>

实例:

// 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 rows="20%,*>

// 上部分

 <frameset cols="28%,*>

 </frameset>

</frameset>


// <frameset>

框架标签会到<head>和<body>之间

例子:

<frameset>

</frameset>

画中画标签：<iframe>

<iframe src=”1.html” >

</iframe>

表单

表单标签：<form>

输入标签 input

文本框 text

密码框 password

单选框 radio

复选框 checkbox

隐藏字段 hidden

提交按钮 submit

重置按钮 reset

按钮 button

按钮 button

图像 image

选择标签 <select>

子项标签 <option>

多行文本框 <textarea>

表单提交：明确提交方式,指定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">

<!--  meta http-equiv="refresh" content="3;url=http://www.sina.com.cn" /-->

<title>Insert title here</title>

</head>

<body>

你好

</body>

</html>


<i>一下</i>

<u>其他</u>

<strong>标签</strong>

X<sub>2</sub>  X<sup>2</sup>

<pre>代码格式</pre>

Java中css的学习

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

四种方式:

  1. style属性方式
<p style="";></p>
  1. style内嵌方式
<style type=”text/css”>

</style>
  1. 导入方式
@import url(css_1.css);
  1. 链接方式
<link rel="stylesheet" type="text/css" href="css_1.css" media="screen" />

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

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 点击超链接时的状态。

@import

达叔小生：往后余生，唯独有你

You and me, we are family !

90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通

简书博客： 达叔小生

https://www.jianshu.com/u/c785ece603d1

结语

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

第59节:Java中的html和css语言的更多相关文章

  1. 第83节:Java中的学生管理系统分页功能

    第83节:Java中的学生管理系统分页功能 分页功能一般可以做成两种,一种是物理分页,另一种是逻辑分页.这两种功能是有各自的特点的,物理分页是查询的时候,对数据库进行访问,只是查一页数据就进行返回,其 ...

  2. 第82节:Java中的学生管理系统

    第82节:Java中的学生管理系统 学生管理系统的删除功能 删除,点击超链接,点击弹出对话框式是否进行删除,如果确定,就删除,超链接执行的是js方法,在js里访问,跳转servlet,,servlet ...

  3. 第80节:Java中的MVC设计模式

    第80节:Java中的MVC设计模式 前言 了解java中的mvc模式.复习以及回顾! 事务,设置自动连接提交关闭. setAutoCommit(false); conn.commit(); conn ...

  4. 第79节:Java中一些要点

    第79节:Java中一些要点 前言 一些知识点忘了没,可以通过一个点引出什么内容呢?做出自己的思维导图,看看自己到了哪一步了呢 内容 如果有人问jre,jdk,jvm是什么,你怎么回答呢? jre的英 ...

  5. 第78节:Java中的网络编程(上)

    第78节:Java中的网络编程(上) 前言 网络编程涉及ip,端口,协议,tcp和udp的了解,和对socket通信的网络细节. 网络编程 OSI开放系统互连 网络编程指IO加网络 TCP/IP模型: ...

  6. 第77节:Java中的事务和数据库连接池和DBUtiles

    第77节:Java中的事务和数据库连接池和DBUtiles 前言 看哭你,字数:8803,承蒙关照,谢谢朋友点赞! 事务 Transaction事务,什么是事务,事务是包含一组操作,这组操作里面包含许 ...

  7. 第76节:Java中的基础知识

    第76节:Java中的基础知识 设置环境,安装操作系统,安装备份,就是镜像,jdk配置环境,eclipse下载解压即可使用,下载tomcat 折佣动态代理解决网站的字符集编码问题 使用request. ...

  8. 第71节:Java中HTTP和Servlet

    第71节:Java中HTTP和Servlet 前言 哭着也要看完!!!字数: 学习xml和TomCat 会写xml,看懂xml 解析对象 SAXReader reader = new SAXReade ...

  9. 第70节:Java中xml和tomcat

    第70节:Java中xml和tomcat 前言: 哭着也要看完,字数: jdbc crud - statement dao java.sql.Driver The interface that eve ...

随机推荐

  1. ICSE 2018 论文

    仅简单分析自己感兴趣的论文. 9.6 Million Links in Source Code Comments: Purpose, Evolution, and Decay 分析了 source c ...

  2. 杨其菊201771010134《面向对象程序设计（java）》第十四周学习总结

    第十四周学习总结 第一部分:理论知识 理论知识:本周学习Swing用户界面 内容:Swing与模型-视图-控制器设计模式:布局管理概述:文本输入 :选择组件:菜单:复杂的布局管理:对话框: 第二部分: ...

  3. 颜色16进制转为RGB格式

    <script> 2 function getRGB(str){ var arr = str.split(""); var myred = arr[1]+arr[2]; ...

  4. Maven 生成可执行的jar包

    maven 默认打包生成的 jar 包是不能够直接运行的,因为带有 main 方法的类信息不会添加到 manifest 中,即打开 jar 文件中的 META-INF/MANIFEST.MF 文件,将 ...

  5. [AI]SKLearn章1　快速入门

    SciKit learn的简称是SKlearn,是一个python库,专门用于机器学习的模块. SKlearn包含的机器学习方式: 分类,回归,无监督,数据降维,数据预处理等等,包含了常见的大部分机器 ...

  6. jqgrid content-type datatype

    jQuery('#jq2').jqGrid( { url: 'http://localhost:8080/api/RskPriceFactorTest/senario/0/detail', editu ...

  7. SqlSever 使用 CROSS APPLY 与 OUTER APPLY 连接查询

    前言 日常开发中遇到多表查询时,首先会想到 INNER JOIN 或 LEFT OUTER JOIN 等等,但是这两种查询有时候不能满足需求.比如,左表一条关联右表多条记录时,我需要控制右表的某一条或 ...

  8. http 自定义信息头（header）设置与获取

    一.后端设置(如:java) 在你服务端(如:java)返回的时候写上: res.setHeader("Access-Control-Expose-Headers",propNam ...

  9. spring+struts+hibernate整合

    spring整合: 1:添加配置文件和相应的spring jar包(记得一定要加上commons-logging的jar包,有坑****) 2:创建date对象,如果成功则spring的环境ok

  10. 使用Jmeter进行http接口做功能、性能测试

    在测试移动APP时,会有很多接口需要做测试,我在这里介绍一下对HTTP接口做功能.性能的测试.首先我们会从开发人员拿到接口数据.     一.测试需求描述 1. 本次测试的接口为http服务端接口 2 ...