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

标题图

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

前言:

HTML 英文: HyperText Markup Language内容

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

Examples

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

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

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

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

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

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

格式：

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

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

// 头和体
 
  
  // 网页的属性信息 
  // 网页的数据内容

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

字体标签

字体标签为:

例如: 达叔小生

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

标题标签: ...
数字越大越小来着.

特殊字符

列表标签

为上层项目
为下层项目

实例:


    名称
        达叔小生
        dashucoding
    部门名称
        技术部
        研究部

为数字标签,为符号标签,为具体项目内容标签

列表

图像标签

// 实例// align时属性定义图片的排列方式
// border是用来设置图像的边框

地图

表格标签


标题标签为单元格标签:
    
        
        
    
    
        
        
    ,是表格的标题
表头标签:行标签:
实例:
表格
// width值为百分比,让表格的宽度随浏览器窗口的大小变化
    
表格标题姓名 年龄
达叔小生 dashucoding

,是表格的标题表头标签:
行标签:
实例: 表格 // width值为百分比,让表格的宽度随浏览器窗口的大小变化
姓名	年龄
达叔小生	dashucoding

实例2:

// 表头标签:// colspan：th标签占两列
    
     
    个人信息    
    
    
        达叔小生
        dashucoding

表格体

超链接标签

1. 超链接达叔2. 定位标记 标记位置返回标记位置

框架


// 上部分

// 框架标签会到和之间
例子:

画中画标签：</p><pre class='brush:php;toolbar:false'><iframe src=”1.html” >

表单

form

sex

表单标签：输入标签 input
文本框 text
密码框 password

单选框 radio
复选框 checkbox
隐藏字段 hidden

提交按钮 submit
重置按钮 reset
按钮 button
按钮 button
图像 image

选择标签 </pre><p></p><p>表单</p><p>表单提交：明确提交方式,指定method属性值,默认为get,form表单中的action属性值,是指定表单数据提交的目的地.</p><blockquote><p>get和post</p></blockquote><p>get提交的数据会显示在地址栏中,而post不会,使用get会对敏感信息不安全.</p><p>get的提交数据体积有限,而post可以提交大体积的数据.</p><p>get将提交数据封装到了http消息头的第一行,而post将提交的数据封装到消息头后</p><blockquote><p>提交表单建议使用post</p></blockquote><blockquote><p>头标签</p></blockquote><pre class='brush:php;toolbar:false'>头标签放在<head></head>头部分之间<title>用于显示浏览器的标题栏内容<base> href 属性和 target 属性<meta>用于网页的描述信息,是搜索引擎的关键字进行搜索<link> rel (目标文档与当前文档的关系)属性 
type (文档类型)属性 
media (在哪种设备上起作用)属性</pre><blockquote><p>XHTML(可扩展的超文本标记语言)<br>Extensible HyperText Markup Language<br>XML(可扩展标记语言) -> 对数据信息的描述<br>Extensible Markup Language<br>HTML -> 数据显示的描述</p></blockquote><pre class='brush:php;toolbar:false'>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();
 }
}</pre><blockquote><p>meta标签</p></blockquote><pre class='brush:php;toolbar:false'><!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></pre><pre class='brush:php;toolbar:false'><i>一下</i><u>其他</u><strong>标签</strong>X<sub>2</sub>  X<sup>2</sup><pre class='brush:php;toolbar:false'>代码格式</pre></pre>Java中css的学习<p>css是用来实现网页的页面效果,层叠样式表(Cascading Style Sheets),css将页面的内容和显示样式进行了分离,提高了显示功能.</p><p>四种方式:</p><ol class="list-paddingleft-2"><li><p>style属性方式</p></li></ol><pre class='brush:php;toolbar:false'><p style="";></p></pre><ol class="list-paddingleft-2"><li><p>style内嵌方式</p></li></ol><pre class='brush:php;toolbar:false'><sty1e type=”text/css”></style></pre><ol class="list-paddingleft-2"><li><p>导入方式</p></li></ol><pre class='brush:php;toolbar:false'>@import url(css_1.css);</pre><ol class="list-paddingleft-2"><li><p>链接方式</p></li></ol><pre class='brush:php;toolbar:false'><link rel="stylesheet" type="text/css" href="css_1.css" media="screen" /></pre><blockquote><p>样式优先级是由上到下，由外到内</p></blockquote><p>css选择器共有三种：</p><ol class="list-paddingleft-2"><li><p>html标签名选择器</p></li><li><p>class选择器 -> 标签名.class值</p></li><li><p>id选择器 -> #id值</p></li></ol><p>i. 关联选择器</p><pre class='brush:php;toolbar:false'>p b { color:#fff;}</pre><p>ii. 组合选择器</p><pre class='brush:php;toolbar:false'>p,div { color:#fff;}</pre><p>iii. 伪元素选择器</p><pre class='brush:php;toolbar:false'>a:link  超链接未点击状态。a:visited 被访问后的状态。a:hover 光标移到超链接上的状态（未点击）。a:active 点击超链接时的状态。</pre><p></p><p>标签</p><blockquote><p>@import</p></blockquote><p></p><p>导入</p><p><br><br>作者：达叔小生<br>链接：https://www.jianshu.com/p/4390d9ecd424<br><br></p><p><br></p></div>
</div>
<div style="clear: both;"></div>
<div class="author-info fl">
<div><span class="gray">转载请注明：</span>文章转载自 <a href="https://www.mshxw.com/" class="blue">www.mshxw.com</a></div>
<div><span class="gray">本文地址：</span><a href="https://www.mshxw.com/it/247055.html" class="blue">https://www.mshxw.com/it/247055.html</a></div>
</div>
<div class="prev fl">
<p>   <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="https://www.mshxw.com/it/247054.html">上一篇  JavaScript创建对象之字面量</a>
 </p>
