黑马程序员-我的入学笔记7-HTML的初次了解_黑马程序员入学 html-优快云博客

本文链接：https://blog.youkuaiyun.com/wanghua0226/article/details/12066853

本文介绍了HTML的基本概念及其在网页设计中的应用，并通过实例展示了如何使用CSS进行样式设置，包括表单元素、表格布局和列表的样式化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

---------------------- <a href="http://edu.youkuaiyun.com"target="blank">ASP.Net+Android+IO开发S</a>、<a href="http://edu.youkuaiyun.com"target="blank">.Net培训</a>、期待与您交流！ ----------------------

HTML是对网页长什么样子的一个描述，也就是“这里显示一个超链接、那里显示一个按钮”都是通过HTML来进行描述的。更加官方的定义是超文本标记语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。入学的基础视频中只讲到静态页面的格式,关于网页上控件按钮等实现并没有进一步的讲解到.css（Cascading Style Sheet）层叠样式表，通常又称为风格样式表是视频中重点讲到的方法,我感觉特别的实用.

不过我觉得我们开发最重要的学习地方是要实现“点击【计算】按钮的时候让表格放大显示”这样的动态效果，则要通过程序操作Dom，一般使用JavaScript这种脚本语言来操作Dom。这的基础视频只是让我们先熟悉服务端网页的制作。就视频中的案例,简单的实现一下如下

简单用户登录界面,表格,及css样式选择器,只是初步的了解,css的样式选择还有很多

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>用户登录界面</title>
</head>
<body>
<table ><!--tr行td列及风格和文本框,密码框,验证码,登录按钮,记住密码等的实现-->
  <tr><td >用户名</td><td class="style1"><input type="text"/></td></tr>
  <tr><td >密码</td><td class="style1"><input type="password"/></td></tr>
  <tr><td >验证码</td><td class="style3"><input type="text" /></td><td>
  <img src="images/验证码.png" alt="验证码"/></td></tr>
  <tr><td ><input id="jizhu" type="checkbox"/><label for="jizhu">记住密码</label></td>
      <td ><input type="button" value="登录"/></td></tr>
</table>
</body>
</html>

<!--一个表格--><table border=1>
  <tr><td><font color="red"/>姓名</td><td>年<font color="red"/>龄</td>
      <td>性别</td></tr>
  <tr><td><a href="">tom</td><td>22</td>
      <td>男</td></tr>
  <tr align="right"><td>jerry</td><td align="left">21</td>
      <td>女</td></tr>
  <tr><td align="right">lucy</td><td>22</td>
      <td>女</td></tr>
</table>

<ul><li>灌水区</li><li>原创区</li><li>技术区</li></ul><!--ul,li的用法-->

<form action="一个动态页面"><!--表单中input的控件-->
  <input type="text" title="控件" value="帅哥" maxlength="6" readonly="readonly"/><!--通过input显示什么样的内容-->
  <input type="checkbox" checked="checked"/>
  <input type="button" value="我的按钮" style="width: 81px"/>
  <input type="submit" value="提交一下下"/><br/>
  <input type="file"/>密码框<!--关于file的属性用于指示是否提交给服务器,以后再做深入-->
  <input type="password"/>
  <input type="hidden"/>
  <input type="radio" name="1"/><input type="radio" name="1" /><input type="radio" name="1"/>
  <input type="reset" />
  <input type="image" src="images/按钮.png"/>图片<!--按钮的路径以后再深入-->
  <input type="button"/><!--按钮的实现在通过写代码实现功能-->
</form>

<head>
    <title>关于css选择器</title>
    <style type="text/css">
        input{background-color:Red;border-color:Green;}<!--标签选择器  -->  
        p{color:Blue;}
        .style4 <!--class选择器-->
        {
            height: 31px;
        }
        #usename<!--id选择器-->
        {
            background-color:Blue;
        }
    </style>
</head>
<body><input type="text" style="background-color:Red;border-color:Blue;"/></body><!--样式选择-->