html基础：基本标签

一、html简介

html是一个长的字符串，它能够被浏览器解析。html分为三块：html代码,css,js。

html的注释可以用 或者ctrl+?

html页面打开以后，右键-检查--直接点击刷新不会清除缓存。如果想要清楚缓存，在检查页面打开的前提下，在浏览器刷新按钮上右键--清除缓存并硬性重新加载即可

二、标签

标签分为主动闭合标签，和自闭和标签。主动闭合标签都是成对出现的，比如<title></title>;自闭和标签是单个的，比如<meta>

title标签

<!DOCTYPE html><!--声明是一个标准的html-->

<!--标签的属性，lang指定英文-->

<html lang="en"><!--一个页面只有一对html标签，iframe嵌套才会有多个-->

<head>

    <meta charset="UTF-8">

<!--头部当中大部分标签是在网页上看不到的，title标签特殊-->

    <title>自建的网页</title>

<!--再加一个meta，设置，每隔1s刷新一次页面-->

    <meta http-equiv="refresh" content="1">

<!--隔2s后跳转到百度-->

    <meta http-equiv="refresh" content="2; url=http://www.baidu.com">

<!--网页标题前的头像，link标签，同时加上属性rel-->

    <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg">

</head>

<body>

</body>

</html>

2、h标签

h标签主要是对字体的大小设置，有h1~h5五个

<body>

    <h1>最大的字体</h1>

    <h2>二大的字体</h2>

    <h3>三大的字体</h3>

    <h4>四大的字体</h4>

    <h5>最五大的字体</h5>

</body>

效果：

3、p标签

p标签是段落标签，行与行之间有间隔，检查页面可看到行与行之间有黄色间隔。p标签占据一整行，也叫块级标签

 <p>p标签是块级标签，占一整行，且行与行之间有黄色的间隔</p>

 <p>p标签是块级标签，占一整行，且行与行之间有黄色的间隔</p>

效果：

注意：p标签虽然是段落标签，但是p标签内的内手动换行，在浏览器页面是不会换行的，如果想要换行必须用<br>标签。如下：

 <p>p标签是块级标签，占一

        整行，且行与行之间有黄色的间隔</p>

虽然p标签内容有换行，但是浏览器仍旧不显示换行。除非内容占满浏览器放不下

要实现p标签主动换行，同时在浏览器显示，就需要用到下面的<br>

4、br标签

<p>p标签是块级标签，占一<br>整行，且行与行之间有黄色的间隔</p>

效果：

5、span标签

span标签叫行内标签，也叫白板标签，没有任何css样式。span标签只占据内容所占位大小，不会占用正行

<span>span是行内标签，不占据整行，只占据内容部分</span>

效果：

6、div

div是块级标签，占据正行。也是伪白板标签，因为他只有一个默认的css样式 display: block;

<div>div是伪白板标签，占据整行有个默认的样式 display: block;</div>

效果：

7、&nbsp 代表空格

浏览器只识别一个空格，如果想要显示多个空格，就必须用&nbsp

<span>年   轻，年和轻之间有4个空格</span>

但是显示到浏览器上只显示要给空格：

这样的情况想显示几个空格就要加几个&nbsp

<span>年&nbsp&nbsp&nbsp&nbsp轻，年和轻之间有4个空格</span>

x效果：

7、&lt&gt显示标签自身

我们在写html代码时，标签自身一般是不会显示到浏览器中的。但是如果想让标签也显示的话，可以加上&lt&gt显示< 和>。用法如下：

    <span>&lt年&nbsp&nbsp&nbsp&nbsp轻，年和轻之间有4个空格&gt</span>

    <br>

    <span>&ltp年&nbsp&nbsp&nbsp&nbsp轻，年和轻之间有4个空格/p&gt</span>

效果：

8、input输入框标签

input表示一个输入框，input标签有个type属性，用来定义输入框的类型

<!--type表示是个输入框，placeholder默认提示语,name输入框名字,value输入框的默认值-->

    <input type="text" placeholder="请输入用户名" name="username" value="admin">

<!--type为password时，表示是个密码输入框，默认就会隐藏密码-->

    <input placeholder="请输入密码" type="password" name="password">

<!--上传文件-->

    <input type="file" name="file">

<!--button就是一个提交按钮，必须通过js进行提交操作-->

    <input type="button" value="提交">

<!--reset是重置按钮-->

        <input type="reset">

<!--submit和form连用，则点击直接可以提交表单，整个会刷新页面。如果后面输入错了，前面输入的内容也会被清空，用户体验效果不好。一般用button和js-->

        <input type="submit" value="登录">

