2021-06-13

最新推荐文章于 2022-01-16 19:41:56 发布
最新推荐文章于 2022-01-16 19:41:56 发布
阅读量91 收藏
点赞数

html标签属性

 

1.标题标签 字体加粗显示其中H1标签最大，在页面中尽量只书写唯一H1标签，如果书写多个可能会影响SEO(搜索引擎优化); h1~h6标题标签，随着数字越大 标签在页面实际显示越小，类似于word中的标题

2.p 双标签  用于包裹段落内容,会根据标签大小对内容进行自动换行

3.<a href=""></a>//超链接标签 可以用于页面的跳转(内部链接与外部链接)

href属性:用于书写页面功能的链接,a标签的很多属性只有在书写这个属性之后才会生效

title属性:用于鼠标移入时对当前的a标签进行解释说明的文字,无需书写href属性也可以进行使用

target属性:用于在进行页面跳转时设置跳转样式 默认为_self 在当前页面打开

 <!-- 外部链接 -->
    <a href="http://www.baidu.com" title="这是一个a标签" target="_self >当前页面·</a>
 <a href="http://www.baidu.com" title="这是一个a标签" target="_blank >新页面</a>
  <a href="http://www.baidu.com" target="_parent">在当前页面的父页面打开，如果没有则等同于_self</a>
   <a href="http://www.baidu.com" target="_top">在当前页面的最顶级页面打开，如果没有则等同于_self</a>

    <!-- 内部链接 -->
    <a href="two.html">内部链接</a>

标签属性

input标签 outline属性：当值为none时input输入框没有聚焦效果

text 可以获取输入到输入框里文本 <input type="text" name="" value=""默认值>

password 密码输入框<input type="password" name="" value=""默认值>

submit提交按钮 将当前按钮所在的表单提交至指定位置 如果没有设置value属性 那么默认为提交 <!-- 提交按钮 --> <input type="submit" value="登录">

reset重置按钮 将当前所在form表达进行重置（恢复初始化阶段） <!-- 重置按钮 --> <input type="reset" value="重置">

checkbox复选输入框 进行复选操作的输入框 <!-- 复选输入框 --><input type="checkbox" name="" value="抽烟">

radio单选输入框 <!-- checked默认选择属性 只需要有这个属性即可 无需值输入 --> <input type="radio" name="sex" value="男" checked>男<br>

file文件输入框 当进行文件上传时使用的输入框(需要在from添加enctype="multipart/form-data") <!-- 文件输入框 --> <input type="file" name="file" >

hidden隐藏输入框 不显示在页面中，向服务器发送不让客户直接看到的数据，比如修改数据 <!-- 隐藏输入框 --> <input type="hidden" name="hidden" value="隐藏的数据">

<!-- 邮箱输入框 --> <input type="email/url" name="email"><br>

<!-- 滑块输入框 --> <input type="range" name="range" min="0" max="100" value="100" ><br>

<!-- 数字输入框 --> <input type="number" name="number" min="0" max="100" step="5"><br>

<!-- 颜色输入框 --> <input type="color" name="color"><br>

<!-- 日期输入框 -->time时间选择 <input type="time" name="time"><br>

date日期选择 <input type="date" name="date"><br>

datetime-local 日期时间选择

常用属性

placeholder：占位符（在页面使用指定的占位符进行数据提示）通常用于可以输入文本的标签

readonly：只读 不允许输入只允许读取 与其他输入的数据没有样式区别

disabled:禁用 显示灰色背景禁止使用样式

required:必填 在进行提交时必须添写数据不能为空,会进行简单的提示

    <!-- 文本输入框 -->
        <input type="text" name="" value="默认值">
    <!-- 密码输入框 -->
		 <input type="password" name="password" value="默认值"><br>
    <!-- 图片按钮 -->
        <input type="image" src="../img/a1.jpg"  alt="submit" width="50px">
    <!-- 提交按钮 -->
        <input type="submit" value="登录">
     <!-- 重置按钮 -->
        <input type="reset" value="重置"> 
   <!--  **checkbox复选输入框**-->
       <!-- 复选输入框 -->
        <input type="checkbox" name="like" value="抽烟">抽烟<br>
        <input type="checkbox" name="like" value="喝酒">喝酒<br>
        <input type="checkbox" name="like" value="烫头">烫头<br>
   <!--**radio单选输入框**-->
        <!-- 单选输入框 -->
        <!-- checked默认选择属性 只需要有这个属性即可 无需值输入 -->
        <input type="radio" name="sex"  value="男" checked>男<br>
        <input type="radio" name="sex"  value="女">女<br>
     <!-- 文件输入框 -->
        <input type="file" name="file" >
   <!-- 隐藏输入框 -->
        <input type="hidden" name="hidden" value="隐藏的数据">
      <!-- 邮箱输入框 -->
        <input type="email/url" name="email"><br>
        <!-- 滑块输入框 -->
        <input type="range" name="range" min="0" max="100" value="100" ><br>
        <!-- 数字输入框 -->
        <input type="number" name="number" min="0" max="100" step="5"><br>
        <!-- 颜色输入框 -->
        <input type="color" name="color"><br>
     <!-- 日期输入框 -->
        <input type="time" name="time"><br>
        <input type="date" name="date"><br>
        <input type="datetime-local" name="datetime"><br>

