一文助你入门HTML(❤ ω ❤)

最新推荐文章于 2024-07-16 10:27:59 发布
最新推荐文章于 2024-07-16 10:27:59 发布
阅读量396 收藏 1
点赞数 1
分类专栏： 前端 文章标签： html web 前端 css 程序人生
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44895666/article/details/108968849
版权

文章目录

HTML一些特点

  • 有两种标签：<br>单标签和双标签<head></head>。
  • html语言对大小写不敏感。但推荐至始至终使用一种方式。
  • 所见即所得类型的网页制作软件有：Front Page和Dream Viewer等。

HTML的基本结构

<!--This is the comment place-->
<!DOCTYPE html>
<html>
    <head>
	    <title>Write You Title Here</title>
    </head>
    <body>
	Here is the line1.
	<br>
	here is the line2.
    </body>
</html>

    我使用的是Sublime Text3。按下！和Tab键后会自动生成简单的摸板。
    可以看到HTML中的标签一般都是成对出现的，内容就在标签之中。还有一个是单标签的，比如换行。
    首先来看一下刚才的文本在浏览器中的显示效果。
在这里插入图片描述
接下来解释一下刚才的HTML代码中各部分的含义：
<!--This is the comment place-->是注释语句。注释的内容就在<!-- -->中。因为Markdown中可以直接使用HTML的语法规则，如果你直接在Markdown中写 ，其实你是看不到的，如图。在这里插入图片描述
所以应该将这部分比变成代码片段才可以显示。

因为Markdown中可以使用HTML的语法，所以当你发现需要在Markdown中段首空两格却没有找到选项时，你可以这样写
在这里插入图片描述
每个&ensp;相当于半个空格，四个就相当于两个空格了。
同样，你可以让你的博客中出现彩色字体来便于区分。如下图展示：

I am red
在这里插入图片描述
还可以玩出很多花样，等HTML学了一些基础内容之后就可以尝试了。

代码的第二行：<!DOCTYPE html>，这表明该文本是一个HTML文本文件，当你写XML文件时，你的声明就可能写成：<!DOCTYPE book SYSTEM "book.dtd">。关于XML的部分可以参考这里：点我传送。

<html>
    <head>
	    <title></title>
    </head>
    <body>
    </body>
</html>

上面可以理解成HTML的基本骨架。上面的标签基本都是自解释的，即我们通过观看其名字来大致推测出其含义。
<head></head>标签对存放的是一个头部信息。
<title></title>标签对存放的是网页的标题。
在这里插入图片描述
<body></body>标签对中存放的就是网页主体中的部分。
<br>单标签用于换行。写这个标签不用另起一行，下面这种写法也是允许的。

<body>
	Here is the line1.<br>
	here is the line2.
</body>

下面这样也是可以的

<body>
	Here is the line1.<br>here is the line2.
</body>

全部写到一行仍然可以

<body>Here is the line1.<br>here is the line2.</body>

但是这样书写会给之后的代码浏览和代码维护等方面带来极大的不便，所以在一开始编写代码时就要有一个良好的书写习惯。

常用标签

标题

标题一般行式为<hn>TitleName</hn>，其中n的取值范围是1-6.并且从1->6，标签逐渐减小。
一般网页默认显示的大小是h3字体的大小。

<!DOCTYPE html>
<html>
    <head>
	    <title>TitleTest</title>
    </head>
    <body>
		<h1>H1</h1>
		<h2>H2</h2>
		<h3>H3</h3>
		<h4>H4</h4>
		<h5>H5</h5>
		<h6>H6</h6>
    </body>
</html>

显示效果如下：
在这里插入图片描述

段落

段落部分使用的标签为<p>Content</p>。不同的段落之间是默认换行的。

<!DOCTYPE html>
<html>
    <head>
	    <title>TitleTest</title>
    </head>
    <body>
		<p>Paragraph1</p>
		<p>Paragraph2</p>
    </body>
</html>

在这里插入图片描述

位置属性

