html里的cc标签是啥,HTML基础与使用各种标签

骑猪看日落 2022-10-11 00:46 87阅读 0赞

title: "Html"

date: 2019-07-29T15:47:30+08:00

本章内容为：《HTML基础与使用各种标签》

作者：nuoccc

1丶首先我们来了解一下什么是HTML；

HTML全称为:Hyper Text Markup Language,翻译为中文就是超文本标记语言。

超文本:除了可以包含文本，还可以包含图片，声音，视频等等资源

标记:HTML文档的元素是以标签对的形式出现的。

2丶介绍完HTML，我们来看看HTML的整体结构：

HTML文件的后缀名为.html

!doctype>

HTML的语法：标签>

属性:标签>,属性与属性之间可以空格隔开

HTML的标签可以嵌套

根标签，HTML文档起源的地方，lang属性告诉搜索引擎，这个页面是关于"en"英文的页面

标签，还可以包含其他的标签，比如引入外部的css样式，外部的javascrpit代码等等

为自然结束标签，其中属性charset为指定的字符编码 告诉搜索引擎这是该页面的关键字

告诉搜索引擎这是该页面的描速

HTML基础及标签使用HTML页面的标题主体，指整个HTML文档

3丶常用标签使用方式

1)块级标(block element)：独占一行，可以设置宽高

测试

，看一下输出图:

![5d8b92b12482?utm\_campaign=maleskine&utm\_content=note&utm\_medium=seo\_notes&utm\_source=recommendation][5d8b92b12482_utm_campaign_maleskine_utm_content_note_utm_medium_seo_notes_utm_source_recommendation]

html1.png

例如：  测试居中 ,看一下输出图

html2.png

h1~h6：标题标签 例如：

# 一号标签 #

## 二号标签 ##

### 三号标签 ###

#### 四号标签 ####

##### 五号标签 #####

###### 六号标签 ######

,看一下输出图:

html3.png

1. \-
2. : 有序列表 ，ol：ordered lists有序列表，li：list item列表项，有序列表可以包含多个li，例如:,看下输出图
 
 ![5d8b92b12482?utm\_campaign=maleskine&utm\_content=note&utm\_medium=seo\_notes&utm\_source=recommendation][5d8b92b12482_utm_campaign_maleskine_utm_content_note_utm_medium_seo_notes_utm_source_recommendation]
 
 html4.png
 
 * \-
 * :无序列表， ul：unordered lists，li：list item列表项，无序列表可以包含多个li，例如：
 * 一号列表
 * 二号列表,看下输出图：
 
 ![5d8b92b12482?utm\_campaign=maleskine&utm\_content=note&utm\_medium=seo\_notes&utm\_source=recommendation][5d8b92b12482_utm_campaign_maleskine_utm_content_note_utm_medium_seo_notes_utm_source_recommendation]
 
 html5.png
 
 :格式化文本，通常用于包含代码--:设置分组，表示分组的名称
 
 <table> 
 <tbody> 
 <tr> 
 <td> :表格标签 </td> 
 </tr> 
 <tr> 
 <td>:table data cell，表格的单元格 ，border属性：表格的边框的像素值 cellspacing：单元格的间距 cellpadding：单元格的内边距， 例如： 
 <table> 
 <tbody> 
 <tr> 
 <td>1</td> 
 <td>2</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td>4</td> 
 <td>5</td> 
 <td>6</td> 
 </tr> 
 </tbody> 
 </table>看下输出图:<img src="https://www.jianshu.com/p/5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation" alt="5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">html6.pnghr:水平分割线2)行级标签(inline element)：所有元素排在一行，不能设置宽高，高度随着内容的大小变化。:行级实现特殊功能标签:设置字体 例如：这是字体这是字体 看下输出打印:<img src="https://www.jianshu.com/p/5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation" alt="5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">html7.png加删除线 例如：删除 看下输出打印：<img src="https://www.jianshu.com/p/5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation" alt="5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">html8.png超链接标签(锚点标签)，放在该标签内的内容可以是文本，也可以是图片等，例如：<a rel="nofollow">点击跳转百度</a> 看下打印输出:<img src="https://www.jianshu.com/p/5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation" alt="5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">html9.pngbr：换行粗体大字体强调粗体强调斜体sub：下标sup：上标 这些全部放一起来看看效果：<img src="https://www.jianshu.com/p/5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation" alt="5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">html10.png3)行级块级标签(inline-block element):所有元素排在一行，但是可以设置宽高：图片标签，属性：src--要显示的图片的位置，alt--如果图片不能正常显示，给出的提示信息,width---图片宽度，height--图片高度，例如：img src="img/chuangwei.jpg" alt="失败",width="200",height="200"&gt; 看下输出打印:<img src="https://www.jianshu.com/p/5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation" alt="5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">html11.png4)转义字符&amp;+nbsp; 空格&amp;+lt; less than,小于 &lt;&amp;+gt; great than,大于 &gt;&amp;+amp; 与符号,"&amp;"&amp;+quot; 引号,"&amp;+reg; 已注册&amp;+copy; 版权&amp;+trade; 商标我们直接来看下打印输出:<img src="https://www.jianshu.com/p/5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation" alt="5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">html12.png5)表单 ：表单，是块级标签action:指明处理该表单数据的后台服务器组件的地址method:请求的方式，分为get方式和post方式get:会将表单中填写的内容附加在请求的URL地址后面传递给服务器，只能传少量的数据post:会将表单中的内容添加在Form-data中传递给服务器，安全性高，可以传送大量数据，理论上传送的数据无大小限制enctype:设置表单的类型application/x-www-form-urlencoded：普通表单，默认值multipart/form-data:包含文件上传的复合表单type:text单行文本输入框,name为它的名称例如：姓名：看下输出打印：<img src="https://www.jianshu.com/p/5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation" alt="5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">html13.pngtype:password,密码输入框例如：密码：看下输出打印：<img src="https://www.jianshu.com/p/5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation" alt="5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">html14.pngtype:radio:单选按钮，value:表单元素的值，checked:为默认选中该按钮例如：男女看下输出打印：<img src="https://www.jianshu.com/p/5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation" alt="5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">html15.pngtype:checkbox:单选按钮，value:表单元素的值例如：音乐运动旅游看下输出打印：<img src="https://www.jianshu.com/p/5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation" alt="5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">html16.png下拉组合框，表示每一个选择项，value表示选项的值例如：成都重庆北京看下输出打印：<img src="https://www.jianshu.com/p/5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation" alt="5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">html17.pngtextarea多行文本，cols:包含多少列，rows:包含多少例如：看下输出打印：<img src="https://www.jianshu.com/p/5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation" alt="5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">html18.png type:hidden:隐藏域，不会显示在页面上，但其数据会提交给服务器例如：type=submit,提交按钮，value指明该提交按钮上显示的文字，该提交按钮会将用户填写的数据提交到服务器后台，即action属性指明的地址例如: type:reset例如:看下两个按键的输出打印：<img src="https://www.jianshu.com/p/5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation" alt="5d8b92b12482?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">html19.png HTML基础就这些了,其实以上大部分属性和标签已经用不到了，已经被css取代，但是也可以了解一下。</td> 
 </tr> 
 </tbody> 
 </table>

[5d8b92b12482_utm_campaign_maleskine_utm_content_note_utm_medium_seo_notes_utm_source_recommendation]: /images/20221005/1b2c1cca52fa4674a974c1ca51822997.png