HTML标签

最新推荐文章于 2023-07-14 18:04:08 发布
最新推荐文章于 2023-07-14 18:04:08 发布
阅读量143 收藏
点赞数
分类专栏： HTML 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jamieblue1/article/details/89318083
版权



一、标题、div、span、p、br、a、img、textarea标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是标题</title>
</head>
<body>
<!-- 标题标签 h1最大 h6最小 只需要记住先出生最大 自带属性 -->

<h1>jamie</h1>

<h2>jamie</h2>

<h3>jamie</h3>

<h4>jamie</h4>

<h5>jamie</h5>

<h6>jamie</h6>

<!--div标签-->
<!--块级伪白板标签-->
<div>这是div标签</div>


<!--span标签-->
<!--内联标签真白板标签-->
<span>这是span标签</span>


<!--p标签，段落标签 自动换行-->
<!--一个p标签，是一个段落-->
<p>这是关于Chrome浏览器的介绍：Chrome浏览器是google旗下的浏览器。
    Chrome浏览器至发布以来一直讲究简洁、快速、安全，所以Chrome浏览器到现在一直受人追捧。
    最开始Chrome采用webkit作为浏览器内核，直到2013年，google宣布不再使用苹果的webkit内核，
    开始使用webkit的分支内核Blink。</p>
<p>这是关于Chrome浏览器的介绍：Chrome浏览器是google旗下的浏览器。
    Chrome浏览器至发布以来一直讲究简洁、快速、安全，所以Chrome浏览器到现在一直受人追捧。
    最开始Chrome采用webkit作为浏览器内核，直到2013年，google宣布不再使用苹果的webkit内核，
    开始使用webkit的分支内核Blink。</p>


<!--br标签，换行标签-->
<br>
<br>


<!--a标签 超链接标签-->
<a href="https://www.baidu.com">百度</a>
<!--_blank 新建标签页打开，text-decoration为none去除下划线 -->
<a href="https://www.baidu.com" target="_blank" style="text-decoration: none ">百度</a>


<!--img标签 图片标签-->
<img src="tubiao.ico">
<!--alt属性代表当图片加载失败时展示的文案-->
<!--title属性为鼠标悬浮时的文案-->
<img src="tubiao.ico" alt="这是图片" title="logo">
</body>
</html>

<!--textarea标签 多行文本-->
<textarea name="content">这是textarea的内容</textarea>



二、input标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是标题</title>
</head>

<body>


<!--input标签，输入框-->
<input type="text" name="" value="请输入用户名">
<!--鼠标移入输入框后，请输入用户名消失，使用属性placeholder-->
<input type="text" name="" placeholder="请输入用户名">
<!--以key value的形式传递给后台 value可以不写，不写时value取input框中输入的内容{'username':'输入的内容'}-->
<input type="text" name="username" placeholder="请输入用户名">


<!--密码为隐藏格式-->
<input type="password" name="password">


<!--上传文件 -->
<!--文件类 file 如果上传文件一定要在form中添加特殊属性 enctype="multipart/form-data" 意思是一点一点的发给服务器-->
<input type="file" name="file"/>


<!--多选框checkbox  默认勾选使用checked-->
<input type="checkbox" name="" checked="checked">


<!--单选框radio -->
<input type="radio" name="">


<!--radio name字段相同时，单选框互斥 -->
<!--男 女只能选一个-->
<div>
    <span>男</span> <input type="radio" name="sex">
</div>
<div>
    <span>女</span> <input type="radio" name="sex">
</div>


<!--form与input联用-->
<!--button、submit 的区别-->
<!--button只是个按钮，点击后没有任何的附加操作；实际工作中button用的比较多，可以联合onclick进行ajax提交，不刷新页面-->
<!--submit与form表单连用，点击后，会提交form表单中的数据，刷新页面-->
<!--form表单提交会刷新页面，ajax不会刷新页面-->
<form action="s.html" method="post">

    <input type="button" value="增加">
    <input type="submit" value="提交">
    <!--点击重置按钮，会将内容重置为value的内容-->
    <input type="text" value="已经被重置了">
    <input type="reset">
</form>


<!--label 与 input连用 通过for属性 映射到input的id属性-->
<!--扩展可点击范围，点击用户名输入框也会进入可编辑状态-->
<label for="i1">用户名：</label>
<!--id属性选择器-->
<input id="i1" placeholder="请输入用户名" name="username" type="text">




</body>
</html>

在这里插入图片描述


三、select、列表、表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是标题</title>
</head>
<body>


