学习HTML的第三天

最新推荐文章于 2024-07-24 17:10:28 发布

fighting小牛

最新推荐文章于 2024-07-24 17:10:28 发布

阅读量133

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/qq_45598568/article/details/118873258

版权

学习目标：

完成小案例

学习内容：

1.注释和特殊字符

1.注释：

如果想要在你的HTML文档中添加注释（只在文档中显示，不显示在网页），就要用到注释标签，HTML中的注释以"<!--"开头，以"--!>"结束
注释快捷键：Ctrl + /
添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。

代码：

2.特殊字符：

在HTML页面中,-些特殊的符号很难或者不方便直接使用 ,此时我们就可以使用下面的字符来替代。

如过要在网页中打出多个连续空格，则要连用多个 

代码：

2.完成简单案例

巩固知识完成圣诞节那点事案例：

效果：

3.表格

表格语法：

因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分.

在表格标签中，分别用：<thead>标签表格的头部区域、<tbody>标签表格的主体区域. 这样可以更好的分清表格结构。

1. <thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。一般是位于第一行。
2. <tbody></tbody>：用于定义表格的主体，主要用于放数据本体。
3. 以上标签都是放在 <table></table> 标签中。

合并单元格方式：

跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"

目标单元格：(写合并代码)
跨行：最上侧单元格为目标单元格, 写合并代码
跨列：最左侧单元格为目标单元格, 写合并代码

合并单元格三步曲：
1. 先确定是跨行还是跨列合并。
2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan=“2”></td>。
3. 删除多余的单元格。

表格代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 单元格用来显示数据
        表格属性：相对周围元素对齐方式 align(left center right)
                  单元格边框          border
                  内容与边缘空白      cellpadding
                  单元格之间空白      cellspacing
                  表格宽度            width
        表格属性已废除用CSS描述 -->
    
    <!-- 单元格合并：
        rowspan 跨行
        colspan 跨列 -->

    <table>
       
        <!-- 表头加粗居中 -->
        <!-- 这是一行 -->
    <thead>    
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>备注</th>
        </tr>
    </thead> 
        <!-- 普通单元格 -->
        <!-- 另一行 -->
    <tbody>    
        <tr>
            <td>牛1</td>
            <td rowspan="2">难</td>
            <td>500</td>
            <td><a href="http://www.baidu.com">baidu</a></td>
        </tr>
        <tr>
            <td>牛2</td>
            <!-- 被合并<td >难</td> -->
            <td>500</td>
            <td><a href="http://www.baidu.com">baidu</a></td>
        </tr>
        <tr>
            <td>牛3</td>
            <td colspan="2">难</td>
            <!-- 被合并 -->
            <td><a href="http://www.baidu.com">baidu</a></td>
        </tr>
    </tbody>   
    </table>
</body>
</html>

4.列表

1.列表可以分为三大类：无序列表、有序列表和自定义列表。

2. <ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。

3. 无序列表的各个列表项之间没有顺序级别之分，是并列的。

4. <ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。

5. <li> 与 </li> 之间相当于一个容器，可以容纳所有元素。

6. 无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。
（<ul>里面不能插除了<li>之外的标签，要查其它的标签要写在<li>里面）

<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>

7. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。

8. <li> 与 </li>之间相当于一个容器，可以容纳所有元素。

9. 有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。

10.自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>

11. <dl></dl> 里面只能包含 <dt> 和 <dd>。
12. <dt> 和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>。

5.表单

使用表单目的是为了收集用户信息。
在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单
在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成
<form> 标签用于定义表单域，以实现用户信息的收集和传递。
<form> 会把它范围内的表单元素信息提交给服务器.

<form action=“url地址” method=“提交方式” name=“表单域名称">
各种表单元素控件
</form>

属性	属性值	作用
action	url地址	用于指定接收并处理表单的服务器程序的url地址
method	get或post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定的表单名称，以区分同一个页面的多个表单域

<input> 标签

而在表单元素中 <input> 标签用于收集用户信息。
在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

<input type="属性值" />
<input /> 标签为单标签
type 属性设置不同的属性值用来指定不同的控件类型

属性值                         描述
button    定义可点击按钮
checkbox        定义复选框
file                         定义输入字段和浏览按钮，供文件上传
hidden                   定义隐藏输入字段
image                    定义图像形式的提交按钮
password 定义密码字段，该字段中的字符会被掩码
radio 定义单选按钮（当取一样name时才是单选）
reset 定义重置按钮，重置会清除表单中的所有数据
submit                   定义提交按钮，提交按钮会把表单数据发送到服务器
text 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

属性	属性值	描述
name	用户定义	定义input元素的名称
value	由用户定义	规定input元素的值
checked	checked	规定input元素首次加载是应被选中
maxlength	正整数	规定输入字段中的字符的最大值

1. name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
2. name 表单元素的名字, 要求单选按钮和复选框要有相同的name值. （同名不同值）
3. checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
4. maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.

6.label标签

<label> 标签为 input 元素定义标注（标签）。

<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.

语法：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同。

7.textarea标签

当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用标签。
在表单元素中，标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
<textarea rows="3" cols="20">
文本内容
</textarea>
4. 通过 <textarea> 标签可以轻松地创建多行文本输入框。
5. cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。

8.select标签

学习时间：

2021/7/17

ps:
每天一个小技巧：写注释时可以先写注释，再按Ctrl + /

fighting小牛

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习HTML的第三天

学习目标：完成小案例学习内容：1.注释和特殊字符1.注释：如果想要在你的HTML文档中添加注释（只在文档中显示，不显示在网页），就要用到注释标签，HTML中的注释以"<!--"开头，以"--!>"结束注释快捷键：Ctrl + /添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。代码：2.特殊字符：在HTML页面中,-些特...
复制链接

扫一扫