基础html和css样式总结part2

最新推荐文章于 2025-08-16 06:13:53 发布

原创最新推荐文章于 2025-08-16 06:13:53 发布 · 483 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

css-html 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了HTML的基本用法，包括无序列表、有序列表、表格、a标签、img标签、表单等元素的使用方法，并详细解释了单选框、复选框、下拉列表等表单元素的具体设置。

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

无序列表：

默认显示 li 前面自带一个圆点

<ul>
  <li>信息</li>
  <li>信息</li>
</ul>

有序列表：

前后有序，有顺序标号

<ol>
  <li>信息</li>
  <li>信息</li>
</ol>

逻辑包围板块

<div  id="版块名称">…</div>

表格：

table当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。

tr 表格的一行，所以有几对tr 表格就有几行。table row

td：表格的一个单元格，一行中包含几对…，说明一行中就有几列。 table data

th：表格的头部的一个单元格，表格表头。table head

<table summary="表格简介文本">
    <caption>标题文本</caption>
    <tr>
        <td>…</td>
        <td>…</td>
        …
    </tr>
…
</table>

a 标签建立链接

<a href ="目标网址" target="——blank">click here</a>

img图片标签

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，服务器端程序就可以处理表单传过来的数据
输入框基本使用

<form>
  姓名：
  <input type="text" name="myName">
  <br/>
  密码：
  <input type="password" name="pass">
</form>

单选框：radio 复选框：checkbox
单选框的name值要一致

<form action="save.php" method="post" >
    <label>性别:</label>
    <label>男</label>
    <input type="radio" value="1"  name="gender" />
    <label>女</label>
    <input type="radio" value="2"  name="gender" />
    <!--type="submit"表示按钮-->
</form>

下拉列表：

<label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游"  selected="selected">旅游</option>
      <!--selected="selected"表示该选项默认被选中-->
      <!--css中使用/**/进行注释-->
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>

form表单当中的label标签

<label for="控件id名称">
<!--注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。-->
<form>
  <label for="male">男</label>
  <!--for="male" 对应的id="male"-->
  <!--当用户点击该lable的时候，就自动会关联相应的控件，比如上面的radio-->
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>

span 一小段

<span style="color:red"></span>

类选择器：

<!--类选择器的使用-->
.dada{
    color:red;
}
<span class="dada"><!--选择相应类,使用样式-->

ID选择器：

<!--ID选择器的使用-->
#dada{
    color:red;
}
<span id="dada"><!--选择相应类,使用样式-->

———新手学习，请多指点共勉————