Re：从零开始的html学习笔记（02）-CSDN博客

本文链接：https://blog.csdn.net/kunnnnn_23/article/details/148200261

Re：从零开始的html学习笔记（02）

文章目录

Re：从零开始的html学习笔记（02）
一、HTML基础标签

一、HTML基础标签

1.列表标签

1.1无序列表

无序列表的标签是ul 和 li：

<h3>今天的水果列表</h3>
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
</ul>

效果如图所示
在这里插入图片描述
ul标签包裹li标签内的所有内容
Q：有什么办法更改内容前面的黑点样式？
A：有的兄弟，有的。在ul标签后加入属性type加入自己想要的样式。
常用的样式有：

默认黑点：disc
空心圆形：circle
实心方形：square
无：none

<ul type="disc">
        <li>apple</li>
        <li>banana</li>
        <li>orange</li>
    </ul>
    <ul type="circle">
        <li>apple</li>
        <li>banana</li>
        <li>orange</li>
    </ul>
    <ul type="square">
        <li>apple</li>
        <li>banana</li>
        <li>orange</li>
    </ul>
    <ul type="none">
        <li>apple</li>
        <li>banana</li>
        <li>orange</li>
    </ul>

运行效果如图所示
在这里插入图片描述

1.2有序列表

有序列表的标签是ol和li：

<ol>
  <li>第一项</li> 
  <li>第二项</li>
</ol>

代码运行效果如图所示：
在这里插入图片描述

ol标签包裹li标签内的所有内容
Q：如何改变编号的样式？
A：与无序列表类似，在ol标签后加type属性来获取自己想要的样式。
常用的样式有：

type="1"：数字（默认）
type="A"：大写字母（A, B, C…）
type="a"：小写字母（a, b, c…
type="I"：大写罗马数字（I, II, III…）
type="i"：小写罗马数字（i, ii, iii…）
以A为例：

<ol type="A">
  <li>Apple</li>
  <li>Banana</li>
</ol>

在这里插入图片描述

1.3列表嵌套

根据需求，在列表内嵌套列表，实现多级列表：

<ol>
  <li>一级
      <ol type="a">
            <li>二级</li>
             <li>二级</li>
      </ol>
  </li>
</ol>

在这里插入图片描述

2.表格标签

2.1表格元素

table：表示的就是表格的整体
tr：表格的每一行，包裹多个td
td：单元格表签，存放表格的内容
表格的结构标签
- 头部标签(首行） thead
  - 首行单元格标签：th th标签的内容会被加粗
- 身体标签 tbody
- 尾部标签 tfoot

<table>
    <thead>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
    </thead>
    <tr>
        <td>1</td>
        <td>卫宫士郎</td>
        <td>男</td>
    </tr>
    <tr>
        <td>2</td>
        <td>阿尔托莉雅</td>
        <td>女</td>
    </tr>
</table>

在这里插入图片描述
代码运行效果如图

2.2表格标签的属性

常用的属性有：

border（边框）
width（宽度）
height（高度）
caption（标题）

<table border="1">
    <caption>
        border分别为1px和5px的效果对比</caption>
    <thead>
    <th>编号</th>
    <th>姓名</th>
    <th>性别</th>
    </thead>
    <tr>
        <td>1</td>
        <td>卫宫士郎</td>
        <td>男</td>
    </tr>
    <tr>
        <td>2</td>
        <td>阿尔托莉雅</td>
        <td>女</td>
    </tr>
</table>
<hr>
<table border="5">
    <thead>
    <th>编号</th>
    <th>姓名</th>
    <th>性别</th>
    </thead>
    <tr>
        <td>1</td>
        <td>卫宫士郎</td>
        <td>男</td>
    </tr>
    <tr>
        <td>2</td>
        <td>阿尔托莉雅</td>
        <td>女</td>
    </tr>
</table>

在这里插入图片描述

2.3单元格合并

上下合并按照上面的内容，去掉下面的内容 rowspan
左右合并按照左边的内容，去掉右边的内容 colspan

<table border="1">
<caption>通讯录</caption>
<tr>
  <th>姓名</th>
  <th colspan="2">邮箱</th>
</tr>
<tr>
  <td>shiro</td>
  <td>shiro@qq.com</td>
  <td>shiro@163.com</td>
</tr>
</table>

在这里插入图片描述
在colspan或rowspan后写入需要合并的单元格个数即可

3.表单标签

3.1表单元素

form表单标签
input输入框标签
button 按钮标签
select，option下拉菜单标签
textarea 文本域标签
其中，input标签input标签的type属性用于指定输入框类型，type属性的属性值及其作用如下：
- type=text 文本格式 placeholder：水印输出
- type=“password” 密码框
- type=“radio”
- type=“checkbox” 多选框（默认选中 checked）
- input type=“file” 上传文件
- input type=“submit” "reset"提交重置

<h1>信息收集表</h1>
<hr>
昵称：<input type="text" placeholder="请输入你的姓名"><br>
性别：<input type="radio" name="gender">男
<input type="radio" name="gender">女<br>
所在城市：<select>
    <option>请输入你的常驻城市</option>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
    <option>武汉</option>
</select><br>
婚姻状况：<input type="radio" name="married">未婚
<input type="radio" name="married">已婚
<input type="radio" name="married">保密<br>
喜欢的类型：<input type="checkbox" name="lty">可爱
<input type="checkbox" name="lty">性感
<input type="checkbox" name="lty">御姐
<input type="checkbox" name="lty">萝莉
<input type="checkbox" name="lty">小鲜肉
<input type="checkbox" name="lty">大叔<br>
个人介绍：<br>
<textarea rows="10" cols="30"></textarea>
<input type="checkbox">我同意所有条款
<button type="submit">提交</button>
<button type="reset">重置</button><br>

在这里插入图片描述

代码实现效果如图所示，值得一提的是，在使用单选框radio标签时，必须只有一个值被选中的时候我们就给他加属性name然后起一样的名字，我这里使用的是name=“gender”

3.2补充内容

placeholder属性：
placeholder属性用于提示用户输入内容，一般只设置输入框的提示内容。

<form action="">
    <div>
        <input type="text" placeholder="文本输入框">
    </div>
    <div>
        <input type="password" placeholder="密码输入框">
    </div>
    <div>
        <input type="number" placeholder="数字输入框">
        </input>
    </div>
</form>

在这里插入图片描述
实现效果如图