通过设置属性，可以把标签内容的位置进行调整。方法是对align属性进行设置。
例如<h2 align="center">Title</h2>是把标题设置为居中显示。
<p align="center">Paragraph</p>即把段落内容居中显示。
这个属性的设置对今后用到的图片等属性都是适用的。
如果想要居左显示，则设置align="left",如果居右显示则设置align="right"。

<!DOCTYPE html>
<html>
    <head>
    	
	    <title>TitleTest</title>
    </head>
    <body>
    	<h2 align="center">Title</h2>
		<p align="center">我在中间</p>
		<p align="left">我在左边</p>
		<p align="right">我在右边</p>
    </body>
</html>

运行截图如下
在这里插入图片描述
出现这个界面不要慌张，首先可以确定是我们设置的位置是正确的，但是为什么显示的是乱码而不是汉字呢？
这是编码的问题，在前端的一些显示中，编码问题有时候是让人很头疼的，因为默认的编码不支持中文显示，所以为了能让中文正常显示，我们需要在<head></head>属性中添加这样一行：<meta charset="UTF-8">。
这样：

<html>
    <head>
    	<meta charset="UTF-8">
	    <title>TitleTest</title>
    </head>
    <body>
    	<h2 align="center">Title</h2>
		<p align="center">我在中间</p>
		<p align="left">我在左边</p>
		<p align="right">我在右边</p>
    </body>
</html>

再次运行：
在这里插入图片描述
现在就可以正常显示了。

水平线（颜色）

水平线使用的标签为<hr>,这是一个单标签属性。
常见的属性包括
size：设置宽度，单位是像素
width：设置长度，默认为页面长度，单位可以是像素也可以是是百分制
align：对齐方式，与上面使用方式一样
noshade：没有属性值，若设置，表示线段为实心线段,
color：设置颜色，
请看代码示例：

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="UTF-8">
	    <title>TitleTest</title>
    </head>
    <body>
    	<hr size="30"><!--设置大小为30pix-->
    	<hr size="30" color="red"><!---->
    	<hr size="30" width="50%" color="yellow"><!--设置宽度为50%，即页面宽度的一半-->
    	<hr size="30" width="50%" color="green" align="left"><!--设置颜色，并且居左显示-->
    	<hr size="30" width="50%" color="blue" noshade><br><!--这里设置大小、宽度、颜色、实心线-->
    	<hr> <!--这里是默认显示-->
    </body>
</html>

在这里插入图片描述
    其中color也可以通过#RRGGBB显示，R、G、B的大小都为0-F。例如红色可以表示的color="#FF0000"。
    size还有一种写法，例如size="+1"表示size=4,因为默认显示的大小为size=“3”,所以size="+1"就是表示在数字3的基础上再加一号。这种表示方法中最小可以设置为size="-2"，最大为size="+4"。

文字风格

设置字体类型：通过设置face属性的值。
默认的字体类型为宋体。

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="UTF-8">
	    <title>TitleTest</title>
    </head>
    <body>
    	<font face="楷体_GB2312">我是楷体吗？可能是吧</font><br>
    	<font >我是楷体吗？可能是吧</font>
    </body>
</html>

在这里插入图片描述
可以看到这里并没有变成楷体，这是因为需要计算机中安装的字体库中安装该字体才可以使用。如果没有找到，就采用默认的显示。
注：Windows的字体库一般在C:\Windows\Fonts目录下
在这里插入图片描述
你可以在这里对字体进行添加、修改、删除等操作。
关于字体还有以下常用标签。
Content：将文字设置为粗体
Content：给文字加上下划线
Content：将内容设置为斜体
Content：将内容设置为上标
Content：将内容设置为下标
Content：将内同设置为闪烁（现在好像不支持了）。
    这次不用HTML显示了，我们可以在Markdown中看到显示效果。
在这里插入图片描述
标签的属性是可以组合使用的，例如：

<html>
    <head>
    	<meta charset="UTF-8">
	    <title>TitleTest</title>
    </head>
    <body>
    	<hr size="20" width="40%" align="center" color="#FFFF00">
    	<p align="center"><h1 align="center"><sup><font color="red">Wow</font></sup></h1></p>
    	<p align="center"><h1 align="center"><sup><font color="red">I am red!</font></sup></h1></p>
    	<hr size="20" width="40%" align="center" color="00FFFF">
    </body>
