java | （二十一）html,css复习-CSDN博客

本文链接：https://blog.csdn.net/weixin_42953201/article/details/120208616

这篇博客回顾了HTML和CSS的基础知识，包括基本标签、列表、图片、超链接、表格和表单等。接着深入讲解了CSS，涵盖了选择器、盒子模型、display属性、float浮动和position定位等内容，还探讨了CSS的命名规范和优先级。

摘要由CSDN通过智能技术生成

之前写过小程序时，学过些皮毛，这里就简单列列复习一下

基本标签

<!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">我的爱如&nbsp;潮水</p><!--空格：&nbsp-->
    <pre>this is my job , but i want to another job</pre><!--这里不用写&nbsp了-->
    <!-- 水平线-->
    <hr width="80%" color="#3399CC" align="left">
    <i>文字斜体</i>
    <em>文字斜体</em>
    <strong>加粗</strong>
    <b>关键字</b>
    <sup>上标</sup>
    <sub>下标</sub>
    <ins>下划线</ins>
    <del>划开</del>
    <!--特殊符号-->
    <p>&lt天啊&gt</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