前端之HTML

2023-11-10

目录

1.编写一个HTML代码

2.HTML常见语法

2.1注释标签

​ 2.2标题标签

2.3段落标签

2.4换行标签

2.5格式化标签

2.6图片标签

 2.6.1img标签的其他属性

2.7超链接标签

2.7.1空连接

2.8列表标签

 2.9表单标签

2.10 slect标签

 2.11 textarea标签

2.12 无语义标签

3.案例展示

 案例2:


1.编写一个HTML代码

 

2.HTML常见语法

2.1注释标签

 2.2标题标签

2.3段落标签

这个段落标签就表示一个段落,叫做p标签,下面我们通过p标签来分段

 

2.4换行标签

如果我们想在段落中间使用空格,就一定要用转义字符&nbsp

 

2.5格式化标签

 格式化标签就是针对文本进行一些样式上的调整

1、加粗: strong 标签 和 b 标签
2、倾斜: em 标签 和 i 标签
3、删除线: del 标签 和 s 标签
4、下划线: ins 标签 和 u 标签
以上这四组标签,每组标签中的两个标签都是等价的,效果是相同的。

2.6图片标签

可以使用img标签来表示图片

 

 

 2.6.1img标签的其他属性

img图片的另一个属性就是改变图片的大小

 

这样看着就比上面顺眼多了。

2.7超链接标签

超链接标签类似于我们上网的网址,点击之后可以跳转到其他页面

 

点开之后就会跳转到网页。

如果我们想跳转到当前这个页面上,可以这样操作

 

2.7.1空连接

 

 点了之后没什么反应的链接,这是为了开发人员在开发初期不知道设计链接而占位的操作。

2.8列表标签

 2.9表单标签

像这种的搜索框就是通过表单标签实现的

 

 

这两个都可以点,但是性别就只有一个

 

同时我们还可以默认性别是啥

 

 

 

 使用input标签来创建按钮:

 

 

 

 第二种创建按钮的写法:

 

上传文件写法:

 

 

2.10 slect标签

 

 2.11 textarea标签

textarea标签可以设置多行编辑框

 

2.12 无语义标签

前面的标签例如:input标签,a标签,都是有着自己特定的含义的标签。

而div标签和span标签是无语义的标签

div 和 span 有什么区别?
唯一的区别:
div 默认是一个块级元素(独占一行)
span 默认是一个行内元素(不独占一行)

 

 

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>个人简历</title>
</head>
<body>
    <h1>某某某</h1>
    <h2>基本信息</h2>
    <img src="animal.jpg" alt=" "title = "xxx" height=" 150">
    <p>求职意向:Java 工程师</p>
    <p>联系电话: 155......</p>
    <p>邮箱: 1780@....</p>
    <p>
        <a href="#">我的gitub</a>
    </p>
    <p>
        <a href="http//.......">我的博客</a>
    </p>
    
    <h2>教育背景</h2>
    <ol>
        <li>2002-2008  小学</li>
        <li>2008-2011  初中</li>
        <li>2012-2015  高中</li>
        <li>2006-2020  大学</li>
     </ol>
    <h2>专业技能</h2>
    <ul>
        <li>熟悉Java常见语法</li>
        <li>熟悉Java数据结构,常见的可以独立实现</li>
        <li>熟悉计算机网络和网络编程</li>
        <li>熟悉MySql数据库</li>
</ul>
    <h2>我的项目</h2>
    <ol>
        <li>
            <h3>留言墙</h3>
            <p>开发时间: 2018年6月4日</p>
            <p>功能介绍:</p>
            <ul>
                <li>支持留言</li>
                <li>支持匿名留言</li>
            </ul>
        </li>
        <!-- 第二个项目 -->
        <li>
            <h3>图书馆系统</h3>
            <p>开发时间: 2019年7月4日</p>
             <p>功能介绍:</p>
             <ul>
                 <li>可以自动借书</li>
                 <li>可以自动还书</li>
             </ul>
        </li>
    </ol>
    <h2>个人评价</h2>
    <p>
        暂无    
    </p>