<!--复选框-->
<input type="checkbox" name="checkbox复选框" checked="checked">

    <!--单选框，checked表示默认选中。当两个input的name属性相同时，才会实现互斥效果-->
<input type="radio" name="单选框" checked="checked">
<input type="radio" name="单选框" >

效果：

9、label标签

label标签扩展了输入框的可点击范围。用label的for属性定位对应的输入框，点击label就直接点击输入框

<label for="i1">用户名</label><input id="i1" type="text" placeholder="输入用户名">

效果：点击label标签“用户名”三个字，光标就会直接定位到后面的输入框

10、textarea

多行文本标签

<textarea>多行文本标签</textarea>

效果：

11、select下拉列表

下拉列表中的项用option标签.，默认选中第一个。如果要指定默认选中的项，可以对option使用selected属性

<select name="'city">

    <option>北京</option>

    <option selected="selected">上海</option>

    <option>深圳</option>

</select>

效果：上海是默认选中项

select的属性size可以制定下拉列表现实的值，但是加上这个属性下拉列表就成全部展开样式了

<select name="'city" size="2">

    <option>北京</option>

    <option selected="selected">上海</option>

    <option>深圳</option>

</select>

效果：因为设置了size=2,只显示2个。可点击小箭头上下查看数据

select的属性multiple属性，可设置多选，自动展开样式

<select name="'city"  multiple="multiple">

    <!--如果设置size=2，还是一次只显示2个-->

    <option>北京</option>

    <option selected="selected">上海</option>

    <option>深圳</option>

</select>

效果：按ctrl，可多选

select下拉列表的项标签，还有一个optgroup标签，他是一个层级标签，可以将option分组到一个optgroup标签下

<select name="'city">

    <optgroup label="华北大区">

        <option>北京</option>

        <option>上海</option>

        <option>深圳</option>

    </optgroup>

        <optgroup label="华中大区">

        <option>河南</option>

        <option>湖南</option>

        <option>湖北</option>

    </optgroup>

</select>

效果：

12、a标签

a标签的href属性，可指定跳转链接

<a href="http://www.baidu.cn">百度一下，你就知道</a>

效果：

a标签还能够实现锚点定位。通过href="#id"即可点击定位到id所指代的标签位置

<a href="#id1">点击定位</a>

<div id="id1">通过a标签的锚点定位，跳转到此处</div>

通过点击‘’点击定位“，可直接调到id=id1的标签所在的位置

13、ul和li:以点开头的分组

<ul>

    <li>1以点开头分组</li>

    <li>2以点开头分组</li>

    <li>3以点开头分组</li>

</ul>

效果：

14、ol和li:以数字开头分组

<ol>

    <li>以数字开头的</li>

    <li>以数字开头的</li>

    <li>以数字开头的</li>

</ol>

效果：

15、dl和dt、dd：dt顶头，dd以tab开头

<dl>

    <dt>dt顶头</dt>

    <dd>dd会以dt为准，tab缩进</dd>

    <dd>dd会以dt为准，tab缩进</dd>

    <dd>dd会以dt为准，tab缩进</dd>

</dl>

效果

16、table标签：表格

table表格标签，thead是表头，th是thread的列，tr表示一行，tbody表体，td是tbody的列

    <!--border表格的线框-->

<table border="2">

    <thead>

    <tr>

         <th>表头字段1</th>

        <th>表头字段1</th>

        <th>表头字段1</th>

        <th>表头字段1</th>

    </tr>

    </thead>

    <tr>

        <td>1</td>

        <td>1</td>

        <td>1</td>

        <td>1</td>

    </tr>

    <tr>

        <td>2</td>

        <td>2</td>

        <td>2</td>

        <td>2</td>

    </tr>

    <tr>

        <td>3</td>

        <td>3</td>

        <td>3</td>

        <td>3</td>

    </tr>

</table>

效果：

rowspan合并行单元格，colspan合并列单元格

    <!--border表格的线框-->

<table border="2">

    <thead>

    <tr>

         <th>表头字段1</th>

        <th>表头字段1</th>

        <th>表头字段1</th>

        <th colspan="2">这个表头占两列</th>

        <!--colspan=2表示占两列-->

    </tr>

    </thead>

    <tr>

        <!--rowspan="2"，表示占两行-->

        <td rowspan="2">1</td>

        <td>1</td>

        <td>1</td>

        <td>1</td>

        <td>1</td>

    </tr>

    <tr>

        <!--<td>2</td>因为上面一行td已经合并了，此处就不再写了-->

        <td>2</td>

        <td>2</td>

        <td>2</td>

        <td>2</td>

    </tr>

    <tr>

        <td>3</td>

        <td>3</td>

        <td>3</td>

        <td>3</td>

    </tr>

