html5 标签在同一行 html下一行标签

转载

梦想启航吧 2023-07-21 16:46:54

文章标签 html5 标签在同一行 h5 下划线默认值 文章分类 HTML5 移动开发

1、段落标签 <p></p> 换行标签 </ br>

这里可以了解一个标签的概念

类似于段落标签这样有头有尾成双成对的叫做主动闭合标签

换行标签这样的独一个就能生活的单身狗标签叫做

看如下代码，我们在段落标签的开始和结束标签之间输入内容，也有换行，但是运行结果都显示在同一行，显然在段落标签里用回车换行是不管用的

在每句末尾加上换行标签 </br>就可以实现换行了，太简单了，就不另写代码，领会其精神

<p>
        秋天到了，树叶红了，一群大雁往南飞，一会儿排成一字形，一会儿排成人字形，那些大雁飞累了就会停下来休息，会有猎人蹲点打猎，大雁之大，一锅炖不下
        北冥有鱼，其名为鲲，鲲之大，一锅炖不下
        在换行
        还换行
    </p>

代码运行结果如下：

秋天到了，树叶红了，一群大雁往南飞，一会儿排成一字形，一会儿排成人字形，那些大雁飞累了就会停下来休息，会有猎人蹲点打猎，大雁之大，一锅炖不下北冥有鱼，其名为鲲，鲲之大，一锅炖不下在换行还换行

2、标题标签 <h1></h1>

顾名思义，该标签一般用于标题，因为写在这个标签里的内容，字体又大又黑又粗，典型的标题字体，有6个型号可以选择，从1到6，字体从大到小

代码示例如下图所示，在这里，讲一下如何在代码里写HTML标签展示在页面上，因为正常写的标签都会被浏览器自动解析，无法展示在页面上

于是，<>就派上用场了，分别代表<>这两个尖括号，可以自己多写几个，代码如下，感受一下

<h1><h1></h1> 标题标签h1</h1>
<h2><h2></h2> 标题标签h2</h2>
<h3><h3></h3> 标题标签h3</h3>
<h4><h4></h4> 标题标签h4</h4>
<h5><h5></h5> 标题标签h5</h5>
<h6><h6></h6> 标题标签h6</h6>

代码运行结果如下所示：

标题标签h1

标题标签h2

标题标签h3

标题标签h4

标题标签h5

<h6></h6> 标题标签h6

3、<div></div>和<span></span>标签

在这里，讲一下块级标签和行内标签

div就是一个块级标签，是HTML中出场率最高的标签，可以说没有之一，特点是没有任何属性，可以通过css进行装饰后成为任意一种标签

块级标签会整满整行，怎么看呢，检查元素，点鼠标箭头，指向该标签，如下图所示，这是一个区别两种标签的一个法子

span标签是行内标签的代表，也是什么属性都不带，也可以通过css进行装饰后成为任意一种标签

这两个标签怎么用呢，看着办吧，领会其精神

<div>div</div>
 <span>span</span>

<div style="background-color: burlywood;height: 40px"></div>
<span style="border: 1px solid red;margin-left:2px;margin-bottom: 2px;display: inline-block">时来天地皆同力</span>

代码运行结果如下：

时来天地皆同力

4、<input>标签
文本框标签，包含多个属性，text password button checkbox radio file submit reset

<form action="/login" method="get" enctype="multipart/form-data">
　　<!-- 文本输入框 text-->
   <input type="text" name="username" value="默认值"/>

   <!-- 密码输入框 password-->
   <input type="password" name="passwd"/>

   <!-- 按钮 点击什么用也没有 需要结合js绑定事件 -->
   <input type="button" value="登录"/>

   <!-- 多选框 checkbox {"name"：[1,2,3]} 默认值checked=checked-->
   <p>不可描述的选择</p>
   <input type="checkbox" name="check" value="1" checked="checked"><span>男的</span>
   <input type="checkbox" name="check" value="2"><span>1米4</span>
   <input type="checkbox" name="check" value="3"><span>36C</span>

   <!-- 单选框 radio name相同 勾选是互斥-->
   <input type="radio" name="sax" value="1" checked="checked"><span>男</span>
   <input type="radio" name="sax" value="2"><span>女</span>

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

   <!-- 提交 提交表单需要用submit -->
   <input type="submit" value="提交"/>

   <!-- reset 还原表单中填写的数据到默认 必须要有form才可以reset -->
   <input type="reset" value="重置"/>
</form>

input 标签里的一些属性一般需要配合其他标签来使用才有用，比如reset，将表单的各项值重置为初始状态

上述代码运行结果如下：

不可描述的选择

男的 1米4 36C 男女

上传文件

5、<form></form>标签

表单标签可以理解为载体，承载着所有要向后端提交的数据，通常与input连用，表单提交数据分为get和post

action属性的值就是该表单数据要提交到的路径

<form action="/login" method="post">
　　<input type="text" name="username"/>
   <input type="password" name="passwd"/>
   <input type="button" value="登录"/>
   <input type="submit" value="提交"/>
   <input type="reset" value="重置">
</form>

运行结果如下：

6、label标签

label标题标签与Input联合运用，增加input的点击范围可直接点击文字就输入 for: 映射到input的id

<label for="username">用户名</label>
<input id="username" type="text" placeholder="placeholder属性"/>

运行结果如下：

用户名

7、textarea标签

多行文本，textarea 默认值在标签之间

<textarea name="more">默认值</textarea>

代码运行结果如下：

