【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)

简介: 【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)

1 -> HTML常见标签

1.1 -> 表格标签

1.1.1 -> 基本使用

<table>标签:表示整个表格。

<tr>标签:表示表格的一行。

<td>标签:表示一个单元格。

<th>标签:表示表头单元格。会居中加粗。

<thead>标签:表格的头部区域(注意和<th>标签区分,范围比<th>标签要大)。

<tbody>标签:表格得到主体区域。

<table>标签包含<tr>标签,<tr>标签包含<td>标签或者<th>标签。


表格标签有一些属性,可以用于设置大小边框等。但是一般使用CSS方式来设置。


这些属性都要放到<table>标签中。


align是表格相对于周围元素的对齐方式。align="center" (不是内部元素的对齐方式)。

border表示边框。1表示有边框(数字越大,边框越粗),"" 表示没边框。

cellpadding表示内容距离边框的距离,默认1像素。

cellspacing表示单元格之间的距离。默认为2像素。

width/height:设置尺寸。

注意,这几个属性,在vscode都提示不出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
    height="500">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>枫叶丹1</td>
            <td>男</td>
            <td>21</td>
        </tr>
        <tr>
            <td>枫叶丹2</td>
            <td>男</td>
            <td>21</td>
        </tr>
    </table>
 
</body>
</html>

结果展示:

1.1.2 -> 合并单元格

  • 跨行合并:rowspan="n"。
  • 跨列合并:colspan="n"。

步骤:

  1. 先确定跨行还是跨列。
  2. 找好目标单元格(跨列合并,左侧是目标单元格;跨行合并,上方是目标单元格)。
  3. 删除的多余的单元格。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    
    <table align="center" border="10" cellpadding="20" cellspacing="0" width="500"
height="500">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>枫叶丹1</td>
            <td colspan="2">男</td>
        </tr>
        <tr>
            <td>枫叶丹2</td>
            <td>男</td>
            <td>21</td>
        </tr>
    </table>
 
</body>
</html>

结果展示:

1.2 -> 列表标签

主要使用来布局的。整齐好看。

  • 无序列表(重要) <ul>标签、<li>标签。
  • 有序列表(用的不多) <ol>标签、<li>标签。
  • 自定义列表(重要) <dl>总标签、<dt>小标题、<dd>围绕标题来说明上面有个小标题。

注意:

  • 元素之间是并列关系。
  • <ul>标签/<ol>标签中只能放<li>标签不能放其他标签,<dl>标签中只能放<dt>标签和<dd>标签。
  • <li>标签中可以放其他标签。
  • 列表带有自己的样式,可以使用CSS来修改。(例如前面的小圆点都会去掉)。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    
    <h3>无序列表</h3>
    <ul>
        <li>王路飞</li>
        <li>刘索隆</li>
        <li>山治君</li>
    </ul>
    <h3>有序列表</h3>
    <ol>
        <li>王路飞</li>
        <li>刘索隆</li>
        <li>山治君</li>
    </ol>
    <h3>自定义列表</h3>
    <dl>
        <dt>One Piece</dt>
        <dd>王路飞</dd>
        <dd>刘索隆</dd>
        <dd>山治君</dd>
    </dl>
 
</body>
</html>

结果展示:

1.3 -> 表单标签

表单是让用户输入信息的重要途径。

分成两个部分:

  • 表单域:包含表单元素的区域。重点是<form>标签。
  • 表单控件:输入框,提交按钮等。重点是<input>标签。

1.3.1 -> form标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    
    <form action="test.html">
        ... [form 的内容]
    </form>
 
</body>
</html>

描述了要把数据按照什么方式,提交到哪个页面中。(关于<form>标签需要结合服务器&网络编程来进一步理解。)

1.3.2 -> input标签

各种输入控件,单行文本框,按钮,单选框,复选框。


type(必须有),取值种类很多,button、checkbox、text、file、image、password和radio等。

name:给<input>标签起了个名字。尤其是对于单选按钮,具有相同的name才能多选一。

value:<input>标签中的默认值。

checked:默认被选中。(用于单选按钮和多选按钮)。

maxlength:设定最大长度。

1. 文本框

<input type="text">

2. 密码框

<input type="password">

3. 单选框

性别: 
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女

注意:

单选框之间必须具备相同的name属性,才能实现多选一的效果。

4. 复选框

爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">
打游戏

5. 普通按钮

<input type="button" value="我是个按钮">

当前点击了没有反应。需要搭配JS使用。

<input type="button" value="我是个按钮" onclick="alert('hello')">

6. 提交按钮

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

提交按钮必须放到<form>标签内。点击后就会尝试给服务器发送。

7. 清空按钮

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
    <input type="reset" value="清空">
</form>

清空按钮必须放在<form>标签中。点击后会将<form>标签内所有的用户输入内容重置。

8. 选择文件

<input type="file">

点击选择文件,会弹出对话框,选择文件。

1.4 -> label标签

搭配<input>标签使用。点击<label>标签也能选中对应的单选/复选框,能够提升用户体验。

  • for属性:指定当前<label>标签和哪个相同<id>标签的<input>标签对应。(此时点击才是有用的)。
<label for="male">男</label> <input id="male" type="radio" name="sex">

1.5 -> select标签

下拉菜单

  • option中定义selected="selected" 表示默认选中。
<select>
    <option>北京</option>
    <option selected="selected">上海</option>
</select>

注意:可以给第一个选项作为默认选项。

<select>
    <option>--请选择年份--</option>
    <option>2024</option>
    <option>2025</option>
    <option>2026</option>
    <option>2027</option>
    <option>2028</option>
</select>

1.6 -> textarea标签

1. <textarea rows="3" cols="50">
2. 
3. </textarea>

文本域中的内容,就是默认内容。

注意:空格也会有影响。

rows和cols也都不会直接使用,都是用CSS来改的。

1.7 -> 无语义标签:div & span

<div>标签,division的缩写,含义是分割。

<span>标签,含义是跨度。

就是两个盒子,用于网页布局

  • <div>标签独占一行,是一个大盒子。
  • <span>标签不独占一行,是一个小盒子。
<div>
    <span>王路飞</span>
    <span>王路飞</span>
    <span>王路飞</span>
</div>
<div>
    <span>刘索隆</span>
    <span>刘索隆</span>
    <span>刘索隆</span>
</div>
<div>
    <span>山治君</span>
    <span>山治君</span>
    <span>山治君</span>
</div>

2 -> Emmet快捷键

1. 快速输入标签

input [tab]

2. 快速输入多个标签

div*3 [tab]

3. 标签带id

div#sex [tab]

4. 标签带类名

div.sex [tab]

5. 标签带子元素

ul>li*3 [tab]

6. 标签带兄弟元素

span+span

7. 标签带内容

div{hello}

8. 标签带内容(带编号)

div{$.hello}

除此之外还有很多。

3 -> HTML特殊字符

有些特殊的字符在html文件中是不能直接表示的,例如:

  • 空格:&nbsp;
  • 小于号:&lt;
  • 大于号:&gt;
  • 按位与:&amp;

<html>标签就是用<>表示的。因此内容里如果存在<>就会发生混淆。

参考内容:

HTML特殊字符编码对照表

4 -> 小结

HTML只是描述了页面的骨架结构。

使用CSS可以针对页面进行进一步美化。

目录
打赏
0
1
1
0
20
分享
相关文章
|
10天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
29 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
83 25
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
69 6
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
90 8
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
90 5
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节,涵盖了多种技术和方法
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
62 3

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等