标签：四足 java color html font 机械 选择器 css
之前写过小程序时，学过些皮毛，这里就简单列列复习一下
基本标签
<!doctype html>
<html>
<head>
<meta http-equiv="Content" content="text/html" charset="utf-8"/>
<!--网页头部内容-->
<title>文字和段落标签</title>
</head>
<body>
<!-- 网页主题内容-->
这是主题内容
<h1>this is h1 label</h1>
<h2>this is h2 label</h2>
<!--段落：align用来调节对齐--><!--br为换行-->
<p align="right">生活就像海洋，<br>只有意志坚强的人才能到达彼岸</p>
<p align="left">我的爱如 潮水</p><!--空格： -->
<pre>this is my job , but i want to another job</pre><!--这里不用写 了-->
<!-- 水平线-->
<hr width="80%" color="#3399CC" align="left">
<i>文字斜体</i>
<em>文字斜体</em>
<strong>加粗</strong>
<b>关键字</b>
<sup>上标</sup>
<sub>下标</sub>
<ins>下划线</ins>
<del>划开</del>
<!--特殊符号-->
<p><天啊></p>
</body>
</html>
展示：
列表
<!doctype html>
<html>
<head>
<meta http-equiv="Content" content="text/html" charset="utf-8"/>
</head>
<body>
<!--无序列表-->
<ul>
<li>one</li>
<li>two</li>
<li>tree</li>
</ul>
<ul type="circle">
<li>one</li>
<li>two</li>
<li>tree</li>
</ul>
<ul type="square">
<li>one</li>
<li>two</li>
<li>tree</li>
</ul>
<!--有序列表-->
<ol>
<li>早睡早起</li>
<li>天天学习</li>
</ol>
<ol type="a">
<li>早睡早起</li>
<li>天天学习</li>
</ol>
<ol type="I">
<li>早睡早起</li>
<li>天天学习</li>
</ol>
<!--定义列表-->
<dl>
<dt>什么是礼貌</dt>
<dd>你好</dd>
<dd>hello</dd>
<dt>什么是勤奋</dt>
<dd>天天学习</dd>
<dd>学习新思想，争做新青年</dd>
</dl>
</body>
</html>
展示
图片
超链接
<!doctype html>
<html>
<head>
<meta http-equiv="Content" content="text/html" charset="utf-8"/>
</head>
<body>
<!--跳转-->
<a href="http://www.baidu.com">跳转到到百度</a><br>
<a href="http://www.baidu.com" target="_blank">在新界面打开</a>
<!-- 使用锚 -->
<a href="#one">跳转到one</a>
<a href="#two">跳转到two</a><br>
<pre>随着经济的快速发展，科技不断进步，机器人的应用领域越
来越广泛。特别是四足机械狗，在国内外受到多方面
的研究关注，具有重要的研究意义和广阔的发展前
景。四足机械狗的研制涉及到生物力学、机
械运动学、动力学、控制学科、计算机技
术、传感技术等，由于其独特的结构优势
，灵活的运动特性，适合在大多数复杂
的地形上行走。本项目以小型四足机械
狗为研究对象，通过建立机械狗步态运动数学模型，获得机械狗运动控制参数，设计了机械狗软硬件控制系统，研制了
利用手机无线控制机械狗运动的原理样机，为后续利用该机械狗平台探索极端环境监测奠定了基础。
<a href="" name="one">（1） 建立了小型四足机械狗运动数学模型，利用matlab对机械狗的多种步态进行仿真，获得合适的机械狗步态运动参数；利用D-H参数构建坐标和关节角度的模型，建立坐标变换矩阵，根据正逆运动分析，得到舵机角度与足尖坐标之间相互转换，并将转换关系运用到步态分析上，从而求解舵机的运动角度，最终实现控制机械狗的步态运动。
<a href="" name="two">（2） 设计了一种小型四足机械狗大-小腿连杆驱动机构，并对其关键零部件进行强度校核计算。该结构具有驱动灵活，结构简单，成本低等优势，适合批量生产。</pre>
</body>
</html>
展示
表格
<!doctype html>
<html>
<head>
<meta http-equiv="Content" content="text/html" charset="utf-8"/>
</head>
<body>
<!--表格-- tr为每一行，td为行中元素（即列） -->
<table border="1" width="300px" cellspacing="0" cellpadding="0" frame="below" >
<tr align="center" valign="bottom" bgcolor="#999999">
<th>姓名</th>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张飞</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>陈楠</td>
<td>女</td>
<td>20</td>
</tr>
</table>
<!--带结构的表格-->
<table border="1" align="left" width="500" bgcolor="#33FFCC">
<caption>XX公司员工信息</caption>
<thead>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<tbody>
<tr>
<td>张飞</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>陈楠</td>
<td>女</td>
<td>20</td>
</tr>
</tbody>
<tfoot>
<tr>
<td height="100px" bgcolor="#CC33FF">无</td>
<td>无</td>
<td>无</td>
</tr>
</tfoot>
</thead>
</body>
</html>
展示
表单
<!doctype html>
<html>
<head>
<meta http-equiv="Content" content="text/html" charset="utf-8"/>
</head>
<body>
<form action="" method="post"> <!--action：向何处发送表单， method：以什么方式发送，有post和get
姓名：<input type="text" name="username" placeholder="填写提示"/>
密码：<input type="password" name="password"/>
<br>
出生地：<input type="text" placeholder="北京（默认）" maxlength="6" />
<!-- 根据value来确定传了什么值-->
性别：<input type="radio" name="sex" value="man" checked/>男
<input type="radio" name="sex" value="women"/>女<br>
爱好：<input type="checkbox" name="like" value="游泳" checked/>游泳
<input type="checkbox" name="like" value="打球"/>打球
<input type="submit"/ value="提交按钮"><!--提交按钮-->
<input type="button" value="普通按钮"/><!--普通按钮-->
<input type="reset" value="重置按钮"/> <!--重置按钮--> <br>
<!--下拉菜单和列表-->
<select>
<option value="长剑">长剑</option>
<option value="飞刀" selected>飞刀</option> <!--设定默认值-->
<option value="红缨枪">红缨枪</option>
</select>
<select size="2" multiple> <!--添加multiple可以多项选择-->
<option value="长剑">长剑</option>
<option value="飞刀">飞刀</option>
<option value="红缨枪">红缨枪</option>
<option value="白缨枪">白缨枪</option>
<option value="黑缨枪">黑缨枪</option>
</select>
<select size="2" multiple> <!--添加multiple可以多项选择-->
<optgroup label="唐门">
<option value="长剑">长剑</option>
<option value="飞刀">飞刀</option>
</optgroup>
<optgroup label="杨家">
<option value="红缨枪">红缨枪</option>
<option value="白缨枪">白缨枪</option>
<option value="黑缨枪">黑缨枪</option>
</optgroup>
</select>
<br>
<textarea name="textmany" row="19px" cols="67px"></textarea>
</body>
</html>
展示
css基础
几种样式
<!document html>
<html>
<head>
<meta charset="utf-8"/>
<title>css演示</title>
<!-- 嵌入嵌入-->
<style type="text/css">
p{font-size:40px;color:blue;font-family:"隶书"}
h1{color:#F00}
</style>
</head>
<body>
<p>这是一个大的案件</p>
<h1>我来想一想......</h1>
<!--行内样式-->
<h2 style="color:green;font-size=20px">主要情境</h2>
</body>
</html>
展示：
导入样式
<!document html>
<html>
<head>
<meta charset="utf-8"/>
<title>css演示</title>
<!-- 嵌入样式-->
<style type="text/css">
p{font-size:40px;color:blue;font-family:"隶书"}
h1{color:#F00}
<!--也可以用@-->
@import url(css1.css);
</style>
<!--导入样式-->
<link href="css1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p>这是一个大的案件</p>
<h1>我来想一想......</h1>
<!--行内样式-->
<h2 style="color:green;font-size=20px">主要情境</h2>
<h3>我是h3</h3>
</body>
</html>
css文件
css1.css
@charset "utf-8";
/* CSS Document */
h3{
size:40;
color:#C00
}
展示：
css选择器
标签选择器
上面例子就是标签选择器
其他选择器
<!document html>
<html>
<head>
<meta charset="utf-8"/>
<title>css演示</title>
<style>
.one{
color:green;
font-size:18px
}
p.one{
color:blue
}
.two{
text-decoration:underline;
}
/*id选择器*/
#firstId{
color:#F00
}
/*联合*/
.three,#secondId,.one{
color:green;
font-size:18px;
}
/*全局选择器: *{color：black}*/
</style>
</head>
<body>
<h class="one">this is one</h>
<p class="one">this is another one</p>
<p class="one two">this is 1,2</p>
<!--id选择器-->
<p id="firstId">this is me</p>
</body>
展示
伪类
当用户用鼠标点击超链接时，字体颜色会变化，这种设定需要用到伪类
<!document html>
<html>
<head>
<meta charset="utf-8"/>
<title>css演示</title>
<style type="text/css">
a:link{color:blue}/*未访问状态*/
a:visited{color:grey}/*已访问状态*/
a:hover{color:green}/*鼠标悬停状态*/
a:active{}/*激活状态*/
</style>
</head>
<body>
<a href="http://www.baidu.com">click</a>
</body>
<html>
伪类的顺序：
Link>visited>hover>active
css优先级
行内样式>内部样式>外部样式
样式表中的优先级
Id选择器>class选择器>标签选择器>通配符
css标签命名规范
字体样式
<!document html>
<html>
<head>
<meta charset="utf-8"/>
<title>css演示</title>
<style type="text/css">
.text{
font-family:"微软雅黑","宋体",sans-serif;/*字体*/
font-size:50px;/*px是相对单位，受分辨率影响*/
color:#F36;/*颜色*/
font-weight:bolder;/*加粗属性*/
font-style:italic;/*斜体*/
font-variant:small-caps;/*大小写样式，mormal为小写*/
}
</style>
</head>
<body>
<div class="text">生活就像海洋，只有意志坚强的人才能到达彼岸</div>
<div class="text">this is a text</div>
</body>
<html>
展示
文本样式
<!document html>
<html>
<head>
<meta charset="utf-8"/>
<title>css演示</title>
<style type="text/css">
.text{
text-align:center;/*对齐方式*/
text-indent:2em;
line-height:1.3em;/*使用em，行间距为字体大小*1.3em*/
word-spacing:10px;/*单词的间距设置*/
letter-spacing:7px;/*字母的间距设置*/
text-transform:uppercase;/*字母大小写设置*/
}
.label{
vertical-align:sub;/*定义垂直位置*/
text-decoration:underline; /*文字修饰*/
}
</style>
</head>
<body>
<p align="center" class="text">“绝影”机器人是杭州云深处科技有限公司研发的一款四足机器人，是国内第一款场景展示的灵敏性机器人，能适应各种地形，拥有自主导航功能，可以用于运输、<em class="label">安防巡逻</em>、教育科研、特种运用等任务；根据应用场景不同，云深处公司分别推出了绝<em class="label">mini</em>、绝影mini Lite、绝影Pro等产品，如图1.8所示。</p>
<p align="right">综上所述，国外对四足机器人研究比国内早，有的机器人在研究过程中有军方的参与，如“Walking Truck”机器人，因此国外四足机器人的使用场景在军用上占一定比重；国内的四足机器人起步较晚，但受政策的影响，在高校范围内也做出了很多成果，同时，在企业层面， “宇树”、“云深处”等公司自主研发了多款四足机械狗，在各个领域都有所建树。</p>
<p align="left">本课题关于小型四足机械狗结构设计和控制研究，内容包括，对机械狗主要技术和应用场合进行了解；分析小型机械狗的形态特征，研究小型机械狗的应用场合；根据小型机械狗的运动特征设计零件属性，提出总体结构设计方案，使用solidworks软件绘制三维图和工程图，同时对关键零部件进行强度校核；区分机械狗的运动状态，为各种运动状态提供计算分析和软件控制等。各章节内容如下：</p>
<p align="justify">分析机械狗的步态问题，就涉及到坐标系和舵机角度的问题，这是因为本项目中机械狗的运动本质是关节的运动，而关节的运动是靠舵机驱动的，因此，应当建立各个关节间的坐标模型，最终由步态轨迹推算出舵机旋转的角度，完成运动，最后证实运动的可靠性。</p><!--两端对齐-->
</body>
<html>
结果：
中场休息，明天继续
标签：四足,java,color,html,font,机械,选择器,css 来源： https://blog.csdn.net/weixin_42953201/article/details/120208616
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。