Day7学习日记HTML_wuvcky的博客-程序员ITS301

HTML

什么是HTML

  • Hyper Text Mark Language

W3C

  • World Wide Web Consortium(万维网联盟)
  • W3C标准包括
    • 结构化标准语言(HTML、XML)
    • 表现标准语言(CSS)
    • 行为标准(DOM、ECMAScript)

网页基本信息

<html lang="en">

<!--head标签代表网页头部-->
<head>
<!-- meta描述性标签,他用来描述我们网站的一些信息-->
<!-- 一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="我好帅">
    <meta name="description" content="这是一个初学者搭建的网站">
    <title>我的第一个网页</title>
</head>

<body>
<!--body标签代表网页主题-->
</body>

Hello,World

</html>

网页基本标签

  • 标题标签 h1-h6

  • 段落标签 p

  • 换行标签 br

  • 水平线标签 hr

  • 字体样式标签 strong em

  • 注释和特殊符号 &+ nbsp牛逼色批 空格

  • 	<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基本标签学习</title>
    </head>
    
    <body>
    <!--标题标签-->
    <h1>一级标签</h1>
    <h2>一级标签</h2>
    <h3>一级标签</h3>
    <h4>一级标签</h4>
    <h5>一级标签</h5>
    <h6>一级标签</h6>
    <!--段落标签-->
    <p>床前明月光</p>
    <p>疑似地上霜</p>
    <p>举头望明月</p>
    <p>低头思故乡</p>
    <!--水平线标签-->
    <hr/>
    <!--换行标签-->
    床前明月光<br>
    地上鞋两双<br>
    一堆狗男女<br>
    其中就有你<br>
    <!--粗体、斜体-->
    <h1>字体样式标签</h1>
    <p><strong>i love you</strong></p>
    <em>i miss you</em>
    <br/>
    <!--特殊符号-->
    <p>特殊符号</p>&nbsp;&nbsp;&nbsp;&gt;<br/>&lt;<br/>
    &copy;<br>
    
    <!--
    特殊符号记忆方式
    &+字母
    -->
    
    </body>
    </html>
    

图像标签

  • 常见的图像格式 JPG GIF PNG BMP

  • img src和alt必填

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图像标签</title>
    </head>
    <body>
    
    <!--img学习
    src:图片地址
    绝对地址(直接填目录)
    ../上一级目录   相对地址
    -->
    <img src="../resources/image/girl.jpg" alt="女孩子图片" title="悬停文字" width="1920" height="1080">
    
    </body>
    </html>
    

链接标签

页面间链接

<!--a标签
href:必填,跳转的页面
target:_blank 新打开 _self 本身 _
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到第一个网页</a> <br/>
<a href="2.基本标签.html" >点击我跳转到基本标签学习</a> <br/>
<a href="3.图像标签.html" target="_self">点击我跳转到链接路径</a> <br/>
<a href="https://www.bilibili.com/">点击我跳转到哔哩哔哩</a> <br/>

<a href="1.我的第一个网页.html">
    <img src="../resources/image/girl.jpg" alt="图片链接" width="100" height="100">
</a>

锚链接

<!--用name做标记-->
<a name="top"></a>

<a href="#top">回到顶部</a><br/>
<a href="3.图像标签.html#top">跳转到图像</a>

功能性链接

<!--功能性链接
邮件链接:mailto
QQ链接
-->
<br/>
<a href="mailto:[email protected]">点击联系大帅逼</a><br/>

行内元素和块元素

  • 一段一段的例如p标签就i是块元素
  • 行内标签就是会挤在一行

列表标签

  • 列表分类:有序、无序、定义

  • <ol>//ul
        <li>Java</li>
        <li>Python</li>
        <li>运维</li>
    </ol>//ul
    
  • <dl>
        <dt>自定义标签</dt>
        <dd>Java</dd>
        <dd>Python</dd>
        <dd>运维</dd>
    </dl>
    

表格

  • 基础

  • <td colspan="4"> 跨行  <td rowspan="2">跨列
    
  • <!--表格table
    行 tr
    列 td
    -->
    <table border="1px">
        <tr>
            <!--colspan 跨列-->
            <td colspan="4">我好帅</td>
        </tr>
        <tr>
            <td rowspan="2">1-1</td>
            <td>1-2</td>
            <td>1-3</td>
            <td>1-4</td>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
    </table>
    

视频和音频

  • video和audio
  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S5ujKdHb-1606463993645)(C:\Users\wuvcky\AppData\Roaming\Typora\typora-user-images\image-20201127123532645.png)]

页面结构分析

元素名 描述
header 标题头部区域的内容(用于页面或页面中的一块区域)
footer 标记脚步区域的内容(用于整个页面或页面的一块区域)
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用(常用于侧边栏)
nav 导航类辅助内容
<header><h2>网页头部</h2></header>
<section><h2>独立区域</h2></section>
<footer><h2>网页脚部</h2></footer>