<p>   <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="https://www.mshxw.com/it/247056.html">下一篇  从源码的角度看 React JS 中批量更新 State 的策略（上）</a>
  </p>
</div>
<div class="new_tag fl">
</div>
</div>
<div class="new_r fr" style="border-radius:10px;">
<div class="tui fl">
<h3>JavaScript相关栏目本月热门文章</h3>
<ul>
  <li><span>1</span><a href="https://www.mshxw.com/it/1041277.html" title="【Linux驱动开发】设备树详解（二）设备树语法详解">【Linux驱动开发】设备树详解（二）设备树语法详解</a></li>
  <li><span>2</span><a href="https://www.mshxw.com/it/1041273.html" title="别跟客户扯细节">别跟客户扯细节</a></li>
  <li><span>3</span><a href="https://www.mshxw.com/it/1041266.html" title="Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区">Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区</a></li>
  <li><span>4</span><a href="https://www.mshxw.com/it/1041261.html" title="【Java】对象处理流（ObjectOutputStream和ObjectInputStream）">【Java】对象处理流（ObjectOutputStream和ObjectInputStream）</a></li>
  <li><span>5</span><a href="https://www.mshxw.com/it/1041256.html" title="【分页】常见两种SpringBoot项目中分页技巧">【分页】常见两种SpringBoot项目中分页技巧</a></li>
  <li><span>6</span><a href="https://www.mshxw.com/it/1041299.html" title="一文带你搞懂OAuth2.0">一文带你搞懂OAuth2.0</a></li>
  <li><span>7</span><a href="https://www.mshxw.com/it/1041297.html" title="我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍">我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍</a></li>
  <li><span>8</span><a href="https://www.mshxw.com/it/1041296.html" title="【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成">【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成</a></li>
  <li><span>9</span><a href="https://www.mshxw.com/it/1041294.html" title="JavaSE - 封装、static成员和内部类">JavaSE - 封装、static成员和内部类</a></li>
  <li><span>10</span><a href="https://www.mshxw.com/it/1041291.html" title="树莓派mjpg-streamer实现监控及拍照功能调试">树莓派mjpg-streamer实现监控及拍照功能调试</a></li>
  <li><span>11</span><a href="https://www.mshxw.com/it/1041289.html" title="用c++写一个蓝屏代码">用c++写一个蓝屏代码</a></li>
  <li><span>12</span><a href="https://www.mshxw.com/it/1041285.html" title="从JDK8源码中看ArrayList和LinkedList的区别">从JDK8源码中看ArrayList和LinkedList的区别</a></li>
  <li><span>13</span><a href="https://www.mshxw.com/it/1041281.html" title="idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目">idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目</a></li>
  <li><span>14</span><a href="https://www.mshxw.com/it/1041282.html" title="在openwrt使用C语言增加ubus接口（包含C uci操作）">在openwrt使用C语言增加ubus接口（包含C uci操作）</a></li>
  <li><span>15</span><a href="https://www.mshxw.com/it/1041278.html" title="Spring 解决循环依赖">Spring 解决循环依赖</a></li>
  <li><span>16</span><a href="https://www.mshxw.com/it/1041275.html" title="SpringMVC——基于MVC架构的Spring框架">SpringMVC——基于MVC架构的Spring框架</a></li>
  <li><span>17</span><a href="https://www.mshxw.com/it/1041272.html" title="Andy‘s First Dictionary C++ STL set应用">Andy‘s First Dictionary C++ STL set应用</a></li>
  <li><span>18</span><a href="https://www.mshxw.com/it/1041271.html" title="动态内存管理">动态内存管理</a></li>
  <li><span>19</span><a href="https://www.mshxw.com/it/1041270.html" title="我的创作纪念日">我的创作纪念日</a></li>
  <li><span>20</span><a href="https://www.mshxw.com/it/1041269.html" title="Docker自定义镜像-Dockerfile">Docker自定义镜像-Dockerfile</a></li>