select标签

下拉框标通过书写选择页面可以呈现下拉菜单的形势进行数据的选择

通常与选项标签一同使用value为提交到后台服务器时设置的数据标识

    <!-- 下拉框 -->
        <select name="select" size="10" multiple>
            <option >===请选择你的爱好===</option>
            <option value="cy" >抽烟</option>
            <option value="hj" >喝酒</option>
            <option value="tt" >烫头</option>
            <option value="cy" >抽烟</option>
        </select><br>

size代表展示的选项个数多余使用滚动条展示

multiple代表可以进行多选通常与size属性一同使用

textarea文本域

用于输入多行文本的输入框与input不同的是，他是一个双标签 标签内容为默认值

        <!-- 文本域 -->
        <textarea name="textarea"  cols="15" rows="15">
            默认数据
        </textarea>

lable标注标签

通过id与指定标签关联当进行选择标注文本时代表选择对应的标签

        <!-- 标注标签 -->
        <!-- 通常与form表单内标签一同使用  实现文本与对应标签的关联 
        通过for属性 与对应id的标签进行关联
        
        <input type="radio" name="sex" value="男" id="n1" checked> <label for="n1">男</label>

标签组

可以将多个输入框或文本内容进行包裹提供设置标签组名称

 <!-- 标签组 -->
            <fieldset>
                <!-- 设置标签名称 -->
                <legend>不常用标签</legend>



                <!-- 邮箱输入框 -->
                <input type="email" name="email" placeholder="请输入正确的邮箱地址"><br>
                <input type="url" name="url" value="https://www.baidu.com" disabled><br>

                <!-- 日期输入框 -->
                <input type="time" name="time"><br>
                <input type="date" name="date"><br>
                <input type="datetime-local" name="datetime"><br>

                <!-- 文件输入框 -->
                <input type="file" name="file"><br>

                <!-- 滑块输入框 -->
                <input type="range" name="range" min="0" max="100" value="100"><br>

                <!-- 数字输入框 -->
                <input type="number" name="number" min="0" max="100" step="5"><br>

                <!-- 颜色输入框 -->
                <input type="color" name="color"><br>

            </fieldset>

 简单表格语法

    <!-- 简单表格 -->
    <!-- border属性 是表格标签提供的定义边框粗细的属性 一般后面在css中设置 -->
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>里斯</td>
            <td>男</td>
            <td>28</td>
        </tr>
    </table>

table表格标签 与包裹表格内行列标签

tr行标签 用于表示新的一行数据

th标题标签 一般书写在表格第一行用于定义每列的标题

td列标签 每个td代表一个表格内容 书写在tr中与对应标题对应

默认情况下：表格的大小是根据内容自动调整，如果表格没有内容则为空表格

表格基本属性

border 边框粗细 设置表格外边框粗细 在table设置是设置整个table的边框

width 表格宽度 书写在table设置整个表格的宽度,也可以书写在指定的列中设置列的宽（一般设置标题列）

height 表格高度 书写在table设置整个表格的高度,也可以书写在指定的行中设置列的宽（对于表格的高度一般不会进行设置，会自动根据数据进行设置）

cellpadding 内边距 单元格内文本距离单元格的距离

cellspacing 外边距 单元格边框距离另一个单元格边框的距离

align 水平位置 left center right

valign 垂直位置 top bottom

<!-- 简单表格 -->
    <!-- border属性 是表格标签提供的定义边框粗细的属性 一般后面在css中设置 -->
    <table border="1" width="300px" height="300px"   cellpadding="0px"  cellspacing="0px"  >
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>19</td>
           
        </tr>
        <tr>
            <td>里斯</td>
            <td>男</td>
            <td>28</td>
        </tr>
    </table>

合并单元格

colspan 跨列属性 默认值为1 当设置属性时会以当前单元格进行跨列，其他单元格依次向后移动

rowspan 跨行属性 默认值为1 当设置属性时会以当前单元格进行跨行，其他单元格向下移动

(注：同时书写会将指定行列全部占用（以第一个单元格）)

    <!-- 合并属性 -->
    <table border="1"  cellpadding="0px"  cellspacing="0px" >
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">张三</td>
            <td>19</td>
        </tr>
        <tr>
            <td>里斯</td>
            <td>男</td>
            <td>28</td>
        </tr>
    </table>