iframe内联框架

在网页内显示另外一个网页

<!-- name 框架标识名-->
<iframe src="" name="hello" frameborder="0" width="1000px" height="300xp"></iframe>
<!--如果src不填写路径,可以使用a标签,超链接标签,在iframe里面做个标记,然后a标签里target到标记出,src内就是我们要跳转的超链接-->
<a href="https://blog.kuangstudy.com" target="hello">点击跳转</a>

表单语法

port get

<!--action:表单提交的位置,可以是网站,也可以是一个请求处理地址-->
<!--post,get 提交方式-->
<!--get方式提交可以在url内看到,高效-->
<!--post方式提交比较安全,可以传输大文件-->
<h1>注册</h1>
<form action="1.我的第一个网页.html" method="post">
<!--文本输入框:input type="text"-->
<!--密码输入框:input type="password"-->
<p>名字: <input type="text" name="username"></p>
<p>密码: <input type="password" name="password"></p>
  <p> <input type="submit">
      <input type="reset">
  </p>
</form>

input 属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iBEl3gIM-1606463993647)(C:\Users\wuvcky\AppData\Roaming\Typora\typora-user-images\image-20201127143329452.png)]

单选框

 <!--单选框 type=radio
value代表提交的值
name是组
-->
    <p>性别:
        <input type="radio" value="boy" name="sex"/><input type="radio" value="girl" name="sex"/></p>

多选框

<!--多选框
input type="checkbox"
-->
<p>爱好:
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="playball" name="hobby">打球
    <input type="checkbox" value="eat" name="hobby">吃饭
    <input type="checkbox" value="code" name="hobby">打代码
</p>

按钮

<p><!--按钮-->
<!--input type="button" 普通按钮
input type="image"  图像按钮
input type="submit"  提交按钮
input type="reset"   重置按钮
-->
    <input type="button" name="btn1" value="点击边长" >
    <input type="image" src="../resources/image/girl.jpg">
</p>

文件域

<!--文件域-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

其他

<!--邮件验证-->
    <p>邮箱:
        <input type="email" name="email">
    </p>
    <!--邮件验证-->
    <p>URL:
        <input type="URL" name="url">
    </p>
    <!--数字-->
    <p>数字:
        <input type="number" name="num" max="100" min="0" step="10">
    </p>
    <!--滑块-->
    <p>滑块:
        <input type="range" name="voice" min="0" max="100" step="10">
    </p>

    <!--搜索-->
    <p>搜索:
        <input type="search" name="search">
    </p>

下拉框select

 <p>国家:
        <select name="列表名称" >
            <option value="china">中国</option>
            <option value="china1" selected>英国</option>
            <option value="china2">美国</option>
            <option value="china3">日本</option>
        </select>
    </p>

反馈域

<!--cols 列  rows行-->
    <p>反馈:
        <textarea name="textarea" cols="30" rows="5">我好帅</textarea>
    </p>

表单的应用

redaonly  只读
    disabled 禁用
    hidden 隐藏

增强鼠标

<label for="mark">邮箱:</label>
        <input type="email" name="email" id="mark">

表单初级验证

常用方式:placeholder(输入框控件)、required(不能为空)、pattern(正则表达式)

正则表达式

//与value不同的是,placeholder显示的是提示信息,value是属性信息

<!-- 名字: <input type="text" name="username" value="请输入名字" maxlength="10">-->
    名字: <input type="text" name="username" placeholder="请输入名字" maxlength="10">
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u014147215/article/details/110234419

智能推荐

C++开发工具,C++的IDE推荐_程序媛张小妍的博客-程序员ITS301_c++ ide

C++开发工具——C++的IDE是C++程序员用于编程的应用程序或软件。IDE主要包括三部分,即源代码编辑器,构建自动化工具(编译器)和调试器。源代码编辑器是程序员可以编写代码的地方,而程序员使用构建自动化工具来编译代码,而调试器则用于测试或调试程序以解决在代码中的错误。今天推荐一下最适合C++的开发IDE工具...

Header Manipulation 漏洞_MapSet的博客-程序员ITS301_header manipulation

今天扫代码发现漏洞,暂定解决方法://全局交易流水号String esbTranNo = StringUtils.isNotBlank(getRequest().getHeader("ESB-TRANNO")) ? getRequest().getHeader("ESB-TRANNO") : "";//检验Header Manipulation 输入验证并验证 其属性是否正确if (StringUtils.isNotEmpty(esbTranNo)) { try { .

PostgreSQL存储地理信息数据的注意点_小刘先森的博客-程序员ITS301_pgsql存储地理数据

