一、HTML骨架、文本格式标签、img、src、a、ul ol、table、input、文本域textarea、复选框checkbox、单选框radio、button、布局标签(div、span)

bpmf_fff

已于 2024-11-06 19:09:02 修改

阅读量836

点赞数 13

CC 4.0 BY-SA版权

分类专栏： H5基础文章标签： html5 前端 html

于 2024-10-11 20:29:49 首次发布

本文链接：https://blog.csdn.net/FXNup/article/details/142828652

H5基础专栏收录该内容

6 篇文章

订阅专栏

241011

解决APP嵌套H5界面的情况；学习前端 CSS 及界面布局，为学习鸿蒙界面布局框架 ArkUI 及界面开发打基础。

1. HTML骨架

<!-- html骨架，！+Tab可生成，不用手动敲 -->
 <!-- 常用快捷键设置：
  Ctrl+加号/减号，可改变字号大小
   -->
<!DOCTYPE html>
<!-- html 整个网页 -->
<html lang="en">
<!-- head 网页头部，放给浏览器看的 -->
<head>
    <!-- 定义网页字符编码，可以确保浏览器正确地解码和显示网页内容 -->
    <meta charset="UTF-8">
    <!-- 手机端设置？ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- title 网页标题 -->
    <title>我的第一个网页</title>
</head>
<!-- body 网页主体，用户看的内容 -->
<body>
    
</body>
</html>

2. 文本格式标签

标题标签：h1-h6，数字越大级别越低
段落标签：p
文本格式化标签：加粗b/strong，倾斜i/em

补充扩展，简单了解：

<h1>至<h6>：标题标签，<h1>表示最高级别的标题，<h6>表示最低级别的标题。
<p>：段落标签，用于定义文本段落。
<br>：换行标签，用于在文本中插入一个换行。
<hr>：水平线标签，用于在页面中插入一条水平线。
<b>和<strong>：粗体标签，<strong>表示语义上的强调。
<i>和<em>：斜体标签，<em>表示语义上的强调。
<u>和<ins>：下划线标签，<ins>表示插入的文本。
<s>和<del>：删除线标签，<del>表示被删除的文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本标签</title>
</head>
<body>
    <!-- 标题标签h1-h6 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h6>六级标题</h6>

    <!-- 段落标签p -->
     <p>段落文字</p>

     <!-- 文本格式化标签加粗和倾斜 -->
     <b>b标签加粗</b>
     <strong>strong标签加粗</strong>
     <i>i标签倾斜</i>
     <em>em标签倾斜</em>
</body>
</html>