表格格式

<caption>表格标题标签

用于设置当前表格标题

表格无语意标签：没有特殊的语义功能，只不过书写在表格中用于区分表格内部数据的标签

<thead>表格头标签

<tbody>表格内容标签

<tfoot>表格尾部标签

列统一样式设置

<col>可以通过col设置指定列的样式宽、高、背景等

<colgroup>无特殊语义用来包裹多个col标签

        <colgroup>
            <col width="50px" bgcolor="red" span="2">
            <col width="50px" background="../img/sdwlb1.gif">
            </colgroup>

实体

在html书写解析过程中，标签在页面是不能显示的以至于一些符号在html解析时也会被解析导致显示内容不符，字符实体就是使用特殊的语法是浏览器在解析后展示指定的字符

在代码书写时如果想在页面 书写对应的显示 只需要书写对应的实体名称或实体编号即可（个人建议记名称）

    <pre>
&lt;a&gt;这是a标签&#60;a&#62;  
&lt;b&gt;这是b标签&#60;/b&#62;
    </pre>

其他html标签

  <!-- 缩写标签 通过title属性在页面对指定的词进行介绍 -->
    <acronym title="World Wide Web">WWW</acronym>
    这是一个缩写<abbr title="Hypertext Markup Language">HTML</abbr>

    <!-- 地址标签  用来包裹页面作者相应的信息 -->
    <address>
        email <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
        联系地址:<br>
        中国靠山屯<br>
    </address>

    <!-- 带有可点击区域的图像映射标签 可以在图片上添加指定区域的点链接 -->
    <!-- 最好添加同的name与id -->
    <img src="../img/cat.jpg" border="0" usemap="#planetmap" alt="Planets" width="400px" height="220px" />

    <map name="planetmap" id="planetmap">
        <area shape="rectangle" coords="200,0,300,75" href="venus.html" title="脑袋瓜子" />
        <area shape="circle" coords="128,167,40" href="venus.html" title="屁股" />
    </map>

    <!-- 音频标签  用于在当前页面插入音频 -->
    <audio src="../img/复习.mp4" controls>
        您的浏览器不支持 audio 标签。
    </audio>

    <video src="../img/复习.mp4" autoplay="autoplay" controls="controls" width="500px"></video>


    <br>
    <!-- 内联框架 -->
    <iframe src="table.html" frameborder="0" width="100%" height="940"></iframe>