效果：

17、img标签

 <img src="http://www.1111.com/32.jpg" title="鼠标悬浮上图片时显示的文字" alt="图片打开失败时展示的文字">

如果图片加载成功，则鼠标放置图片上，就会显示title属性的值

html基础：基本标签的更多相关文章

C#基础---Attribute(标签）和 reflect（反射) 应用二
以前我有写过一篇有关,打标签和反射的应用,主要用于类中字段的验证.下面是连接 C#基础---Attribute(标签) 和 reflect(反射) 应用. 这个项目迭代发现公司项目里面发现老代码对业务 ...
[转] Git 基础 - 打标签
2.6 Git 基础 - 打标签打标签同大多数 VCS 一样,Git 也可以对某一时间点上的版本打上标签.人们在发布某个软件版本(比如 v1.0 等等)的时候,经常这么做.本节我们一起来学习如何列 ...
h5标签基础 meta标签
<meta>标签位于<head>标签里面,具体作用有如下: 1.设置网页编码 eg: <meta charset="utf-8"/> ,//u ...
js基础--浏览器标签页隐藏或显示状态 visibility详解
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...
HTML&CSS基础-html标签的实体
HTML&CSS基础-html标签的实体作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html&g ...
HTML&CSS基础-meta标签
HTML&CSS基础-meta标签作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.常见字符集 1>ASCII 我们知道计算机是由外国人发明的,他们当时也没有考虑到 ...
HTML基础 img标签做一个图库
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
HTML基础-------HTML标签(3)
HTML标签(3) 表格作用:制作一个表格属性: 标签;table>tr>td(或者th) 语义; table:一个表格 tr:一行 td:一个单元格 th:单元格的表头 captio ...
前端基础小标签3 H5新标签
第二部分H5的新标签一.<!-- mark标签 1.用于显示页面中需要重点关注的内容,就像看书需要用荧光笔划重点一样 2.浏览器通常会用黄色显示m ...
html 基础--一般标签
<html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body& ...

随机推荐

2020-07-21：简述redis主从同步的过程。
福哥答案2020-07-21: 1.从服务发送一个sync同步命令给主服务要求全量同步.2.主服务接收到从服务的sync同步命令时,会fork一个子进程后台执行bgsave命令(非阻塞)快照保存,生成 ...
悄咪咪提高团队幸福感 & Surprise！
前言本文的灵感是在几个月以前工作不忙(摸鱼)时想到的,老是自己一个人往前冲冲冲也没啥意思,需要想一点办法,来提高团队的效率,提高团队的幸福感(效率起来了,单位时间内代码写的更多,那不就幸福啦 ),经 ...
轻轻松松学CSS：position
position属性表示元素的定位类型,在CSS布局中,position发挥着非常重要的作用,一些元素的布局就是用position完成的,鉴于此,本文结合一些小实例详细讲解一下. position属性 ...
Java callback回调
package com.callback; public interface CSCallBack { public void process(String status); } package co ...
微信小程序之蓝牙广播信息
期初第一次做蓝牙开锁的时候遇到的最尖锐的问题就是ios设备如何对获取的广播信息进行读取,大概用了4中方式,都无法解决,最后不得不求助官方人员.给了一个方法,大家可以参考.在此附图: 由于mac地址是6 ...
JavaScript学习系列博客_3_JavaScript中的变量、常量、标识符
常量:就是改变不了的,也是可以直接使用的. 变量:可以改变的,不确定的. var =123456; 通过 var 声明一个变量,同时赋值给它标识符:在JS中所有的可以自主命名的内容,都可以认为是一个 ...
ftp 搭建 centos 源
1. yum -y install vsftpd* 2. /etc/init.d/vsftpd restart 3. mount CentOS-7-aarch64-Everything-1810 ...
计算机网络-传输层（1）UDP协议
UDP协议基于Internet IP协议,只提供两个基础功能: 分用/复用分用:主机接收到IP数据报(datagram),每个数据报携带源IP地址.目的IP地址且携带一个传输层的段(Segment) ...
Better Key Sizes (and Attacks) for LWE-Based Encryption
郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! 以下是对本文关键部分的摘抄翻译,详情请参见原文 Abstract 基于“learning with errors”(LWE)问题,分析了理 ...
如何下载gitbub中的单个文件
1.进入Github文件夹,打开对应文件: 2.右键单击Raw,然后目标另存为即可.

html基础：基本标签

html基础：基本标签的更多相关文章

随机推荐

热门专题