<!--select标签 下拉框标签 size表示下拉框展示多少个 mutiple表示可以多选，摁住ctrl selected表示默认选中-->
<select name="city" size="1" multiple="multiple">
    <option value="1">北京</option>
    <option value="2" selected="selected">河南</option>
    <option value="3">河北</option>
</select>

<!--下拉框 分组-->
<select>
    <optgroup label="黑龙江">
        <option>牡丹江</option>
        <option>哈尔滨</option>
        <option>鸡西</option>
    </optgroup>
    <optgroup label="河北">
        <option>保定</option>
        <option>石家庄</option>
        <option>廊坊</option>
    </optgroup>
</select>



<!--无序列表标签 ul-->
<ul>
    <li>用例名称</li>
    <li>用例方法</li>
    <li>返回参数</li>
</ul>


<!--有序列表标签 ol 即带数字-->
<ol>
    <li>用例名称</li>
    <li>用例方法</li>
    <li>返回参数</li>
</ol>


<!--列表 分组-->
<dl>
    <dt>黑龙江</dt>
    <dd>牡丹江</dd>
</dl>
<dl>
    <dt>河北</dt>
    <dd>保定</dd>
</dl>



<!--表格标签 table-->
<!--thead为表头，tr代表行，th代表列-->
<!--tbody为表体，tr代表行，td代表列-->
<!--colspan，占n列，即横向合并单元格-->
<!--rowspan，占n行，即纵向合并单元格-->
<table border="1">
    <thead>
        <tr>
            <th>id</th>
            <th>caseName</th>
            <th>Method</th>
            <th colspan="2">操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td rowspan="3">抽奖</td>
            <td>post</td>
            <td>编辑</td>
            <td>删除</td>
        </tr>
            <tr>
            <td>2</td>
            <td>post</td>
            <td>编辑</td>
            <td>删除</td>
        </tr>
            <tr>
            <td>3</td>
            <td>post</td>
            <td>编辑</td>
            <td>删除</td>
        </tr>
</body>
</html>

在这里插入图片描述



四、比较重要的标签

  1. 出场率最高的标签：div标签；
  2. form与input联用；
  3. select标签；
