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

前言:

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. SpringMVC 使用PUT请求遇到的问题小结

    最近在使用REST风格的URL进行CURD操作的学习过程中 发现使用PUT请求时候提交表单进行修改操作 报错:Request method 'PUT' not supported 在网上查找资料发现是 ...

  2. bootstrap treeview 树形数据生成

    这个问题还是挺经典的,后台只是负责查出所有的数据,前台js来处理数据展示给treeview;show you the code below:<script> $(function () { ...

  3. EL表达式、JSTL标签库

    一.EL(Expression Language)表达式 语法结构:${var} 若要停用对EL表达式的评估的话,需要使用page指令将isELIgnored属性值设为true: <%@ pag ...

  4. python json.dumps()函数输出json格式，使用ensure_ascii参数对中文输入的支持

    在python使用过程中,输入中文,不能正常的输出,可以使用ensure_ascii参数来解决不能输入中文的问题 代码块: import json friends={"name": ...

  5. [JavaScript] 弹出编辑框

    效果:单击图片copy,双击图片或者点Edit都会打开编辑窗口 Style <style> .black_overlay{ display: none; position: absolut ...

  6. 关于python的感想和turtle作图

    第一次知道有python这个东西是在去年七月份,就是一堆编程语言,当时我想它应该离我很远,也没对它有什么兴趣.直到在三月份的某一天我真正接触了它,其实也不是我主动,环境下学期必须学这东西.我有它的必修 ...

  7. Linux 平台 tcpdump 抓包

    一. 在ecs上准备好mysql客户端命令 二. 开启抓包,抓包方法如下:Linux 平台: 1. 打开一个到ECS的ssh连接,并以root身份登录.在该窗口运行下列命令tcpdump -i any ...

  8. No rule to make target '/usr/lib/x86_64-linux-gnu/libproj.so ，needed by '../bin/generate_pointcloud解决方法

    这是/usr/lib/x86_64-linux-gnu/文件夹内没有这个libproj.so 库,先在该文件夹内搜索是否有同名不同版本的库,如果有 ,可以使用ln -s在该文件夹内部对存在的库链接到一 ...

  9. Vue 获取登录用户名

    本来是打算登录的时候把用户名传过去,试了几次都没成功,然后改成用cookie保存用户名,然后在读取就行了, 登录时候设置cookie setCookie(c_name,c_pwd,exdays) { ...

  10. 《Linux就该这么学》第十天课程

    使用RAID与LVM磁盘阵列技术 有RAID 0,RAID 1,,RAID 5,RAID 1 0等,下面列举RAID的各个概况 1. RAID 0 RAID 0技术把多块物理硬盘设备(至少两块)通过硬 ...