html-高级标签

1. 简单标签

strong: 定义重要性强调的文字
ins(inseted):定义插入的文字
em(emphasized):定义强调的文字
del:被删除的文字(删除线)
©版权符号

<body>
  <div style="这里也可以写一些div的样式">
  //html 编码 以&开头,;结束  &xxx;
  &nbsp:一行文字中无论你放了多少个空格,浏览器上都只显示一个,要想显示多个空格,就需要
  &nbsp空格符
   &lt;小于号
  &gt;大于号
例如&lt;div&gt;页面显示就是<div>
  <br>换行符,单标签,代码中无论回车多少次,页面都只显示一次换行,多次换行就需要多个<br>标签
   </div>
</body>

H标签:给文本添加标题语义,而不是修改页面样式的,一个页面中只能有一个<h1>标签


<hr>:显示分隔线,单独一行

2. 有序列表

<ol type="1" reversed="resversed" start="2">
 <!-- type 排序方式 1/a/A/i/I 五种种排序方式,区分大小写  reversed倒序 start从第几个开始排,后面是罗马数字第几个-->
        <li>苹果</li>
        <li>橘子</li>
        <li>梨子</li>
        <li>香蕉</li>
</ol>
type="1"

type="1" reversed="resversed"

<ol type="a" start="2">

3. 无序列表(与div和span一样重要)

type的三种样式
<ul type="disc" >
<!--只有这一个属性 type square实心方块 circle空心圆 disc实心圆-->
    <li>天猫</li>
    <li>聚划算</li>
    <li>天猫超市</li>
    <li>🍊</li>
</ul>

常用于导航栏这种子项基本样式、功能都一样,只是内容有一些细微差别的功能块,css里面写list-style:none可以去掉前面的小原点

定义列表
<dl>
      <dt>定义标题<.dt>
      <dd>标题描述</dd>
</dl>

应用场景:网站尾部相关信息,图文混排

4. 图片

alt:当src路径有问题时图片就显示不出来,可使用alt简单展示图片信息
title:当鼠标挪到图片上的时候会显示一些提示内容
<img src="路径"  style="样式"  alt="" title="图片提示符">
<!-- 1.网页路径
    2.本地绝对路径:跟页面不在一个页面,要写完整路径
    3.本地相对路径 :跟页面在同一个地址下,直接写图片名字就行
-->

5. 超链接

<a href="www.baidu.com" style="" target="_blank">
www.baidu.com
里面包含的所有内容点击后都会跳到href内的链接页面,target="_blank"代表打开新页面,不写或者是_self表示在当前页面打开
可放文字、图片
</a>
href:

1、超文本引用,写链接地址
2、锚点,类似目录,href里写元素id,例如#img1,点击就会跳到id为img1的地方,只有#会跳到顶部,如果写本地文件地址,可以跳转到本地文件,本地文件地址+#id可以跳转到文件指定位置
3、打电话,tel:400252255 点击就会拨打电话
4、发邮件:mailto:邮箱地址
5、协议限定符:例如下图

可以强制运行js的代码
实现效果

target:不加这个就是在本页面跳转,加上_blank就会在新标签页面打开链接
<base target="_blank"><head>里写上这句话就可以让所有<a>标签都跳转新页面

6. 表单标签:超级重要,可发送消息跟后端交互

name:必须写才能发送过去 数据名,比如下面点击登陆,就会提交用户名和密码,类似http://xxxx?username=xxx&password=xxx,就可以从后台按格式解析出数据名和数据值
在表单标签中,除了按钮标签以外的标签,都可以通过value来指定需要提交到服务器的数据
input标签 type:

text是文本输入框
password密码输入框
submit提交按钮,会将form标签内input的数据全部提交给后台
radio是单选标签,当有多个选项时需将他们的name设置为同一个名字,这样就会被识别为同一道题的选项,实现单选操作
checkbox 多选框,所有选项name必须一致,跟单选框一样,需要给value设置值提交时才知道选的是谁