</html>

在这里插入图片描述

列表标签

无序标签：<ul>无序内容</ul>
有序内容：<ol>无序内容</ol>
无论有序还是有序，列表中的列表项都是<li>列表项</li>.
代码示例：
在这里插入图片描述

表格设计

需要用到的标签：<table>定义表格</table>
表格标题：<caption>表格标题</caption>
表格行：<tr>表格行</tr>
表格表头：<th>表头</th>
表格表元：<td>元素</td>

示例代码：

<!--This is the comment place-->
<!DOCTYPE html>
<html>
    <head>
    	<meta charset="UTF-8">
	    <title>TitleTest</title>
    </head>
    <body>
    	<table><!-- 定义表 -->
    		<caption>表格标题</caption>
    		<tr><!-- 定义行 -->
    			<th>Table row1</th>
    		    <th>Table rou2</th>
    		</tr>
    		<tr>
    			<td>element1</td>
    			<td>element2</td>
    		</tr>
    	</table>
    </body>
</html>

在这里插入图片描述
    但是这样并不好看，我们可以通过设置表格的属性来美化表格。常用的属性有：
    align:设置对齐方式，课本上说默认是左对齐，但是在使用的Edge浏览器中，默认的对齐方式是居中对齐。所以建议你在代码中写清楚对齐方式，防止因浏览器默认方式不同带来的隐患。
    bgcolor:设置背景颜色
    border:设置边框宽度，默认为0，即没有宽度。
    width:设置表格的宽度
    height:设置表格的高度
代码示例：

<!--This is the comment place-->
<!DOCTYPE html>
<html>
    <head>
    	<meta charset="UTF-8">
	    <title>TitleTest</title>
    </head>
    <body>
    	<table bgcolor="#FF3399" border="2" width="400"><!-- 定义表 -->
    		<caption>表格标题</caption>
    		<tr bgcolor="#FFFF99" align="left"><!-- 定义行 -->
    			<th>Table row1</th>
    		    <th>Table row2</th>
    		</tr>
    		<tr height="100">
    			<td>element1</td>
    			<td bgcolor="#white">element2</td>
    		</tr>
    	</table>
    </body>
</html>

在这里插入图片描述
下面来介绍一些关于表格的高级属性：
bordercolor:设置表格边框的颜色，默认为黑色。
cellpadding：设置边框的宽度。
cellpspacing:设置表元与表格边框之间的宽度。

<!--This is the comment place-->
<!DOCTYPE html>
<html>
    <head>
    	<meta charset="UTF-8">
	    <title>TitleTest</title>
    </head>
    <body>
    	<table bgcolor="#FF3399" border="5" width="400" bordercolor="yellow" 
    	cellpadding="5" cellspacing="20"><!-- 定义表 -->
    		<caption>表格标题</caption>
    		<tr bgcolor="#FFFF99" align="left"><!-- 定义行 -->
    			<th>Table row1</th>
    		    <th>Table row2</th>
    		</tr>
    		<tr height="100">
    			<td>element1</td>
    			<td bgcolor="#white">element2</td>
    		</tr>
    	</table>
    </body>
</html>

在这里插入图片描述
如果想要合并单元格则需要用到rowspan和colspan这两个属性。这两个属性术语<td></td>标签。
<td rowspan="2">纵向合并</td>代表纵向合并两个单元格。横向合并同理，通过设置右边数值的大小来控制合并单元格的个数。

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="UTF-8">
	    <title>TitleTest</title>
    </head>
    <body>
    	<table border="5" width="400">
    		<tr>
    			<td rowspan="2">纵向合并</td>
    			<td >element1</td>
    			<td >element2</td>
    		</tr>
    		<tr>
    			<td>element3</td>
    			<td >element4</td>
    		</tr>
    	</table>
    	<hr>
    	<table border="5" width="400">
    		<tr>
    			<td colspan="2">横向合并</td>
    		</tr>
    		<tr>
    			<td >element5</td>
    			<td >element6</td>
    		</tr>
    		<tr>
    			<td>element7</td>
    			<td >element8</td>
    		</tr>
    	</table>
    </body>