杨691
关注
CSS学习笔记（学习中）
a2028535133的博客
03-10 579
HTML 多媒体与语义化标签 图片标签 。。。。。。。。。。。 相对路径 相对路径：描述从网页出发，如何找到图片。 <img src="images/gugong.jpg"> 随着网页和图片的位置关系不同，插入图片的代码随之改变 如果需要回退层级，使用../这样的写法 绝对路径 绝对路径：描述图片精准地址。 <img src="https://i0.hdslb.com/bfs/feed-admin/9a30607625e6c07da570bb2eb07ebdcc4b2
date 类型 input的时间设置
qq_43107290的博客
03-04 2603
1，max属性 例子：选择出生日期 JavaScript代码部分： &lt;script type="text/javascript"&gt; $(function(){ //得到当前时间 var date_now = new Date(); //得到当前年份 var year = date_now.getFullYear(); //得到当前月份 //注： // 1...
html里面type的主要类型 || HTML5新增表单控件和表单属性
林中明月间丶
11-09 1539
placeholder 属性适用于以下的 &lt;input&gt; 类型：text, search, url, telephone, email 以及 password。 值 "text/css" 指示内容是标准的 CSS。text/css和text/javascript button：定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。&lt;br&gt; &lt;input...
单选框选中值获取以及设置某个选中
pp
09-21 1965
radio选中的值获取 HTML： &amp;lt;input type=&quot;radio&quot; name=&quot;sex&quot; id=&quot;sex&quot; value=&quot;男&quot; /&amp;gt;男 &amp;lt;input type=&quot;radio&quot; name=&quot;sex&quot; id=&amp
＜input＞表单元素四个属性使用场景
weixin_42900834的博客
01-16 546
1.表单元素刚打开页面就默认显示几个文字怎么做？ 答：可以给这些表单元素设置Value属性=“值” 用户名：<input type="text" value="请输入用户名"> 2.页面中的表单元素很多，如何区别不同的表单元素？ 答：name属性：当前input表单的名字，后台可以通过这个name属性找到这个表单。页面中的表单很多，name的主要作用就是用于区别不同的表单。 用户名：<input type="text" value="请输入用户名" name="use
2021-06-13-TL431-输出5V
liu的博客
06-13 2069
1.利用TL431调出5V
2021-06-18
darkerv的博客
06-18 7613
安装idea 无法启动 ，Failed to load JVM DLL\bin\server\jvm.dll方案一方案二解决办法 方案一 1、系统可能没有安装Microsoft Visual C++ 2010 Redistributable Package 2、jdk与idea架构不对应，例如：jdk 是 64位，idea是32位。 这是网上常见的解决办法，你们可以试试，我的情况这两种没有用 方案二 这是我自己遇到的情况，只能用管理员启动，但是用管理员启动，是破解不了idea的。 解决办法 卸载IDEA（卸
2021-06-08
热门推荐
luquanyou的博客
11-09 3万+
Copyright © 2017-2020, googlehosts members. https://github.com/googlehosts/hosts Last updated: 2020-02-19 This work is licensed under a modified HOSTS License. https://github.com/googlehosts/hosts/raw/master/LICENSE Modified Hosts Start Localhost (DO NOT R
2021-05-05
樊金良的博客
05-05 802
你需要努力，fighting！
2021-06-23
weixin_45895061的博客
06-23 5517
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
华为电脑管家2021-06-07.zip
06-07
包含华为官网电脑管家10.1.2.33版、11.1.1.95版安装包；华为电脑管家安装工具（PCManagerMgr）和口令、还有帮助说明pdf文档;该资料来自：https://www.52pojie.cn/thread-1453159-1-1.html
Screenshot_2021-12-13-19-12-28-441_com.sm.tiktoktool.jpg
12-14
Screenshot_2021-12-13-19-12-28-441_com.sm.tiktoktool.jpg
金融时报-2021-10-06.pdf
11-16
金融市场在2021年10月5日的波动展示了全球投资者的情绪和市场动态。主要股票指数呈现普遍上涨态势，反映出市场对经济复苏的信心。美国的S&P 500指数上涨1.38%，收于4359.89点；纳斯达克综合指数上涨1.45%，达到14462...
ListView上下翻页效果.zip
11-15
ListView上下翻页效果
Android项目之——漂亮的平台书架.zip
11-15
Android项目之——漂亮的平台书架
TestBrightness2.zip
11-15
TestBrightness2
00_Método_toBands.ipynb
最新发布
11-15
gee python 教程（西班牙语）
(源码)基于Linux和GTK的系统监控与图形化显示.zip
11-15
# 基于Linux和GTK的系统监控与图形化显示 ## 项目简介 本项目旨在通过分析Linux系统中的proc目录，提取并展示系统的关键信息，包括系统概况、进程信息和内存使用情况。通过使用GTK库，项目提供了一个图形化的用户界面，使用户能够直观地查看和监控系统的实时状态。 ## 项目的主要特性和功能 1. 系统信息展示 显示内核版本、系统启动时间等基本信息。 提供系统的主机名、CPU详细参数等信息。 2. 进程信息展示 显示所有进程的摘要信息，包括PID、CPU和内存使用率。 支持根据CPU使用率、内存使用率等参数对进程进行排序。 3. 内存信息展示 展示系统的内存使用情况，包括总内存、可用内存等详细参数。 4. 动态刷新 系统信息、进程信息和内存信息能够实时动态刷新，确保用户获取最新的系统状态。 5. 图形化界面 使用GTK库创建直观的图形界面，方便用户查看和操作。
.var amout = { '2021-10-01': 0, '2021-10-02': 0, '2021-10-03': 0, '2021-10-04': 0, '2021-10-05': 0, '2021-10-06': 0, '2021-10-07': 0, '2021-10-08': 2.2, '2021-10-09': 2.5, '2021-10-10': 0, '2021-10-11': 0, '2021-10-12': 0, '2021-10-13': 0, '2021-10-14': 0, '2021-10-15': 0, '2021-10-16': 0, '2021-10-17': 0 }; 将对象转换为 var arr = [ { '2021-10-01': 0 }, { '2021-10-02': 0 }, { '2021-10-03': 0 }, { '2021-10-04': 0 }, { '2021-10-05': 0 }, { '2021-10-06': 0 }, { '2021-10-07': 0 }, { '2021-10-08': 2.2 }, { '2021-10-09': 2.5 }, { '2021-10-10': 0 }, { '2021-10-11': 0 }, { '2021-10-12': 0 }, { '2021-10-13': 0 }, { '2021-10-14': 0 }, { '2021-10-15': 0 }, { '2021-10-16': 0 }, { '2021-10-17': 0 } ]
03-14
我可以回答这个问题。您可以使用 Object.entries() 方法将对象转换为数组，然后使用 Array.map() 方法将每个键值对转换为一个对象。以下是代码示例： ``` var arr = Object.entries(amout).map(([key, value]) => ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值