<form method="get" action="">
    <p>username:<input type="text" name="username"></p>
    <p>password:<input type="password" name="password"><p>
                <input type="submit" value="登陆">
     <br>
    你喜欢的水果 
    <!--单选框 设置同一个name就能实现单选,checked可以设置默认选中-->
    <br><input type="radio" name="fruit" value="apple">1、苹果
    <br><input type="radio" name="fruit">2、梨
    <br><input type="radio" name="fruit">3、草莓
    <br>

    <br><input type="checkbox" name="fruit" value="apple">1、苹果
    <br><input type="checkbox" name="fruit">2、梨
    <br><input type="checkbox" name="fruit">3、草莓
    <br>
</form>
非input标签 select
<form method="get" action="">
    //select下拉菜单
    <select name="pro">
      <option>北京</option>
      <option>天津</option>
      <option>山西</option>
      <option>河南</option>
     </select>

    <!--用于定义下拉列表-->
    <select name="" id="">
        <!--optgroup可以给列表分组,用label标示分组名-->
        <optgroup label="城市">
            <option>广州</option>
        </optgroup>
        <optgroup label="省份">
            <option>河南</option>
            <option selected="selected">广东</option>
        </optgroup>
    </select>
</form>
select效果
textarea 多行文本
<!--1、有默认宽高,可无限换行,
2、也可自行可设置宽高 cols显示几列 rows显示几行 
3、右下角有个区域可随意拖动变换宽高,可用css resize: none;设置去掉该区域,参照下图右边样式-->
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea class="textarea1" id="" cols="30" rows="10"></textarea>
拖动红框内区域可随意改变大小
7、表格标签

默认有边框 border="1",可设置宽高和对齐方式

<table>
      <!--tr代表表格中的一行-->
      <tr>
        <td>一行中的 一个单元格</td>
      </tr>
      <tr>
        <td>一行中的 一个单元格</td>
      </tr>
</table>
对齐方式说明

边距:
默认每个单元格的外边距是2px,可通过在table上用cellspacing修改
cellpadding可修改内边距,即文字与单元格的间距



th标签可设置标题单元格,自动加粗居中

合并单元格
<td colspan="2">colspan可指定单元格当作几个单元格看待,就有合并效果
<td rowspan="2">rowspan可指定单元格垂直方向当作几个单元格看待

8、多媒体标签
视频
<!--播放视频
autoplay自动播放
controls:是否显示控制条
poster:用于视频没播放时的占位图,audio不支持
loop:一般用于广告视频,告诉video播放完毕后是否循环播放
preload:预加载视频,如果设置了autoplay,preload就会失效
muted:静音
-->
<video src="播放地址" autoplay="autoplay" controls="controls"></video>

由于各大浏览器支持的格式都不一样,最好使用下面方式,但浏览器必须支持html5才行(以后可以使用一个js的框架html5media让所有浏览器都支持)

<video>
    <!--三种都写上总能找到浏览器能支持的格式-->
    <source src="ddd.webm" type="video/webm"></source>
    <source src="ddd.mp4" type="video/mp4"></source>
    <source src="ddd.ogg" type="video/ogg"></source>
</video>
音频 audio 跟视频类似 支持三种格式
<audio autoplay="autoplay" controls="controls">
    <source src="ddd.wav" type="audio/wav"></source>
    <source src="ddd.mp3" type="audio/mp3"></source>
    <source src="ddd.ogg" type="audio/ogg"></source>
</audio>
marquee跑马灯
<!--跑马灯 各大浏览器都支持
direction滚动方向
scrollamount滚动速度
loop:设置滚动次数
behavior:滚动类型 slide滚到边界停止 alternate滚到边界弹回,来回滚

只要把标签放在这里面它就会滚动
-->
<marquee behavior="slide" direction="right" scrollamount="20" loop="1">
    跑马灯效果
    <img src="" alt="">
</marquee>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容

  • 1.Fieldset标签 表单组合标签,仅仅用于表单的组合。只是语义层面的事情。 可以影响到reset按钮的效果。...
    哈哈super阅读 400评论 0 0
  • HTML基础 本文包括 HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、java...
    廖少少阅读 2,077评论 2 21
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,224评论 1 41
  • 作为一个“个人管理工具”的重度用户,市面上大大小小的个人管理工具我用了不下100款,免费付费都试过,虽然这些工具中...
    左蓝阅读 16,127评论 6 42
  • 这几天晚上都感觉好冷,手冻的不想拿笔,周末在家闲来无事打卡一张,但是貌似给画胖了,哈哈! 希望大家多多...
    冬日丶麋鹿阅读 231评论 2 2