jamieblue1
关注
专栏目录
html标签样式
Bianca427的博客
05-31 5296
13、伪装选择器：链接标签a：link{color:yellow} 功能：作用于链接标签当鼠标移动标签时触发... 设置未被点击的时字体颜色：a：link{color:yellow} 设置已被点击的链接字体颜色：a:visited{color: brown} 设置鼠标悬停的字体颜色：a:hover{color: yellow;} 设置鼠标点击未释放字体颜色:a:active{color: blue;}...
HTML标签属性
m0_66081324的博客
06-27 4167
1.标签由标签名、标签属性和文本内容三部分组成（注意：单标签没有文本内容）。 2.标签属性是对标签的一种描述方式。 3.标签属性分通用属性、自有属性和自定义属性。 4.通用属性:所有标签都具有的属性（除标签外）。 通用属性有： id：用来给标签取一个唯一的名称。id名称在一个网页必须是唯一的。 class：用来给标签取一个类名。 style：用来设置该标签的行内样式。 title：当鼠标移到该标签，所显示的提示内容。 5.自...
HTML标签详解
最新发布
Krive~Irving
07-14 4729
html详解
常用html标签及其属性
weixin_53988377的博客
07-16 1万+
网页的基本结构文档类型声明标签文档标记标签文档的头部标签文档的主体标签。
常用的HTML标签及属性
weixin_59246157的博客
04-02 3706
属性：action、method、name、value、placeholder、required、readonly、disabled、size、maxlength、id、class、style。5. 表格标签：table、tr、th、td；属性：border、cellpadding、cellspacing、width、height、align、valign、id、class、style。属性：src、autoplay、controls、loop、muted、preload、id、class、style。
HTML 基本开发方式，学会常用的 HTML 标签
热门推荐
1226
04-28 1万+
一、HTML 基本开发方式 1、如何编写 HTML 代码 本身的语法比较简单，语法风格和 Java 之类的差别很大，(并不能表达一些逻辑，而只是能表达 “有哪些东西" 一种信息)， 使用记事本创建一个文件，后缀名改成 .html 即可，运行 html 也不需要额外的编译器，直接有浏览器就行 hello world! 虽然这个代码能运行，但是其实并不算是一个合法的 HTML 语法，那为什么浏览器还能正常运行呢?? 鲁棒性：“容错能力” 强 <html> <head> &
html基本标签
weixin_44992737的博客
06-04 4684
html基本标签
html文本标签
Alkali!的博客
07-11 3423
文本标签虽然很多，但大部分可看成是预定好样式的和。元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。 其他块级标签例如：, , , , , 。 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。 与 元素很相似，但 是一个 块元素 而 则是 行内元素,其他内联标签例如：, , , , ,
html 学习 常用的html标签及使用
weixin_46673625的博客
04-30 6706
html 常用的标签及使用 表格标签 from input select label textarea 标签
过滤Html标签
MaoJianXiang的博客
09-22 4463
有时候在iOS开发中，有可能遇到需要把Html的标签过滤成字符串过滤标签成字符串+ (NSString *)filterHtmlTag:(NSString *)originHtmlStr{ if (!originHtmlStr||[originHtmlStr isKindOfClass:[NSNull class]]) { return @“没有内容"; }
HTML 标签
qq_67413159的博客
03-06 4040
文本是网页的基本元素，在<body> 标签中直接插入文本，即可显示在网页页面中。 例如： 标题段落标签 在网页制作规范中，网页的内容需要用标题来呈现文档结构，标题类似于文章的大纲。标题 是通过 <h1>~</h6> 标签进行定义的， <h1> 用于定义最大级别的标题。<h6> 用于定义最小级别的标题。 HTML 规则中对6级标题段落标签设置了默认样式，，包含加粗、字号、上下间距，每一级的字号和上下间距值如下表所示。运行...
html标签各属性之间用空格隔开对吗,03-HTML标签（二）
weixin_39899691的博客
06-04 4071
一、HTML常用标签1、排版标签排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。1.1、标题标签 h1 ~ h6单词缩写： head 头部. 标题为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题。语义：作为标题使用，并且依据重要性递减语法： 标题文本 标题文本 标题文本 标题文本 标题文...
java输出中写html标签,java 输出html标签
weixin_42374582的博客
05-31 2084
java 输出html标签[2021-02-01 07:37:44]简介:php去除nbsp的方法：首先创建一个PHP代码示例文件；然后通过“preg_replace("/(\s|\&nbsp\;|　|\xc2\xa0)/", " ", strip_tags($val));”方法去除所有nbsp即可。推荐：《PHP视频教jquery输出html代码的方法：1、直接输出标签元素，代码为【...
freemarker解析html标签,【转】Freemarker输出$和html标签等特殊符号
weixin_39970689的博客
06-21 2009
原文：http://blog.csdn.net/achilles12345/article/details/41820507场景：程序员都不喜欢看文档，而更喜欢抄例子。所以，我们把平台组的组件都做成例子供别人参考。我们前端展示层使用的是freemarker，所以遇到这个问题，比如我们要让前端显示freemarker自己的源码时就有问题了(因为我们例子程序的页面也是使用freemarker)。遇到的...
Threejs进阶之五：使用CSS2DRenderer给模型添加HTML标签
九仞山的专栏
04-22 3152
详细介绍了CSS2DRenderer的使用，结合模型和Raycaster光线投射，实现了选中模型弹出标签显示信息的效果
Markdown中原格式显示html标签
jamieblue1的博客
04-12 3103
问题出现原因： 我们在写markdown文档的时候，会穿插一些HTML标签，这些标签需要按HTML原格式显示，但是直接书写，会被markdown解析为格式，无法显示出来 解决办法 使用markdown自带的行内代码 即将代码用两个反单引号括起来，也可以直接点击csdn中markdown头部的【代码块】按钮。 不足之处，会显示为红色，有强迫症的人可能会不太舒适。 例： `<h1>...
HTML head标签
jamieblue1的博客
04-15 1520
标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息 以及其他更多的信息。 以下列出的元素能被用在 ...
HTML基本格式
jamieblue1的博客
04-12 864
一、HTML文档基本格式 <!DOCTYPE html> <!--文档类型声明--> <html lang="en"> <!--表示HTML文档开始，指定语言en--> <head> <!-- 文档元数据开始 --> <meta charset="utf-8"> &lt...
HTML之JS
jamieblue1的博客
04-17 588
JS即Javascript，跟java、python、C++一样，都是是一种独立的语言。 在HTML中可以将JavaScript/JS的代码写在head中，被script标签所包裹，当浏览器解释HTML时，遇到style标签时，按照CSS规则解释，遇到Script标签时，按照JavaScript的语法规则解释。 引入JavaScript代码 类似于Python的import <script...
HTML标签属性完全指南
"HTML标签属性大全" HTML（HyperText Markup Language）是用于创建网页的标准标记语言。这个摘要提供了HTML标签的一些基本知识，包括文档结构、文本样式、链接创建、格式排版以及图形元素的使用。 首先，HTML文档...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值