</ul>
</div>
</div>
</div>
<!-- 公共尾部 -->
<div class="link main">
<div class="link_tit">
<span class="on">热门相关搜索</span>
</div>
<div class="link_tab">
<div class="link_con">
<a href="http://www.mshxw.com/TAG_1/luyouqishezhi.html">路由器设置</a>
<a href="http://www.mshxw.com/TAG_1/mutuopan.html">木托盘</a>
<a href="http://www.mshxw.com/TAG_1/baotamianban.html">宝塔面板</a>
<a href="http://www.mshxw.com/TAG_1/shaoerpython.html">儿童python教程</a>
<a href="http://www.mshxw.com/TAG_1/xinqingdiluo.html">心情低落</a>
<a href="http://www.mshxw.com/TAG_1/pengyouquan.html">朋友圈</a>
<a href="http://www.mshxw.com/TAG_1/vim.html">vim</a>
<a href="http://www.mshxw.com/TAG_1/shuangyiliuxueke.html">双一流学科</a>
<a href="http://www.mshxw.com/TAG_1/zhuanshengben.html">专升本</a>
<a href="http://www.mshxw.com/TAG_1/wodexuexiao.html">我的学校</a>
<a href="http://www.mshxw.com/TAG_1/rijixuexiao.html">日记学校</a>
<a href="http://www.mshxw.com/TAG_1/xidianpeixunxuexiao.html">西点培训学校</a>
<a href="http://www.mshxw.com/TAG_1/qixiuxuexiao.html">汽修学校</a>
<a href="http://www.mshxw.com/TAG_1/qingshu.html">情书</a>
<a href="http://www.mshxw.com/TAG_1/huazhuangxuexiao.html">化妆学校</a>
<a href="http://www.mshxw.com/TAG_1/tagouwuxiao.html">塔沟武校</a>
<a href="http://www.mshxw.com/TAG_1/yixingmuban.html">异形模板</a>
<a href="http://www.mshxw.com/TAG_1/xinandaxuepaiming.html">西南大学排名</a>
<a href="http://www.mshxw.com/TAG_1/zuijingpirenshengduanju.html">最精辟人生短句</a>
<a href="http://www.mshxw.com/TAG_1/6bujiaonizhuihuibeipian.html">6步教你追回被骗的钱</a>
<a href="http://www.mshxw.com/TAG_1/nanchangdaxue985.html">南昌大学排名</a>
<a href="http://www.mshxw.com/TAG_1/qingchaoshierdi.html">清朝十二帝</a>
<a href="http://www.mshxw.com/TAG_1/beijingyinshuaxueyuanpaiming.html">北京印刷学院排名</a>
<a href="http://www.mshxw.com/TAG_1/beifanggongyedaxuepaiming.html">北方工业大学排名</a>
<a href="http://www.mshxw.com/TAG_1/beijinghangkonghangtiandaxuepaiming.html">北京航空航天大学排名</a>
<a href="http://www.mshxw.com/TAG_1/shoudoujingjimaoyidaxuepaiming.html">首都经济贸易大学排名</a>
<a href="http://www.mshxw.com/TAG_1/zhongguochuanmeidaxuepaiming.html">中国传媒大学排名</a>
<a href="http://www.mshxw.com/TAG_1/shoudoushifandaxuepaiming.html">首都师范大学排名</a>
<a href="http://www.mshxw.com/TAG_1/zhongguodezhidaxue(beijing)paiming.html">中国地质大学(北京)排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingxinxikejidaxuepaiming.html">北京信息科技大学排名</a>
<a href="http://www.mshxw.com/TAG_1/zhongyangminzudaxuepaiming.html">中央民族大学排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingwudaoxueyuanpaiming.html">北京舞蹈学院排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingdianyingxueyuanpaiming.html">北京电影学院排名</a>
<a href="http://www.mshxw.com/TAG_1/zhongguohuquxueyuanpaiming.html">中国戏曲学院排名</a>
<a href="http://www.mshxw.com/TAG_1/hebeizhengfazhiyexueyuanpaiming.html">河北政法职业学院排名</a>
<a href="http://www.mshxw.com/TAG_1/hebeijingmaodaxuepaiming.html">河北经贸大学排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjinzhongdeyingyongjishudaxuepaiming.html">天津中德应用技术大学排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjinyixuegaodengzhuankexuejiaopaiming.html">天津医学高等专科学校排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjinmeishuxueyuanpaiming.html">天津美术学院排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjinyinlexueyuanpaiming.html">天津音乐学院排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjingongyedaxuepaiming.html">天津工业大学排名</a>
<a href="http://www.mshxw.com/TAG_1/beijinggongyedaxuegengdanxueyuanpaiming.html">北京工业大学耿丹学院排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingjingchaxueyuanpaiming.html">北京警察学院排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjinkejidaxuepaiming.html">天津科技大学排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingyoudiandaxue(hongfujiaoou)paiming.html">北京邮电大学(宏福校区)排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingwanglaozhiyexueyuanpaiming.html">北京网络职业学院排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingdaxueyixuebupaiming.html">北京大学医学部排名</a>
<a href="http://www.mshxw.com/TAG_1/hebeikejidaxuepaiming.html">河北科技大学排名</a>
<a href="http://www.mshxw.com/TAG_1/hebeidezhidaxuepaiming.html">河北地质大学排名</a>
<a href="http://www.mshxw.com/TAG_1/hebeitiyoxueyuanpaiming.html">河北体育学院排名</a>
</div>
</div>
</div>
<div class="footer">
<div class="dl_con">
<div class="width1200">
<dl>
<dt>学习工具</dt>
<dd><a href="https://www.mshxw.com/tools/algebra/" title="代数计算器">代数计算器</a></dd>
<dd><a href="https://www.mshxw.com/tools/trigonometry/" title="三角函数计算器">三角函数</a></dd>
<dd><a href="https://www.mshxw.com/tools/analytical/" title="解析几何">解析几何</a></dd>
<dd><a href="https://www.mshxw.com/tools/solidgeometry/" title="立体几何">立体几何</a></dd>
</dl>
<dl>
<dt>知识解答</dt>
<dd><a href="https://www.mshxw.com/ask/1033/"  title="教育知识">教育知识</a></dd>
<dd><a href="https://www.mshxw.com/ask/1180/"  title="百科知识">百科知识</a></dd>
<dd><a href="https://www.mshxw.com/ask/1155/"  title="生活知识">生活知识</a></dd>
<dd><a class="https://www.mshxw.com/ask/1199/"  title="常识知识">常识知识</a></dd>
</dl>
<dl>
<dt>写作必备</dt>
<dd><a href="https://www.mshxw.com/zuowen/1128/" title="作文大全">作文大全</a></dd>
<dd><a href="https://www.mshxw.com/zuowen/1130/" title="作文素材">作文素材</a></dd>
<dd><a href="https://www.mshxw.com/zuowen/1132/" title="句子大全">句子大全</a></dd>