</html>

链接和图片属性

超链接

（超）链接使用到的标签是<a>content</a>.
例如跳转到另一个同一目录下的HTML文件，可以写成<a herf="test.html">跳转到test</a>

a.html

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="UTF-8">
	    <title>TitleTest</title>
    </head>
    <body>
    	<a href="test.html">Jump to test</a>
    </body>
</html>

test.html

<!DOCTYPE html>
<html lang="en">
<head>
	<title>page</title>
</head>
<body>
	<p>This is test page</p>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
也可以跳转到网址：
例如下面代码所示，需要注意的是网址的写法，前面的http(s)://不可以省略。

<!--This is the comment place-->
<!DOCTYPE html>
<html>
    <head>
    	<meta charset="UTF-8">
	    <title>TitleTest</title>
    </head>
    <body>
    	<a href="http://www.kingdeguo.com">Jump to MyWebsite</a>
    </body>
</html>

在这里插入图片描述
在这里插入图片描述

图片

使用到的标签是<img src="imgpath">。

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="UTF-8">
	    <title>TitleTest</title>
    </head>
    <body>
    	<img src="img.jpg">
    </body>
</html>

在这里插入图片描述
但是直接这样写会发现图片太大了不美观。
这就需要用到图片标签的一些属性。
其中height、width、border和align与前文说到的一样。
另外还有一个alt属性，用于对图片载入失败时进行说明。

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="UTF-8">
	    <title>TitleTest</title>
    </head>
    <body>
    	<img src="img.jpg" width="400" height="200"
    	     border="10" bordercolor="yellow" align="top"
    	     alt="Unable load" />
    </body>
</html>

在这里插入图片描述

表单标签

表单基本格式如下：

<form action="submit place">
	<!-- 表单内容-->
</form>