</body>
</html>

 案例2:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>请填写简历信息</h1>
    <table>
        <!-- 表格每行有两列 -->
        <tr>
            <td>姓名</td>
            <td>
                <input type="text">
            </td>
           </tr>
           <tr>
            <td>性别</td>
            <td>
                <input type = "radio" name = "gender" id = "male" checked = "checked">
                <img src="男.png" height="30px">
                <label for="male">男</label>
                <input type="radio" name = "gender" id = "female">
                <img src="女 (1).png" height="30px">
                <label for="female">女</label>
            </td>
           </tr>
           <tr>
               <td>出生日期</td>
               <td>
                   <select>
                       <option>请选择年份</option>
                       <option>1996</option>
                       <option>1997</option>
                       <option>1998</option>
                       <option>1999</option>
                   </select>
                   <select>
                       <option>请选择月份</option>
                       <option>1</option>
                       <option>2</option>
                       <option>3</option>
                       <option>4</option>
                       <option>5</option>
                       <option>6</option>
                       <option>7</option>
                       <option>8</option>
                       <option>9</option>
                       <option>10</option>
                       <option>11</option>
                       <option>12</option>
                    </select>
               </td>
           </tr>
           <tr>
               <td>就读学校</td>
               <td>
                   <input type="text">
               </td>
           </tr>
           <tr>
               <td>应聘岗位</td>
               <td>
                   <input type="checkbox" id = "frontend">
                   <label for="frontend">前端开发</label>
                   <input type="checkbox" id = "backtend">
                   <label for="backtend">后端开发</label>
                   <input type="checkbox" id = "qa">
                   <label for="qa">测试开发</label>
                   <input type="checkbox" id = "op">
                   <label for="op">运维开发</label>
               </td>
           </tr>
           <tr>
               <td>掌握的技能</td>
               <td>
                   <textarea  cols="30" rows="10"></textarea>
               </td>
           </tr>
           <tr>
               <td>项目经历</td>
               <td>
                   <textarea cols="30" rows="10"></textarea>
               </td>
            </tr>
           <tr>
               <td></td>
               <td>
                   <input type="checkbox" id = "confirm">
                   <label for="confirm">我已仔细阅读贵公司的招聘要求</label>
               </td>
           </tr>
            <tr>
               <td></td>
               <td>
                   <a href="#">查看我的状态</a>
               </td>
           </tr>
           <tr>
               <td></td>
               <td>
               <h3>请应聘者确认</h3>
                   <ul>
                       <li>以上信息真实有效</li>
                       <li>能够尽早去公司实习</li>
                       <li>能够接收贵公司的加班文化</li>
                 </ul>
                </td>
           </tr>
    </table>
