HTML标签学习记录
  TEZNKK3IfmPf 2023年11月12日 18 0

网页WEB标准,主要包含三大块:

1、结构(HTML)主流的版本是HTML5

2、表现(CSS)主流的版本是CSS3

3、行为(JavaScript)目前最新版本是EMCAScript 2022


首先我们来看看这张图片:


HTML标签学习记录


首先:

<!DOCTYPE html> 表示使用HTML5

<meta charset="utf-8" />  编码方式


学习常用标签

HTML标签有很多,这里我们学习最为常用的,后面有些较少用的,我们可以查下手册就可以了。


1、标题标签

<h1>、<h2>、<h3>、<h4>、<h5>和<h6>

标题标签语义:  作为标题使用,并且依据重要性递减


2、段落标签

<p> 内容 </p>

是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。


3、水平线标签

<hr>


4、换行标签

<br>


5、布局标签

<div> 这是头部 </div>    <span>今日价格</span>


6、标签属性

基本语法格式如下:

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

在上面的语法中,

1.标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。

2.属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。

3.任何标签的属性都有默认值,省略该属性则取默认值。

采取 键值对 的格式 key="value" 的格式

比如:

<hr width="400" />

属性 是 宽度

值 是 400


7、图像标签

<img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名,它是img标签的必需属性


8、链接标签

基本语法格式如下:

<a href="https://www.ctyun.cn/portal/link.html?target=%E8%B7%B3%E8%BD%AC%E7%9B%AE%E6%A0%87" target="目标窗口的弹出方式">文本或图像</a>


9、锚点定位

1.使用“a href=”#id名>“链接文本"创建链接文本(被点击的)

 <a href="https://www.ctyun.cn/portal/link.html?target=%23two">  

2.使用相应的id名标注跳转目标的位置。

 <h3 id="two">第2集</h3>


10、无序列表

其基本语法格式如下:

<ul>

 <li>列表项1</li>

 <li>列表项2</li>

 <li>列表项3</li>

 ......

</ul>

注意:

1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。

2. <li>与</li>之间相当于一个容器,可以容纳所有元素。

3. 无序列表会带有自己样式属性,放下那个样式,一会让CSS来! 


11、表格标签

创建表格的基本语法格式如下:

<table>

 <tr>

   <td>单元格内的文字</td>

   ...

 </tr>

 ...

</table>

在上面的语法中包含三对HTML标签,分别为 table</table、tr</tr、td</td,他们是创建表格的基本标签,缺一不可,下面对他们进行具体地解释

1.table用于定义一个表格。

2.tr 用于定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格。

3.td /td:用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,一对 <tr> </tr>中包含几对<td></td>,就表示该行中有多少列(或多少个单元格)。


12、表单标签(常用)

注意:这里是表单,不是表格。

在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下:

<form action="url地址" method="提交方式" name="表单名称">

 各种表单控件

</form>

常用属性:

Action在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。

method用于设置表单数据的提交方式,其取值为get或post。

name用于指定表单的名称,以区分同一个页面中的多个表单。

注意: 每个表单都应该有自己表单域。


在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。


表单控件:

包含了具体的表单功能项,如单行文本输入框、输入框、复选框、提交按钮、重置按钮等。

提示信息:

一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。

表单域:

它相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。

input /标签为单标签,type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。


HTML标签学习记录


textarea控件(文本域)

如果需要输入大量的信息,就需要用到textarea/textarea标签。通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式如下:

<textarea cols="每行中的字符数" rows="显示的行数">

 文本内容

</textarea>

下拉菜单

使用select控件定义下拉菜单的基本语法格式如下

<select>

 <option>选项1</option>

 <option>选项2</option>

 <option>选项3</option>

 ...

</select>

注意:

1、select</select中至少应包含一对option></option。

2、在option 中定义selected =" selected "时,当前项即为默认选中项。


13、查文档

1、https://www.w3school.com.cn/

2、https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics



如有问题,可留言交流。



【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

上一篇: 已经是第一篇 下一篇: 已经是最后一篇
  1. 分享:
最后一次编辑于 2023年11月12日 0

暂无评论