默认值

8、select、option标签

select option 下拉框标签默认选择在option上增加selected size 属性显示多少个多选属性：multiple

单选代码：

<select name="city">
　　<option value="1">黑龙江</option>
　　<option value="2" selected="selected">辽宁</option>
　　<option value="3">北京</option>
　　<option value="4">上海</option>
　　<option value="5">深圳</option>
　　<option value="6">广州</option>
　　<option value="7">吉林</option>
</select>

上述代码中，option标签有个属性：selected 该属性值为selected，指定该选项为默认选项

代码运行结果如下：

黑龙江　　辽宁　　北京　　上海　　深圳　　广州　　吉林

多选

<select name="flower" multiple="multiple">
        <option value="1">太阳花</option>
        <option value="2">百合花</option>
        <option value="3">茉莉花</option>
        <option value="4">玫瑰花</option>
        <option value="5">马蹄莲</option>
        <option value="6">卤猪蹄</option>
</select>

按住ctrl键然后选择就可以多选了，代码运行结果如下：

太阳花百合花茉莉花玫瑰花马蹄莲卤猪蹄

超过4个就出滚动条，size的值指定超出指定数量的选项时，出现滚动条

<select name="animal" size="4">
        <option value="1" selected="selected">大虫子</option>
        <option value="2">小虫子</option>
        <option value="3">凤尾蝶</option>
        <option value="4">花粉蝶</option>
        <option value="5">菜一碟</option>
        <option value="6">盐水花生</option>
</select>

代码运行结果如下：

大虫子小虫子凤尾蝶花粉蝶菜一碟盐水花生

下拉的选项还可以分组 optgroup标签，label属性是组的名字，不可选择

代码如下

<select name="vocabulary" size="4" multiple="multiple">
    <optgroup label="骑士精神">
        <option value="1">谦卑</option>
        <option value="2">荣誉</option>
        <option value="3">牺牲</option>
        <option value="4">英勇</option>
        <option value="5">怜悯</option>
        <option value="6">诚实</option>
        <option value="7">公正</option>
        <option value="8">灵魂</option>    
    </optgroup>
         <optgroup label="三民主义">
             <option value="1">民族</option>
             <option value="2">民权</option>
             <option value="3">民生</option>
         </optgroup>
</select>

代码运行结果如下：

谦卑荣誉牺牲英勇怜悯诚实公正灵魂民族民权民生

9、<a></a>标签

超链接标签 href属性为跳转的地址，target属性为以什么方式跳转 "_blank"新tab跳转，a标签还可以做锚点，通过id进行对应关系的映射

a标签默认有下划线，可通过属性 text-decoration:none去掉

<a href="http://www.imdsx.cn" target="_blank" style="text-decoration: underline">带下划线的链接</a>
<a href="http://www.imdsx.cn" target="_blank" style="text-decoration: none">不带带下划线的链接</a>

代码运行结果如下：

带下划线的链接不带带下划线的链接

10、 img标签

img 图片标签 src: 图片位置图片跳转通过a标签 alt: 当图片加载失败时显示alt的文案 title: 鼠标悬浮在图片上显示的文字

<img src="http://ui.imdsx.cn/static/image/dsx.jpg" style="height: 200px;width: 200px;" alt="大师兄，师傅被妖怪抓走了" title="大师兄抱着二师兄">

代码运行结果如下：

如果把图片src写错，再来看一下结果：

可以看到，图片没有显示，显示alt的内容

11、<ul></ul>标签

列表标签

列表 ul li · 形式的列表, 代码如下

<ul>
    <li>第一列</li>
    <li>第二列</li>
</ul>

代码运行结果如下：

第一列
第二列

列表 ol li 数字形式的列表

<ol>
    <li>第一列</li>
    <li>第二列</li>
</ol>

运行结果如下：

第一列
第二列

分层列表 dl dd内层 dt外层

<dl>
    <dt>粽子</dt>
    <dd>甜粽子</dd>
    <dd>咸粽子</dd>
 </dl>
 <dl>
    <dt>西游记</dt>
    <dd>大师兄</dd>
    <dd>二师兄</dd>
</dl>

运行结果如下

粽子甜粽子咸粽子西游记大师兄二师兄

12、table标签

table 表格标签 thead: 表头 th: 表头行 tbody: 内容 td: 列 border: 表格的边框 colspan: td占几列 rowspan: tr占几行

<table border="1">
　　<thead>
　　　　<tr>
　　　　　　<th>ID</th>
　　　　　　<th>name</th>
　　　　　　<th>scroe</th>
　　　　　　<th>其他</th>
　　　　</tr>
　　</thead>
　　<tbody>
　　　　<tr>
　　　　　　<td>1</td>
　　　　　　<td>小明</td>
　　　　　　<td>66</td>
　　　　　　<td>年年岁岁花相似</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>2</td>
　　　　　　<!--colspan等于几就占几列-->
　　　　　　<td colspan="2">占2列</td>
　　　　　　<td>年年岁岁花相似</td>
　　　　　　</tr>
　　　　<tr>
　　　　　　<td>3</td>
　　　　　　<td rowspan="2">唐三藏</td>
　　　　　　<td>年年岁岁花相似</td>
　　　　　　<td>东土大唐</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>4</td>
　　　　　　<td>文殊菩萨</td>
　　　　　　<td >68</td>
　　　　　　<td>青狮</td>
　　　　</tr>
　　</tbody>
</table>

代码运行结果如下：