</body>
</html>

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端之HTML 的相关文章

  • For 循环覆盖 HTML 中的文本

    我的数组称为myEmployees其中有 5 个名字 但当我运行代码时 它只打印出其中的 3 个 我相信这种情况正在发生 因为for脚本中的循环会覆盖它在 HTML 文档中编写的前一行 我怎样才能解决这个问题 年度公告板公告 恭喜泰勒 你在
  • 如何将内部 div 与外部 div 的底部对齐?

    我需要将内部 div 与外部 div 的底部对齐 我的代码如下所示 div class myOuterDiv div class div1 floatLeft Variable content here div div class div2
  • “mat-card” 不是 Angular 7 中的已知元素

    我看到了很多关于此的问题 但似乎与我遇到的问题不同 我刚刚创建了我的第二个角度项目 我下面有一个新组件src app employees我试图在employees component html 中使用 我收到的错误是 Uncaught Er
  • 打开一个新的浏览器窗口/iframe 并在 TEXTAREA 中从 HTML 创建新文档?

    我正在尝试使用 HTML5 的新离线功能编写一个 Web 应用程序 在此应用程序中 我希望能够编辑一些 HTML 完整文档 而不是片段
  • .addClass 仅添加到无序列表中单击的项目符号

    我有一个简短的无序列表 其中有两个项目符号 我添加了一些 Javascript 这样当我单击项目符号时 它会向其中添加一个类 问题是 它将该类添加到所有现有的 li 中 而不仅仅是我单击的那个 这是 JSFiddle http jsfidd
  • svg路径指针事件-点击检测

    我正在编写一些 HTML 以便可以使用 HTML SVG 和 PATH 标签绘制贝塞尔曲线 我的曲线效果非常好 现在我想添加一项功能 如果用户将鼠标悬停在曲线上 我会更改颜色 但实际情况是 SVG 创建了一个包含路径的大框 并捕获所有点击
  • 如何使用 Nokogiri 漂亮地打印 HTML?

    我用 Ruby 编写了一个网络爬虫 并且正在使用Nokogiri HTML来解析页面 我需要打印该页面 在 IRB 中闲逛时 我注意到一个pretty print方法 然而它需要一个参数 我不知道它想要什么 我的爬虫正在缓存网页的 HTML
  • 使用 JSON 传递 HTML

    我正在使用 JSON 将数据传递到 iPhone 和 iPad 数据的一个字段是 HTML 问题是编码 这是我得到的回复 gt GadgetHTML strong Hello strong gt from Catworld br n img
  • Mailto 链接在 Chrome 中不起作用,但在 Firefox 中有效?

    似乎是mailto我们在网站中嵌入的链接在 Chrome 中无法执行任何操作 但它们在 Firefox 中可以工作 简单的例子在这里 http jsfiddle net wAPNH http jsfiddle net wAPNH a hre
  • 当鼠标悬停在上面时制作一个 React Bootstrap NavDropdown 下拉菜单

    我试图让 React Bootstrap 中的下拉菜单栏在您显示选项时hover超过它 我到处查看 所有解决方案似乎都已过时并且不起作用 如果您能够解决此问题 请告诉我 这是我尝试将更改应用到的下拉菜单
  • 如何使用滚动条图像?

    如何使用 HTML CSS 替换滚动条的图像 I have scrollbar base color 00acee scrollbar dark shadow color 00acee scrollbar track color fffff
  • 如何设置 jQuery 可拖动的最小/最大左和最小/最大右

    我复制了一份JSbin来练习 JSbin链接在这里 https jsbin com gififikisa edit html css js output 实际站点链接在这里 http 79 170 40 181 emory com Proj
  • 具有宽度/高度的 SVG 在 IE9/10/11 上无法缩放

    IE 9 10 11 存在一个已知问题 如果您有一个 SVG 文件
  • Safari 6 (iOS 6) 弹性布局不会换行元素

    我需要将两个框放在列中 这在我测试过的其他浏览器中有效 但在 iOS 6 上的 Safari 6 中无效 例子 http jsfiddle net 5FESj 1 http jsfiddle net 5FESj 1 display webk
  • 图像之间的垂直间距

    我将一张图像剪切为三张相同的图像 现在我将其放入 html 代码中 如下所示 img src images disclosure2 01 jpg alt Disclosure img src images disclosure2 02 gi
  • 如何从 Firefox 中的选择元素中删除箭头

    我正在尝试设计一个select使用 CSS3 的元素 我在 WebKit Chrome Safari 中得到了我想要的结果 但 Firefox 的表现不佳 我什至不关心 IE 我正在使用 CSS3appearance属性 但由于某种原因我无
  • 如何用css3和html5制作不规则形状的div?

    我想知道是否有可能构建具有不规则形状的 div 类似于此 例如格陵兰岛 欧洲 非洲 我想使用 CSS3 和 HTML5 创建像这里这样的地图 以下是示例图像的链接 你所拥有的看起来像一个网格 你可以通过一个 div 上的许多渐变来获得它 也
  • 表单提交不起作用

    我有一张桌子 可以打印出所有可用的相机 它使用表单来更改这些设置 问题在于该表单仅更新条目中的最后一个摄像机 换句话说 如果我更改表单并为列表中的最后一个摄像机点击 应用 它将起作用 如果我更改此列表中任何其他摄像机的表单 它会将其更改为与
  • Django 1.7:如何使用 html/css 文件作为模板发送电子邮件

    从 Django 1 7 开始 可以send email 使用新参数 html message 不幸的是 没有关于如何使用它的全面指南 新手友好 或者至少我找不到它 我需要使发送的电子邮件变得漂亮 因此 我试图弄清楚如何将我的消息包含到 h
  • Javascript 替换为正则表达式无法正常工作

    我正在尝试使用正则表达式验证名称 正则表达式阻止用户连续输入 2 个空格或点 这是我的代码 function test input var regex A Za z 0 1 s 0 1 input value input value rep

