HTML标签

一、文本标签

1、标题标签:<h1>—<h6>,依次变小。

2、段落标签:<p>,n个段落就用n个<p>标签(left:左对齐内容;right:右对齐内容;justify:对其进行伸展,每段都可以有相等的长度。)

3、加粗标签:<b>/<strong>

4、斜体标签:<i>/<em>

5、下划线标签:<u>/<ins>

6、删除标签:<s>/<del>

7、换行标签:<br>

8、水平分隔符标签:<hr>,属性(size:粗细,取值1-7;width:设置水平线宽度;color;align:设置水平线居中对齐;noshade:设置水平线无阴影。)

9、预格式化标签:<pre>,原样输出,在此标签中手动输入的空格和下划线都有效。

10、上/下标标签:<sup>/<sub>

11、块引用标签:< blockquote>

12、普通文本(行内标签):<span>

13:普通文本(块):<div>


图片发自简书App


图片发自简书App



二、超链接标签

1、a标签(跳转到指定的url地址)

(1)、 _blank:在新窗口打开链接页面。

(2)、 _parent:在上一级窗口中打开链接。

(3)、 _self: 在当前窗口打开链接,此为默认值,可以省略。

(4)、 _top: 在浏览器的整个窗口打开链接,忽略任何框架。


图片发自简书App



2、锚点定位(跳转到当前页面的指定位置)


图片发自简书App



三、图像标签

1、属性:(1)src:指定图片的位置, 可以是url地址, 也可以是本地的图片 。

                (2)alt: 如果图片不能正常加载, 则显示alt里面的文字 ;

                        title:鼠标悬停是现实的文字。


图片发自简书App


图片发自简书App




2、相对路径

3、图像链接 a标签和img标签


                                       


四、序列化标签

1、无序标签(ul li)

横向:display: inline-block;

纵向:display:block


图片发自简书App


图片发自简书App



2、有序标签(ol li)

type改变序列表示方法,字母表示为"A",数字为"1"


图片发自简书App


图片发自简书App



3、自定义/嵌套标签(dl dt dd)


图片发自简书App


图片发自简书App



五、表格标签

1、表格的建立

table : 表格标签; tr : 行; td : 列。

2、设置属性

caption:表格添加标题,每个表格只能有一个;

cellpadding:数据与边框间距;

cellspacing:单元格间距;

rowspan="5" :行占5行;

colspan="6" :列占6列。


图片发自简书App


图片发自简书App



六、表单标签

1、属性

(1)、action:传送到的地址

(2)、method:get、post(默认get)

区别:①get请求地址栏会携带提交的数据,post不会(请求里面)

②get安全级别较低,post较高

③get请求数据大小的限制,post没有文件大小的限制

注:enctype:一般请求下不需要,作为文件上传时设置的属性

2、输入项

大部分的输入项使用<input type="输入项的类型">

text:普通文本框

lable:单击文本,鼠标的光标自动跳到输入框内

password:密码

radio:单选框(name属性值必须相同,默认选项:checked=“checked”)

checkbox:复选框(name属性值必须相同,默认选项:checked=“checked”)

<textarea>:文本域

submit:提交按钮(value,属性要写)

reset:重置/取消

button:普通按钮

file:文件上传(image/video/audio等)

date:时间,日历

number:可手动输入数字,也可选择数字(基数为0)

3、下拉输入项

(1)、select标签

实现默认选项:selected=“selected”

(2)、datalist标签

可进行筛选

4、fieldset标签(分组)

5、iframe标签

在浏览器串口中嵌套多个html文件

frameborder:是否显示浮动框外围的边框,可取值0(不显示)或1


图片发自简书App


图片发自简书App


图片发自简书App


图片发自简书App



七、特殊符号


图片发自简书App



八、注释标签

在浏览器运行时不会显示出来,但是在文本会显示注释的内容

九、新增标签

header :定义页面的头部

nav :定义导航栏,链接的部分 ,可放在header 中

footer :定义页面的底部标签

artical :定义文章 ,用于表示独立于文档的部分(用户评论)

section :定义文章的小区域

aside :定义侧边栏 (广告等)

十、表单嵌套和并列规则

1、嵌套规则(父子)

子元素继承所有父元素的属性

2、并列规则(兄弟)

元素间属性都是独立的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,410评论 1 41
  • 1 HTML标签: 作用所有HTML中标签的一个根节点。 2 head标签: 作用:用于存放:title,meta...
    wrootlflvl阅读 4,723评论 0 3
  • w3school关于标签的解析 http://www.w3school.com.cn/tags/ 一、body 二...
    liboxiang阅读 1,923评论 0 0
  • Html标签与元素的关系:一个标签对构成一个元素 a) :标签对,成对出现, 标志着html文件的开始, 文件...
    打死你的小乌龟阅读 600评论 0 0
  • 前端开发 前端开发也叫做web前端开发,它指的是基于web的互联网产品的页面开发及功能开发。 html HTML是...
    努力爬行中的蜗牛阅读 292评论 0 0