表单中最基本的属性是<input>标签。
其中他的type属性决定了表单元素的类型。

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="UTF-8">
	    <title>TitleTest</title>
    </head>
    <body>
    	<form>
    		输入账号(文本框)：<input type="text"><br>
    		输入密码(密码框)：<input type="passward"><br>
    	    选择性别(单选）：
    	    <input type="radio" name="sex" checked>男
    	    <input type="radio" name="sex">女<br>
    	    选择爱好(复选框):
    	    <input type="checkbox">篮球
    	    <input type="checkbox">乒乓球
    	    <input type="checkbox">游泳
    	    <input type="checkbox">吉他
    	    <br>
    	    提交：<input type="submit">
    	    清空：<input type="reset">
    	    普通按钮：<input type="button">
    	</form>
    </body>
</html>

在这里插入图片描述
高级属性还有<textarea></textarea>,使用rows 和cols指定行数和列数。
和下拉菜单<select><select>,其中使用的是<option></option>标签。如果设置multiple属性，则表示可以多选。

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="UTF-8">
	    <title>TitleTest</title>
    </head>
    <body>
    	<form>
    		输入账号(文本框)：<input type="text"><br>
    		输入密码(密码框)：<input type="passward"><br>
    	    选择性别(单选）：
    	    <input type="radio" name="sex" checked>男
    	    <input type="radio" name="sex">女<br>
    	    选择爱好(复选框):
    	    <input type="checkbox">篮球
    	    <input type="checkbox">乒乓球
    	    <input type="checkbox">游泳
    	    <input type="checkbox">吉他
    	    <br>
    	    自我介绍：<br><textarea rows="6" cols="5"></textarea><br>
    	    选择城市：<br><select size="3" multiple>
    	    	<option>上海</option>
    	    	<option>北京</option>
    	    	<option>郑州</option>
    	    </select>
    	    <br>
    	    提交：<input type="submit">
    	    清空：<input type="reset">
    	    普通按钮：<input type="button">
    	</form>
    </body>
</html>

在这里插入图片描述

框架

框架的作用是将一个网页分为几个部分来显示，便于网站的开发与维护。
框架的写法如下：

<frameset>
	<frame src="left.html" noresize scrolling="no" name="left"></frame>
	<frame src="right.html" noresize scrolling="no" name="right"></frame>
</frameset>

其中：noresize表示不可被用户改变大小。scrolling="no"表示无滚动条。

a.html

<!DOCTYPE html>
<html>
  <frameset rows="20%,80%" border="0">
  	<frame src="top.html" noresize scrolling="no" name="top"></frame>
  	<frameset cols="30%,70%">
  		<frame src="left.html" noresize scrolling="no" name="left"></frame>
  		<frame src="right.html" noresize scrolling="no" name="right"></frame>
  	</frameset>
  </frameset>
</html>

top.html

<!DOCTYPE html>
<head>
	<title>Document</title>
</head>
<body>
	这是上框架。
</body>
</html>

left.html

<!DOCTYPE html>
<head>
	<title>Document</title>
</head>
<body>
	这是左框架。
</body>
</html>

right.html

<!DOCTYPE html>
<head>
	<title>Document</title>
</head>
<body>
	这是右框架。
</body>
</html>

在这里插入图片描述

其他补充

  • <title>标签:除了在浏览器的标题栏中显示标题外，标题还有其他用处，例如：在大多数浏览器中，标题可以用作默认快捷方式或收藏夹的名称；标题还可以作为搜索引擎结果中的页面标题。在页面设计时，应该为每个网页添加标题；标题要与页面内容具有相关性，且要尽可能简洁。
  • <meta>元素：meta元素用千向客户的浏览器传递信息和命令，而不是用来显示内容的。<meta>标签主要分为两大类： 一类对页面进行设置，一类针对搜索引擎进行设置。
  • <big></big>标签中的字比周围大一号。<small></small>比周围小一号。
  • <dl></dl>定义列表：将项目与描述成对出现。
    <dl>
        <dt>title</dt>
        <dd>content1</dd>
    </dl>
    <dl>
        <dt>title</dt>
        <dd>content2</dd>
    </dl>

在这里插入图片描述

  • <div>用来表达一个逻辑区块。
<div style="" class="" align="">
            
</div>

style属性用于设置div元素的行内样式，class属性用于引用CSS的类选择器；

  • <span>标签：实现行内块的定义， <span>标签属千行内元素，用来选择特定文本，以便赋予特殊的样式；当句子或段落中某一个部分需要分组时，就可以使用<span>标签。
  • 锚点连接：一份大型文档（例如科普文章、网络小说等）可能包含多个小节，读者要找到自己感兴趣的内容比较麻烦。此时，在文档的每个小节处设置一个书签，通过文档顶部或侧方导航栏中的链接指向每一小节，用户便可快速定位到所期望的小节；在HTML页面中，该书签又被称作＂铀点(anchor)", 用户单击想要访问的铀点链接时，可以到达期望的目标位置。。
		<a href="#myname">跳转</a>
        
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br>多使用一些换行为为了使效果更加明显<br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        
        <a id="myname">锚点位置</a>

如果是跨页面的连接，则使用如下方式

<a href="/chap01/demo.html#myname"></a>
  • 图片热区连接：是指在同一个图片中不同的部分链接到不同的目标位置，比一般的图片链接更加灵活。通过在图片中设置“热区“，为图片的特定部分创建超链接区域，然后再设置链接的目标位置。
		<map id="mymap">
            <area shape="circle" coords="32,35,31" href="https://www.baidu.com"/>
            <area shape="rect" coords="62,8,103,66" href="https://#"/>
            <area shape="poly" coords="114,73,133,11,107,11" href="#"/>
        </map>
        
        <img src="../../images/11.jpg" usemap="#mymap" border="0"/>
  • 空连接<a href="#"></a>.
  • Email连接:<a href="mailto:XXXX@qq.com"></a>
  • javaSrcipt超链接:<a href="JavaScript:alert('nice to meet you')">点我试试</a>
  • target的几个参数设置：_blank:在新建窗口中打开标签, _self：默认值，在相同的框架中打开, _parent：在夫框架集中打开, _top：在整个窗口中打开, frameName：在制定的框架中打开。
  • 除了表格主体（行与列）外，表格还提供了标题、表头和表尾部分，使得表格的内容更加
    丰富，数据的组织更加清晰。使用< thead >、< tfoot >、< tbody >、<caption>标签可以对表格进行横向分组：< thead >标签定义表头，用千创建表格的头部信息。 < tfoot >标签定义表尾，用千创建表格的脚注部分；< tbody >标签定义表格主体，用于表示表格的主体部分， <caption>标签定义表格标题，显示在整个表格的上方。表格可以包含多个< tbody >标签，用千对表格主体部分的数据进行横向分组；而< thead >和< tfoot >标签在表格中只能出现一次。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kingdeguo</title>
</head>
<body>
    <table>
        <caption>
            企业员工薪水绩效表
        </caption>
        <thead>
            <tr>
                <th>员工编号</th>
                <th>员工岗位</th>
                <th>基本工资</th>
                <th>本月绩效</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>TF0016</td>
                <td>Java高级工程师</td>
                <td>6000</td>
                <td>3000</td>
            </tr>
        </tbody>
        <tbody>
        <tr>
            <td>TF0016</td>
            <td>Java高级工程师</td>
            <td>6000</td>
            <td>3000</td>
        </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>总计</td>
                <td>10W</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

在这里插入图片描述

  • 对于大型数据表格而言，尽量将< tfoot >放在< tbody >之前，这样浏览器在接收主体数据之前，就能渲染表尾，有利于加快表格的显示速度。
  • 如果表格数据过长，无法在屏幕中完整显示，此时可以通过< thead >、< tbody >、< tfoot >标签对表格进行行分组。分组可以使浏览器有能力支持独立表头和表尾的表格正文滚动。当打印一个较长的表格时，表格的表头和表尾会被打印在包含表格数据的每一页中。
  • 表格除了可以按行分组之外，还可以纵向分组（又称列分组）。在HTML中提供了< colgroup >标签，该标签可以将表格按列进行分组，
  • 框架集虽然可以创建一个单独的滚动区域，但由于框架集固有的行列设计布局，限制了框架集布局的灵活性。而内联框架（又称行内框架）可以出现在页面的任何位置，比框架集更加灵活。内联框架是嵌入到页面中的一个区域，通过< iframe >标签引入另外一个页面资源，无需< frameset >标签协助。< iframe >标签的语法格式如下。
  • 如需同时提交多个表单，则须使用JavaScript的异步交互方式来实现。
  • 表单中的onreset 标签用于重置表单数据之前，执行其指定的JavaScript脚本程序
  • get 方式：将数据作为URL 的一部分发送给服务器。URL 由地址部分和数据部分构成，两者之间用问号"?“隔开，数据以“ 名称＝值”的方式成对出现，且数据与数据之间通过”&"符号进行分割。get 方式的请求数据可以被缓存，能够保留在浏览器历史记录中，还能作为书签被收藏。由于get 请求数据会出现在URL 中，因此安全性比较低；而URL 地址栏长度有限，最长不能超过255 个字符，所以get 方式有长度限制。
  • post 方式：将数据隐藏在HTTP 的数据流中进行传输；请求数据不会出现在地址栏
    中，安全性比get 方式要高，并且对数据长度没有限制。
  • 在网页之间传递数据时，有些数据不希望用户在页面中看到，此时可以通过隐藏域来实
    现。在HTML中，通过将标签的type属性设为hidden来创建一个隐藏域，语法格
    式如下。在浏览器中，隐藏域并没有显示出来。但是在网页的＂ 源代码”中可以找到相应代码.
    隐藏数据也可以通过CSS中的display属性或visibility属性来实现。
< input type= "hidden" name = " ... " value = " ... " />
  • <textarea>标签中的wrap属性用千指定文本内容大于文本宽度时的显示方式.默认是off，即当内容增多时会自动增加滚动条。virtual属性是自动换行，但是给服务器发送的数据是只有当用户按下回车键时才会换行。physical是自动换行，并且发送给服务器的内容也是换行的。
  • 用户若输入更丰富的内容时，可以采用富文本框RTE(Rich Text Editor)来实现，当前比较流行的富文本框有ckEditor、UEditor以及kindEditor等。
  • < optgroup >标签，用千对列表项进行分组。该标签的label 属性用于指定每个分组的名称，且分组名不能被选择； disabled 属性用千设置该分组是否被禁用。
        <select>
            <optgroup label="name"></optgroup>
            <option>name1</option>
            <option>name2</option>
            <option>name3</option>
            <optgroup label="age"></optgroup>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>

在这里插入图片描述

  • 大型表单容易在视觉上产生混淆，通过表单的分组可以将表单上的控件在形式上进行
    组合，达到一目了然的效果。常见的分组标签有< fieldset >和<legend>标签。< field set>标签可以看作表单的一个子容器，将所包含的内容以边框环绕方式显示；而<legend>标签则是为< fieldset >边框添加相关的标题。
Kingdeguo
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【Web前端】一文带你吃透HTML(完整篇)
zhangxia_的博客
10-24 2万+
万维网W3C标准中网页分为结构，表现和行为三部分，HTML用于描述页面的结构，CSS用于控制页面中的元素样式，JavaScript用于响应用户的操作。HTML，CSS和JavaScript组成了前端技术栈。
【Web前端】一文带你吃透HTML(上篇)
热门推荐
zhangxia_的博客
10-13 2万+
万维网W3C标准中网页分为结构，表现和行为三部分，HTML用于描述页面的结构，CSS用于控制页面中的元素样式，JavaScript用于响应用户的操作。HTML，CSS和JavaScript组成了前端技术栈。学习HTML就是学习标签的一个过程，难度指数低，重在反复练习！
html语言详细介绍
jcf52的博客
03-16 5509
一.html介绍 HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。 HTML是由WEB的发明 者 Tim Berners-Lee （蒂姆·伯纳斯·李）和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言（SGML）的应用。 用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如 ， 等)。 使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTM
HTML
DallinC的博客
01-05 225
html简介 html HyperText Markup Language：超文本标记语言，网页语言 超文本：超出文本范围，通过html可以轻松实现这样的操作 标记:html所有操作都是通过标记实现的，标记就是标签 &amp;amp;amp;amp;amp;lt;标签名称&amp;amp;amp;amp;amp;gt; 第一个html程序 html的后缀名为.html或者.htm,可以直接通过浏览器运行； 这是我的&amp;amp;amp;amp;amp;lt;font si
网络安全小白入门基础：HTML（非常详细）零基础入门到精通，收藏这一篇就够了
最新发布
Python84310366的博客
07-16 734
（1）图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。（1）标记语言是一套标记标签。比如：标签。
HTML入门
weixin_46380798的博客
03-22 1180
一.HTML简介 1.HTML是什么？ HTML：hyper text markup language超文本**标记（标签）**语言 由各种标签组成，用来制作网页，告诉浏览器该如何显示页面 案例: <html> <body> <title>HTML</title> </body> <body> 大家好 <...
Html入门
qq_28728655的博客
06-04 117
今日内容 1. web概念概述 2. HTML web概念概述 * JavaWeb： * 使用Java语言开发基于互联网的项目 * 软件架构： 1. C/S: Client/Server 客户端/服务器端 * 在用户本地有一个客户端程序，在远程有一个服务器端程序 * 如：QQ，迅雷... * 优点： 1. 用户体验好 * 缺点： 1. 开发、安装，部署，维护 麻烦 2. B/S: Browser/Server 浏览器/服务器端 * 只需要一个浏览器，用户通过不同的网
【SpringBoot】一文带你入门SpringBoot
Hhzzy99的博客
01-10 7401
本文是对SpringBoot的入门介绍，可以让大家对SpringBoot有一个初步的了解。
一文快速入门Docker推荐
09-29
主要介绍了一文快速入门Docker推荐，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一文教你成为TFboys (TensorFlow入门篇)-附件资源
03-05
一文教你成为TFboys (TensorFlow入门篇)-附件资源
递归特征消除 spss_一文带你入门特征工程
06-02
好的，你的问题是关于递归特征消除的。递归特征消除是一种特征选择方法，它通过反复构建模型并选择最优特征来实现特征的自动选择。在这个过程中，模型会重复地训练和删除特征，直到达到指定的特征数量或达到某个停止...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值