随机推荐

  • R语言之词云:wordcloud&wordcloud2安装及参数说明

    一 wordcloud安装说明 install packages wordcloud 二 wordcloud2安装说明 install packages devtools devtools install github lchiffon w
  • 心电信号越界怎么回事_心电图机的干扰及其正确处理方法

    心电图机是记录人体体表各点随时间而变化的心电波形的医疗仪器 医生根据心电图机所记录的波形的形态 波幅大小以及各波之间的相对时间关系来鉴别诊断心脏疾病 因此 心电图机所记录的心电图的精确度对于心脏疾病的鉴别诊断至关重要 但是 由于心电信号比较
  • JAVA面试常考

    1 自我介绍 讲下最有难度的项目 2 对线程安全的理解 3 比如有一个局部变量i 1 两个线程同时执行 是否线程安全 4 比如再有一个共享变量 如何保证线程安全 5 说说ThreadLocal 底层如何实现 6 hashmap实现原理 7
  • 【BATCHNORMALIZATION、LAYERNORMALIZATION、INSTANCENORMALIZATION和GROUPNORMALIZATION】

    总览 神经网络中有各种归一化算法 Batch Normalization BN Layer Normalization LN Instance Normalization IN Group Normalization GN 从公式看它们都差
  • ServerSocket 的建立与使用(多线程)

    1 main方法 package peixun public class MyServerSocket public static void main String args new ServerListener start 2 建立连接
  • 多元线性回归的梯度下降

    目录 1 线性回归的基本概念 2 线性回归算法 3 多元梯度下降算法 4 总结 1 线性回归的基本概念 在回归分析中 如果只包含一个自变量和一个因变量 且二者关心可近似用一条直线表示 则称该回归分析为一元线性回归分析 如果包含两个及两个以上
  • 多模态(图像和文本跨模态)分类

    文章目录 前言 一 数据集介绍 二 处理过程 1 处理图片文本标签数据 1 将label由消极 中立 积极的标签变成数字 0 1 2 并且将其保存在path2label字典中 2 分别将图像文件和文本文件形成列表 3 分别将文本内容 对应的
  • 计算机插本2a院校,广东省专插本2A院校有哪些

    满意答案 yandianhua 2012 12 23 采纳率 45 等级 12 已帮助 15307人 晨光英语考试团很荣幸为您解答 2011年广东省本科插班生招生院校名单 院校代码 院校名称 以下院校是2A线的 533 深圳大学 534 五
  • 刷题之455. 分发饼干 -----贪心初试

    假设你是一位很棒的家长 想要给你的孩子们一些小饼干 但是 每个孩子最多只能给一块饼干 对每个孩子 i 都有一个胃口值 g i 这是能让孩子们满足胃口的饼干的最小尺寸 并且每块饼干 j 都有一个尺寸 s j 如果 s j gt g i 我们可
  • 性能测试浅谈

    早期的性能测试更关注后端服务的处理能力 一个用户去访问一个页面的请求过程 如上图 数据传输时间 当你从浏览器输入网址 敲下回车 开始 真实的用户场景请不要忽视数据传输时间 想想你给远方的朋友写信 信件需要经过不同的交通运输工具送到朋友手上
  • 去除移动端h5的横向滚动条

    我的问题是 在移动端第一次访问h5页面时 页面尺寸被放大了一点 没有手机适配 所以出现了横向滚动条 手指缩小页面尺寸后 横向滚动条才消失 解决方案 在入口页面index html的标签里添加下面一行代码
  • Qt中的中信号槽与异步调用

    Qt中使用信号 槽机制处理跨对象之间的调用 该机制的好处有 1 使得调用关系的绑定和解除十分灵活 不必修改类成员函数代码 2 在不暴露更多全局变量的情况下实现跨命名空间调用 3 可以多个信号对应多个槽 也可以信号之间绑定 对应于GUI中的逻
  • python 使用for循环简单爬取图片(1)

    现在的网站大多做了反爬处理 找一个能爬的网站还真不容易 下面开始一步步实现 1 简单爬录目图片 1 import urllib request 2 import re 3 4 def gethtml url 5 page urllib re
  • Spring_AOP_0100_Annotation入门

    为了以后更好的实习 今天了解了一下spring的aop的基础知识 做了一些简单的测试 算入门aop吧 记录下来 方便以后查阅 spring的版本2 5 6 由于目前aspectj的aop比spring做得更出色 而且spring也提倡直接使
  • Jmeter(三十五) - 从入门到精通进阶篇 - 关联(详解教程)

    1 简介 上一篇中介绍了如果想要同时发送多条请求 那么怎样才能让每条数据某些请求参数改变呢 这就用到了jMeter参数化 在实际测试场景中 我们往往还有这样的需求 登录后服务器响应的token作为下次请求的参数 这就是所谓的参数关联 当请求
  • impala目录

    文章目录 1 入门 2 shell命令使用 3 java操作 1 入门 2 shell命令使用 https blog csdn net qq 21383435 article details 84925144 3 java操作
  • 最新xcode打包IPA(完整详细图文)

    网上的xcode打包ipa教程大多太旧而且又不完整 所以整理了一个最新的完整详细的xcode打包APP的图文教程分享给小白到大神路上的你我 xcode打包IPA包之前先申请iOS证书 然后导入证书才能打包导出IPA包 分为5 步进行 1 申
  • SpringCloud(一)——微服务基础及简单微服务项目搭建

    单体应用开发 传统的web应用开发是将所有的功能模块都打包到一个包中一起部署运行 单体应用集成简洁部署简单 但是随着项目复杂的的增加 单体应用会变得越来越大越来越臃肿 每次进行小功能的更新都需要更新整个包重新部署 什么是微服务 微服务没有一
  • Design Compiler (九)——综合后的形式验证

    这里来讲一下formality的使用 貌似跟tcl和DC没有很强的联系 然而说没有联系 也是不正确的 在综合完成之后 可以进行形式验证 此外这里不是专门讲解formality的使用的 因此只会简单地实践一下它的用法 formality是Sy
  • 前端之HTML

    目录 1 编写一个HTML代码 2 HTML常见语法 2 1注释标签 2 2标题标签 2 3段落标签 2 4换行标签 2 5格式化标签 2 6图片标签 2 6 1img标签的其他属性 2 7超链接标签 2 7 1空连接 2 8列表标签 2