[8-01]html常用标签-CSDN博客

本文链接：https://blog.csdn.net/a102615350/article/details/48504843

一、常用标签介绍

1，font标签的使用

2，a标签的使用

<!--

a标签的使用

a:当前连接资源的标签使用：

当把a标签连接其他资源时，a标签上必须写href属性。

href属性中写的是具体连接的资源

target属性：指定连接的新资源在什么位置打开。

_blank 是表示在一个新的页面中打开

_parent 在父页面中打开

_self 在当前自己所在的页面中打开

_top 在顶部打开

target中写的值，也可以是用户自己定义的

在把a标签当做超连接的使用：

href书写时注意的事项：

1、如果连接的是互联网中的资源，这时需要书写http://

2、如果不写任何协议，这时默认使用的file协议

3、在书写a标签的时候，指定的不同的协议，这时浏览器会识别这些协议完成不同的事情

页面定位：

设置锚点 <a name="名称"></a>

设置点击跳跃<a href="#锚点名称">位置</a>

-->

<a href="thunder://sdjklfjsdkljflksd234823874jfdflskdjfklsjdf.avi" target="_blank">速度与激情8</a>

<a href="javascript:void(0);" onclick="alert('你还真点击啊！！！');">您敢点击我吗？</a>

3，表单标签

<!--

注册页面：

演示form表单：

<input type="text" /> 文本输入框，用户可以输入文本数据

<input type="password"/> 密码框，主要是输入不可见的文本数据

<input type="radio"/> 单选按钮，主要让用户选择数据

<input type="checkbox" /> 多选按钮，主要让用户选择数据

<input type="file"/> 上传文件的组件

<input type="button" value="按钮"/> 显示一个按钮，但点击没有任何效果，按钮上的文件需要使用value属性书写

<input type="hidden"/>页面上的隐藏域。这个数据在页面上会存在，但是不会显示

<input type="image"/> 它是在页面上嵌入一个图片，使用这个图片可以完成页面数据的提交

<input type="reset"/>重置页面上的所有输入项，回复默认状态

<input type="submit"/> 把当前form标签中的所有输入项中的数据提交给服务器

<select> 它主要是在页面上提供下拉框其中每个提供的选项需要使用option标签完成

<textarea rows="4" cols="30"></textarea> 在页面上提供多行多列的区域，供用户输入数据

-->

用户名：<input type="text" /><br/>

密码：<input type="password"/><br/>

性别：<input type="radio"/>男

爱好：<input type="checkbox" />Java

<input type="checkbox" />C#

选择国籍：

<option>--请选择国籍--</option>

</select><br/>

选择大头贴：<input type="file"/><br/>

个人描述：

</form>

</body>

<!--

form标签上的action和method属性：

action：通过这个action属性，指定要把当前form标签中的所有输入的数据提交给那个服务器。

action属性中书写的具体的服务器的地址（URL）

URL:统一资源定位符。 http://sh.itcast.cn:80/index.html 它代表的是一个具体的网络位置

method:表示当前浏览器以什么方式把form表单中的数据提交给服务器

method以前有8种格式，现在只有2种。分别 get 和 post

一般使用form表单给服务器提交数据，统一都会使用post提交。

==============================================

如果需要把form标签中的所有数据提交给服务器，要求form标签中的每个数据对应的标签上必须有一个name属性。

只有加了name属性之后，服务器才会接受到当前标签中输入的数据，并且数据的格式是：

name属性的属性值 = 输入的数据

注意：当form标签中的子标签中的数据，如果是让用户输入的，这时可以在标签上不用书写value属性。

如果是让用户选择的，这时必须书写value属性，这个value属性的值，就是提交给服务器的数据

对于select标签，name属性需要写在select标签中，而value属性需要写在option标签

-->

用户名：<input type="text" name="username"/><br/>

密码：<input type="password" name="password"/><br/>

性别：<input type="radio" name="sex" value="男"/>男

爱好：<input type="checkbox" name="hobby" value="Java"/>Java

<input type="checkbox" name="hobby" value="c#"/>C#

选择国籍：

<option value="none">--请选择国籍--</option>

</select><br/>

选择大头贴：<input type="file"/><br/>

个人描述：

</form>

</body>

</html>

4，其他标签

<!--

div、span标签它们仅仅是用来封装数据，而对数据不做任何的样式效果的设置。

p它html中的段落标签，被p标签封装的数据，会有段前和段后的间隔。

出现div和span标签的目的是主要让html标签从负责数据的封装和样式进行分离。

早期的html标签，它既可以封装数据，同时通过标签的属性可以对封装的数据进行样式效果的设置。

后期网页设计中，我们主要使用div和span，以及html中的其他标签完成页面上要显示的数据的封装，

而不再使用html标签的属性来控制页面上数据的样式，把样式交给了新的技术CSS。

html主要负责数据的封装，CSS技术负责页面的数据显示的样式。

div和span以及p标签将来在页面上重点不是封装数据，而是对页面进行划分和布局

-->

<div>div中的数据1</div>

<div>div中的数据2</div>

<div>div中的数据3</div>

<span>span中的数据1</span>

<span>span中的数据2</span>

<span>span中的数据3</span>

<p>段落中的数据1</p>

<p>段落中的数据2</p>

<p>段落中的数据3</p>