示例代码及效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本标签练习</title>
    <style>
        /* 段落p设置首行缩进 */
        p{
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <h1>多项政策发力 积极因素加快积累 经济运行持续向“稳”向“好”态势</h1>
    <p>央视网 2024年09月24日 20:39</p>
    <p><b>央视网消息：</b>9月24日，金融机构公布多项重磅金融政策：下调存款准备金率、统一房贷最低首付比例至15%等，金融“活水”进一步支持经济稳增长。民生领域高质量发展也取得振奋人心的成绩，为百姓带来了实实在在的幸福感、获得感；另外，《新闻联播》还报道了秋粮收获、航天科技、药品监管多个方面的利好消息。多领域发展成果提振信心，各方保持良好发展势头，我国经济运行“稳”的态势没有改变。</p>
    <p><b>多项政策发力 进一步支持经济稳增长</b></p>
    <p>国务院新闻办公室9月24日举行新闻发布会，中国人民银行、金融监管总局、证监会主要负责人介绍了金融支持经济高质量发展有关情况。</p>
</body>
</html>

3. 图片标签 img

语法：属性名=“属性值”
多个属性不分先后顺序
多个属性用空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片</title>
</head>
<body>
    <!-- 
     src 地址,路径;
     alt 替换文本,图片加载不出来或图片地址有误时显示;
     title 鼠标悬停时提示信息;
     width 设置图片宽度 -->
    
     <!-- src为属性,双引号里面为属性值 -->
    <img src="./maxresdefault.jpg" alt="" title="提示" width="200">
</body>
</html>

4. 路径 src

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路径src</title>
</head>

<body>
    <!-- src
    分为相对路径(从当前位置出发)和绝对路径(从根目录或在线网址出发)
    / 表示进入了某个文件夹的里面
    . 表示当前文件所在的文件夹目录
    .. 表示上一级目录
-->

    <!-- 相对路径 . 当前文件夹-->
    <img src="./maxresdefault.jpg" alt="" height="100">
    <img src="./pic/4.jpg" alt="" height="100">
    <img src="pic/微信图片_20231223201042.jpg" alt="" height="100">

    <!-- 绝对路径 本地图片 -->
    <img src="D:\15133\Pictures\bz\1.JPG" alt="" height="100">

    <!-- 绝对路径 网络图片 -->
    <img src="https://img-home.csdnimg.cn/images/20201124032511.png" alt="" height="100">
</body>

</html>

5. 超链接 a

作用：点击跳转页面。

（以下为补充，仅作了解）

target 属性：指定链接打开的位置。

_self：在同一框架或窗口中打开（默认）。
_blank：在新窗口或标签页中打开。
_parent：在父框架中打开。
_top：在整个窗口中打开。

rel 属性：指定当前文档与被链接文档之间的关系。

nofollow：告诉搜索引擎不要追踪这个链接（常用于广告或不受信任的链接）。
noopener：和 _blank 一起使用时，提高安全性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接</title>
</head>

<body>
    <!-- 超链接,点击跳转到B站官网,且新窗口打开 -->
    <a href="https://www.bilibili.com/" target="_blank">B站官网</a>

    <!-- 点击跳转到本地文件,05_路径 -->
    <a href="./05_路径.html">本地05_路径</a>

    <!-- 空链接,暂无跳转地址 -->
    <a href="#">空链接</a>

    <!-- 点击图片跳转到新窗口本地文件04,再点击跳转到新窗口B站官网 -->
    <a href="04_图片.html" target="_blank">
        <img src="maxresdefault.jpg" alt="" height="100">
    </a>
</body>

</html>

6. 列表

ul全称Unordered List，li全称List Item，ol全称Ordered List。

6.1 无序列表 ul

ul 嵌套 li， ul 是无序列表整体，li 是列表项。

<ul>
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ul>

6.2 有序列表 ol

ol 嵌套 li， ol 是有序列表整体，li 是列表项。

<ol>
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ol>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
</head>

<body>
    <!-- 无序列表 -->
    <ul>
        <li>无序1</li>
        <!-- 无序2加超链接 -->
        <li><a href="#">无序2</a></li>
    </ul>

    <!-- 有序列表 -->
    <ol>
        <li>有序1</li>
        <li>有序2</li>
    </ol>
</body>

</html>

7. 表格 table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <!-- 表格table,行tr,td行内格子,th表头;
        table默认表格边框隐藏,border属性加边框线,表格大小默认靠内容撑开
        后期靠css样式美化,后面学到
    -->
     <table border="1">
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
        <tr>
            <td><a href="">姓名</a></td>
            <td><i>年龄</i></td>
        </tr>
        <tr>
            <td>小红</td>
            <td>11</td>
        </tr>
     </table>
</body>
</html>

8. 表单

作用：布局登录、注册页面、搜索区域等

8.1 输入文本

8.1.1 单行文本 input

属性：type=""

text：文本框
password：密码框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <!-- input默认为text文本类型,placeholder为提示信息 -->
    <input type="text" placeholder="请输入用户名">
    <!-- password密码类型,输入时自动保密 -->
    <input type="password" placeholder="请输入密码" name="" id="">
</body>
</html>

初始态：

输入后：

8.1.2 文本域 textarea

<!-- textarea文本域,默认右下角可拖拽改变文本域大小 -->
    <p>你的评论:<textarea name="" id=""></textarea></p>

8.2 复选框 checkbox

<!-- checkbox复选框
        checked也是标签属性,效果:默认复选框为选中状态;
        在H5里如果属性名和属性值相同,可简写为一个单词
    -->
    <p><input type="checkbox" checked>我同意注册...</p>

    兴趣爱好:
    <input type="checkbox">1
    <input type="checkbox">2
    <input type="checkbox">3

8.3 单选框 radio

<!-- 单选框radio -->
    我是:
    <input type="radio" name="gender"><img src="./pic/4.jpg" alt="" height="10">男
    <input type="radio" name="gender">女
    <!-- 使用name属性分组,同一组只能选择一项 -->

8.4 按钮 button

<!-- button按钮 -->
    <!-- 加超链接,点击跳转至本地文件08 -->
    <!-- 快捷键,当前行上移或下移 alt+箭头 -->
    <p>
        <button><a href="./08_表格.html" target="_blank">点击跳转至08表格</a></button>
    </p>

9. 布局标签

<!-- 
        div:内容换行排列; 块级容器标签，用于组织和布局内容。
        span:内容在一行排列; 行内容器标签，用于对文本的一部分进行样式化。
    -->

    <div>div1</div>
    <div>div2</div>

    <span>span1</span>
    <span>span2</span>

10. 综合案例

<!-- 简单布局，从上到下，从外到内 -->
    <h1>甜瓜谈斯台普斯：每次来洛杉矶打球都是一种非常难忘的经历</h1>
    <img src="./tg.jpg" alt="球星-甜瓜" title="瓜哥" height="200">
    <p><strong>直播吧</strong> <em>12月23日讯</em> 今日湖人球员安东尼在训练结束后接受了媒体采访。</p>
    <p>据此前报道，湖人主场“斯台普斯中心”的招牌已经被卸下，取而代之的是新冠名商<a href="#">crypto.com</a>的招牌。</p>

11. 课后练习1相关文章

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页面</title>
</head>
<body>
    <!-- 课后练习1
     标题及段落标签
     图片标签
     超链接跳转页面
     -->

    <!-- 总标题 -->
    <h1>相关文章</h1>

    <!-- 跳转页面1 -->
    <h4><a href="./01.html">同样操作奇葩！换帅恐难解湖人队困局</a></h4>
    <img src="imgs/tp1.png" alt="" height="200">

    <!-- 跳转页面2 -->
    <h4><a href="./02.html">詹姆斯逼湖人大交易！助教暗讽威少</a></h4>
    <img src="imgs/tp2.png" alt="" height="200">

    <!-- 跳转页面3 -->
    <h4><a href="./03.html">疑回应雪藏魔兽！菲帅：希望霍华德做好准备</a></h4>
    <img src="imgs/tp3.png" alt="" height="200">

</body>
</html>

01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跳转页面1</title>
</head>
<body>
    <h1>同样操作奇葩！换帅恐难解湖人队困局，菲兹戴尔保住沃格尔帅位？</h1>
    <img src="imgs/tup5.png" alt="">
    <p>
        NBA湖人队目前战绩为16胜16负，胜率刚好50%，似乎现在他们打谁都是五五开，在湖人队打造出勒布朗-詹姆斯、安东尼-戴维斯、拉塞尔-威斯布鲁克的三巨头组合之时，谁能想到湖人队会像现在这样乏力？
    </p>
    <p>
        NBA球队出现了问题，矛头一般都是直指主教练，湖人队自然不会例外，炒掉沃格尔的呼声最近是越来越大了，幸运的是，沃格尔最近被隔离了，被推上前台的湖人助教大卫-菲兹戴尔，他或许就拯救了沃格尔？
    </p>
</body>
</html>

02.html，03.html省略

主页面：

跳转页面1：

12. 课后练习2新闻案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻案例</title>
</head>
<body>
    <!-- 课后练习2
        标题及段落标签
        hr水平线,通常用于分隔内容或者创建视觉上的分隔 
    -->

    <h1>web前端发展前景</h1>
    <p>2021年07月27日 10:58:26 来源：知乎网</p>
    <!-- hr水平线 -->
    <hr>
    <p>Web前端行业目前来看已经渗透到了到了生活的方方面面，这也说明了Web前端行业的生命力异常强大，并且未来的前途也是不可限量。假如你还在犹豫到底要不要接触Web前端，那么我给你的建议就是，与其将时间浪费在犹豫上，还不如认真的拼一把，把时间花在Web前端上</p>
    <p>目前的Web前端技术可以说已经是非常成熟了，同时Web前端市场也非常的火爆，并且Web前端的人才目前来看也是异常的紧缺。加之互联网行业的飞速崛起，目前Web前端技术的不断成长发展，也已经占据了互联网的一席之地。</p>
    <p>前端开发行业薪资水平呈上涨趋势，Web前端开发早已不是做带动画的下拉菜单的时代了，他们已成为互联网主宰者，各行业都用其开发互联网应用。但目前整互联网行业的Web前端开发工程师紧俏，企业正高薪求才，薪资待遇一涨再涨 ！</p>
</body>
</html>

13. 课后练习3招聘案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>招聘案例</title>
</head>

<body>
    <!-- 课后练习3
     标题及段落标签
     hr水平线
     有序列表ol和无序列表ul
     文本加粗b标签
     图片标签
     超链接
     -->

    <h1>美团前端开发-到综商家 15-20K·15薪</h1>
    <p>上海.1-3年.学历不限</p>
    <hr>

    <h2>一、职位描述</h2>
    <ol>
        <li>负责前期页面的搭建</li>
        <li>负责重点项目的前端技术方案和架构的研发和维护工作</li>
        <li>参与或主导团队内部重要技术项目的规划及落地</li>
    </ol>

    <h2>二、岗位要求</h2>
    <ol>
        <li><b>技术栈：</b>对React/Vue、Webpack、组件库、动静分离，ESLint有深入的理解</li>
        <li><b>公共能力：</b>有丰富的 Web 标准、易用性、浏览器端原理、网站性能优化以及网络等方面的知识</li>
        <li><b>实战：</b>对于业务需求有一定抽象能力，并且定期对自己工作进行复盘总结</li>
        <li><b>合作：</b>善于交流，有良好的团队合作精神和协调沟通能力，有与产品、后端、QA等多方密切配合的经验和意识。</li>
    </ol>

    <h2>三、具备以下者优先</h2>
    <ol>
        <li>有大型后台系统的研发经验，尤其是B端系统</li>
        <li>心态开放，有主动进取心，有较强的自我要求</li>
        <li>热爱互联网和新技术，跟进研究前端业界的前沿理念和技术实践</li>
    </ol>

    <h2>四、福利待遇</h2>
    <ul>
        <li>五险一金</li>
        <li>补充公积金</li>
        <li>年终奖</li>
        <li>弹性工作制</li>
        <li>定期体检</li>
    </ul>

    <h2>五、工作地址</h2>
    <p>上海长宁区申亚时代广场B座</p>
    <!-- 地图图片加超链接，点击跳转至新窗口百度地图 -->
    <a href="https://map.baidu.com/" target="_blank">
        <img src="./images/美团地址.png" alt="上海长宁区申亚时代广场B座" title="工作地址">
    </a>
</body>

</html>