PostgreSQL作为功能最强大的数据库,当与PostGIS结合后,在地理信息行业发挥了重大作用。由此可以利用PostgreSQL存储点、线、面数据,但是在使用过程中有一些需要注意的点,下面介绍一下在存储地理信息数据时对于类型上的注意点。友情文章使用PG与PostGIS搭建实时矢量瓦片基于PG与PostGIS的实时矢量瓦片服务——百万级要素优化坑!我们知道矢量数据分为点、线、面三种,实际存储过程中还有多点、多线、多面,并且数据还要包含坐标系信息。PostgreSQL安装PostGIS扩展.

数据库新增幂等操作_由表单重复提交引发的幂等性思考_阿黄sweetgirl的博客-程序员ITS301

最近在本地开发测试的时候,遇到一个表单重复提交的现象。其实原因很简单,因为网络延迟的问题,我点击了两次提交按钮,数据库里生成了两条记录。其实这种现象以前也有遇到过,一般都是提交后把按钮置灰,无法再次提交,这是很常见的客户端处理的方式。但是这真的有从根本上解决问题吗,虽然客户端解决了多次提交的问题,但是接口中依旧存在着问题。假设我们不是从客户端提交,而是被其他的系统调用,当遇到网络延迟,系统补偿的时...

汇编语言 + Visual Studio 2019——Visual Studio 2019 中汇编语言环境解决方案_Starzkg的博客-程序员ITS301

基本概念MASM:Microsoft汇编程序(俗称MASM)是一种工业软件开发工具,已经由主要的操作系统供应商维护和更新了30多年。它从未被软化或折衷为对消费者友好的工具,并且被设计为供专业程序员用于操作系统级代码和高性能目标模块,可执行文件和动态链接库。MASM32 SDK:MASM32 SDK(简称MASM32)是一个独立的项目,旨在简化有经验的程序员进入汇编语言编程领域的工作。...

Linux集群间免密登录_秦同学学学的博客-程序员ITS301_linux集群免密登录

免密登录原因在平时运用计算机集群的时候,如若不设置免密登录,在启动平台的时候就会需要频繁的输入用户口令,这无疑会降低电脑运行速度,影响工作效率,所以才要设置免密登录准备工作1.准备三台虚拟机名字分别叫做master,slave1,slave2,对应IP分别为192.168.23.1 192.168.23.2 192.168.23.32.关闭所有机器防火墙3.检查机器间是否可以互通4.检查机器间的映射关系一.我们需要在master上产生密钥,用于分发给其他电...

随便推点

powermock静态类_使用PowerMockito 对静态类进行mock_德扑god的博客-程序员ITS301

Mock的中文的意思就是模拟,Mockito是mock的扩展,但是Mockito并不支持对静态类的mock,所以我们引入PowerMockito实现对静态类的mock.首先pom添加PowerMockito 的 jar包引用,注意相应的版本号。否则会出现jar包冲突异常。org.mockitomockito-all1.10.8testorg.powermockpowermock-api-mocki...

MySQL——MySQL高可用之MHA_KFC质检员的博客-程序员ITS301

MHA简介MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Facebook公司)开发,是一套优秀的作为MySQL高可用性环境下故障切换和主从提升的高可用软件。在MySQL故障切换过程中,MHA能做到在0~30秒之内自动完成数据库的故障切换操作,并且在进行故障切换的过程中,MHA能在最大程度上保证数据的一致性,以达到真正意义上的高可用。 MHA里有两个角色一个是MHA Node(数据节点)另一个

Centos7开机之后连不上网ens33mtu 1500 qdisc noop state DOWN group default qlen 1000_Hellooorld的博客-程序员ITS301_ens33 state down

昨天配置好的虚拟机,今天打开一看,X-Shell发现里不上了,进到虚拟机界面 ip addr查看信息,结果如下图在开机之后,发现网卡没有启动起来,进行了如下操作,还是不行1、[[email protected] es]# ifup ens33错误:激活连接失败:No suitable device found for this connection.2、[[email protected] es]# systemct...

Self-Attention真的是必要的吗?微软&中科大提出Sparse MLP,降低计算量的同时提升性能!..._我爱计算机视觉的博客-程序员ITS301

关注公众号,发现CV技术之美▊写在前面Transformer由于其强大的建模能力,目前在计算机视觉领域占据了重要的地位。在这项工作中,作者探究了Transformer的自注意(Self-...

基于JAX-WS的webService开发实例_小胖9040的博客-程序员ITS301

一个简单的基于JAX-WS的webService开发实例。

shell脚本二进制部署MySQL_汪泽文666的博客-程序员ITS301

shell脚本二进制部署MySQL1. 创建目录存放脚本2. 下载MySQL的二进制包,并创建目录用来存放包3. 编写脚本4. 效果检测1. 创建目录存放脚本[[email protected] ~]# mkdir /script2. 下载MySQL的二进制包,并创建目录用来存放包[[email protected] packages]# wget https://downloads.mysql.com/archives/get/p/23/file/mysql-5.7.34-linux-glibc2.12-x

推荐文章

热门文章

相关标签