<dd><a href="https://www.mshxw.com/zuowen/1154/" title="实用范文">实用范文</a></dd>
</dl>
<dl class="mr0">
<dt>关于我们</dt>
<dd><a href="https://www.mshxw.com/about/index.html" title="关于我们" rel="nofollow">关于我们</a></dd>
<dd><a href="https://www.mshxw.com/about/contact.html" title="联系我们" rel="nofollow">联系我们</a></dd>
<dd><a href="https://www.mshxw.com/sitemap/" title="网站地图">网站地图</a></dd>
</dl>
<div class="dl_ewm">
<div class="wx"> <img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/gzh.jpg" alt="交流群">
<p>名师互学网交流群</p>
</div>
<div class="wx"><img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/weixin.jpg" alt="名师互学网客服">
<p>名师互学网客服</p>
</div>
</div>
</div>
</div>
<div class="copyright">
<p>名师互学网 版权所有 (c)2021-2022      ICP备案号：<a href="https://beian.miit.gov.cn" rel="nofollow">晋ICP备2021003244-6号</a>
 </p>
</div>
</div>
<!-- 手机端 -->
<div class="m_foot_top">
<img src="https://www.mshxw.com/foot.gif" width="192" height="27" alt="我们一直用心在做"><br/>
<a href="https://www.mshxw.com/about/index.html">关于我们</a>
<a href="https://www.mshxw.com/archiver/">文章归档</a>
<a href="https://www.mshxw.com/sitemap">网站地图</a>
<a href="https://www.mshxw.com/about/contact.html">联系我们</a>
<p>版权所有 (c)2021-2022 MSHXW.COM</p>
<p>ICP备案号：<a href="https://beian.miit.gov.cn/" rel="nofollow">晋ICP备2021003244-6号</a></p>
</div>
<div class="to_top" style="display:none;"><img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/to_top.png"></div>
<!--广告!-->
<script type="text/javascript" src="https://www.mshxw.com/skin/sinaskin//kaotop/js/top.js"></script>
<script src="https://www.mshxw.com/skin/sinaskin//kaotop/js/fixed.js" type="text/javascript"></script>
<!--头条搜索!-->
<script>
(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?018f42187355ee18d1bfcee0487fc91a76ac6319beb05b7dc943033ed22c446d3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)
</script>
<!--头条搜索结束!-->
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?e05fec1c87ee5ca07f1ce57d093866c4";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
</div>
<script type="text/javascript">
$(".alert_kf").click(function() {
      mantis.requestChat();
 });
</script>
<script type="text/javascript">
var mySwiper_weixin = new Swiper('.pc_swiper_weixin', {
autoplay: 3000, //可选选项，自动滑动
loop: true,
speed: 1000,
pagination: '.swiper-pagination',
paginationClickable: true,
})
</script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$(".to_top").fadeIn(1000);
} else {
$(".to_top").fadeOut(1000);
}
});
$(".to_top").click(function() {
if ($('html').scrollTop()) {
$('html').animate({
scrollTop: 0
}, 300);
return false;
}
$('body').animate({
scrollTop: 0
}, 300);
return false;
});
});
</script>
</body>
</html>