HTML常用标签及其他总结

3 篇文章 0 订阅
1 篇文章 0 订阅

HTML常用标签及其他总结

  • HTML5 基本结构
  • HTML基本语法
  • HTML常用标记
  • 元素类型

HTML5 基本结构

<!doctype html> //命名文档类型
<html> //说明我们写的是标记语言
<head> //文件头部
<meta charset="utf-8"/> //编码格式
<title>html5</title> //文件标题(显示在网页题目上)
</head>
<body>

文件主体(所有要写的内容)

</body>
</html>

HTML基本语法

1.常规标记

  <标记  属性=“属性值”   属性=“属性值”></标记>

2.空标记

  <标记 属性=“属性值”  />

说明:

1.标记,标签,元素都是一个东西。

2.标记和属性用空格隔开,属性和属性值用等号连接,属性值必须放在“”号内。

3.一个标记可以没有属性也可以有多个属性,属性和属性之间不分先后顺序。

4.空标签没有结束标签,用“/”代替。

HTML常用标记

1.文本标题 h1-h6

样式<h1>一级标题</h1>
样式<h2>二级标题</h2>
……

2.文本内容 p 标签

样式<p>文本内容</p>

3.列表

(1)无序列表 (unordered list)

样式:

<ul> 
    <li></li>
     ……
</ul>
(2)有序列表 (ordered list)

样式:

<ol> 
    <li></li>
     ……
</ol>
属性:

(a)type = “数字/小写字母/大写字母/小写罗马/大写罗马”

数字顺序的有序列表(默认值)(1, 2, 3, 4)。

a 字母顺序的有序列表,小写(a, b, c, d)。

A 字母顺序的有序列表,大写(A,B,C,D)

i 罗马数字,小写(i, ii, iii, iv)。

I 罗马数字,大写(i, ii, iii, iv)。

(b)start = “数字”

数字表示有序列表的开始点。
(3)自定义列表

样式:

<dl> 
    <dt>名词</dt>
    <dd>解释</dd>
     ……
</dl>

(4)表格

样式:

<table>
    <colgroup>//列分组
        <col span="2" style="background-color:red">
    </colgroup>
    <thead>//表头
        <caption>标题内容</caption>
    </thead> 
    <tbody>//表体
        <tr>//一行
            <th>列标题</th>
        </tr>
        <tr>//二行
            <td>单元格内容</td>
            <td>单元格内容</td>
        </tr>
    </tbody>
    <tfoot></tfoot>//表尾
</table>
//一个Table中,只能包含一个thead,一个tfoot,但可包含多个tbody。
属性:
1)width=”表格的宽度”
2)height=”表格的高度”
3)border=”表格的边框”
4)bgcolor=”表格的背景色”
5)cellspacing=”单元格与单元格之间的间距”
6)cellpadding=”单元格与内容之间的空隙”
7)align=”left/center/right” (水平对齐方式)
8)valign=”top/bottom/middle/baseline” (垂直对齐方式)
9)colspan=”所要合并的单元格的列数” (合并列,写在td属性中,合并几个去掉几个td)
10)rowspan=”所要合并单元格的行数” (合并行,写在td属性中,合并几个去掉几个不同tr相同位置的td)
11)rules=”groups/rows/cols/all/none” (添加组分隔线)
*rows:位于行之间的线条
*cols:位于列之间的线条
*all:位于行和列之间的线条
*none:没有线条
*groups:位于行组和列组之间的线条

(5)表单

作用:用来收集用户的信息。

样式:

<form name="表单名称" method="post/get"  action="">


    <input type="text" value="默认值"/>//文本框
    <input type="password" />//密码框
    <input type="submit" value="按钮内容" />//提交按钮
    <input type="reset" value="按钮内容" />//重置按钮
    <input type="button" value="按钮内容"/>//按钮


    //单选框/单选按钮
    <input type="radio" name="ral"/>
    <input type="radio" name="ral" />
    //单选按钮里的name属性必须写,同一组单选按钮的name属性值必须一样。


    //复选框
    <input type="checkbox" name="like" />
    <input type="checkbox" name="like" disabled="disabled" />
    //复选按钮里的name属性必须写,同一组复选按钮的name属性值必须一样。
    //*(disabled="disabled" :禁用)
    //*(checked="checked" :默认选中)


    //下拉菜单
    <select   name="">
         <option>菜单内容</option>
         ……
    </select>


    //多行文本框(文本域)
    <textarea name="textareal" cols="字符宽度" rows="行数">
        文本内容
    </textarea>


    //表单字段集
    <fieldset>
    <legend>标题内容</legend>//字段级标题
    //legend元素可以在fieldset对象绘制的方框内插入一个标题。
    //legend元素必须是fieldset内的第一个元素。
    ……
    </fieldset>
    //fieldset元素相当于一个方框,在字段集中可以包含文本和其他元素。
    //fieldset元素用于对表单中的元素进行分组并在文档中区别标出文本。
    //fieldset元素可以嵌套,在其内部可以在设置多个fieldset对象。


    <label for="绑定控件id名"></label>//提示信息标签
    //label元素用来定义标签,为页面上的其他元素指定提示信息。
    //要将label元素绑定到其他的控件上
    //可以将label元素的for属性设置为与该控件的id属性值相同。


    <input type="file" />//文件域


    <input type="image" src="" width="100" height="100" alt="上传图片" />//图片域


</form>

(6)插入图片

样式:

<img   src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />

//title:在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了。
//HTML的绝大多数标签都支持title属性,title属性就是专门做提示信息的。

//alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息。
//它会直接输出在原本加载图片的地方。

(7)超链接a

样式:

<a   href="目标文件路径及全称/连接地址">链接文本/图片</a>

<a href="#"></a>//空链接

属性:target:页面打开方式,默认属性值 _ self。( _ self:当前页面打开; _ blank:新页面打开)

(8)div

样式:

<div id="id名"/class="class名"></div>

作用:主要用来布局。

(9)span

样式:

<span></span> //文本结点,用来放一段字

(10)其他组件

样式:

<b>加粗内容</b> //加粗
<strong>加粗内容</strong> //加粗

<em></em> //倾斜
<i></i> //倾斜

<br /> //换行
<hr /> //水平分割线

<del></del> //删除线标签

&nbsp; //空格(转义字符)

元素类型

1.元素分类

根据css显示分类,XHTML元素被分为三种类型:

· 块状元素
· 内联元素
· 可变元素

块状元素(block element)

(1)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,常用的块状元素包块div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,colgroup,col,table,tr,td,等。
(2)默认情况下,块状元素都会占据一行,通俗地说,两个相邻块状元素不会出现并列显示的现象;默认情况下,块状元素会按顺序自上而下排列。
(3)块状元素都可以定义自己的宽度和高度。
(4)块状元素一般都作为其他元素的容器,它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。

内联元素(inline element)(或是行内元素)

(1)常见的内联元素如:a,span,i,em,strong,b,del,等。
(2)内联元素的表现形式是始终以行内逐个进行显示。
(3)内联元素没有自己的形状,不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定,它的最小内容单元也会呈现矩形形状。
(4)内联元素也会遵循盒模型基本规则,如可以定义padding,border,margin,background等属性,但个别属性不能正确显示。

可变元素

需要根据上下文关系确定该元素是块元素或者内联元素。

2.元素类型转化

(1)盒子模型可通过display属性来改变默认的显示类型,display属性包含了18个属性值,包括block/inline/inline-block/none/list-item/table-header-group/table-footer-group….,display属性用于设置或检索对象元素应该生成的盒模型的类型。
1)Block块状显示:元素会独占一行。当元素设置了float属性后,就相当于给该元素加了display:block;属性。
2)inline内联显示:在元素后面删除换行符,多个元素可以在一行内并列显示。
4)Inline-block行内块元素显示:元素的内容以块状显示,行内的其他元素显示在同一行。(只有这一个元素类型支持vertical-align属性)img,input。
5)none 此元素不会被显示。
6)list-item:将元素转换成列表。li的默认类型。
(2)补充
1)大部分块元素display属性值默认为block,其中li默认值为list-item。
2)大部分内联元素的display属性值默认为inline,其中img,input,默认为inline-block。

3.置换元素

一个内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。
HTML中的img、input、textarea、select、object都是置换元素。这些元素往往没有实际的内容,即是一个空元素。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
智慧校园建设方案旨在通过融合先进技术,如物联网、大数据、人工智能等,实现校园的智能化管理与服务。政策的推动和技术的成熟为智慧校园的发展提供了基础。该方案强调了数据的重要性,提出通过数据的整合、开放和共享,构建产学研资用联动的服务体系,以促进校园的精细化治理。 智慧校园的核心建设任务包括数据标准体系和应用标准体系的建设,以及信息化安全与等级保护的实施。方案提出了一站式服务大厅和移动校园的概念,通过整合校内外资源,实现资源共享平台和产教融合就业平台的建设。此外,校园大脑的构建是实现智慧校园的关键,它涉及到数据心化、数据资产化和数据业务化,以数据驱动业务自动化和智能化。 技术应用方面,方案提出了物联网平台、5G网络、人工智能平台等新技术的融合应用,以打造多场景融合的智慧校园大脑。这包括智慧教室、智慧实验室、智慧图书馆、智慧党建等多领域的智能化应用,旨在提升教学、科研、管理和服务的效率和质量。 在实施层面,智慧校园建设需要统筹规划和分步实施,确保项目的可行性和有效性。方案提出了主题梳理、场景梳理和数据梳理的方法,以及现有技术支持和项目分级的考虑,以指导智慧校园的建设。 最后,智慧校园建设的成功依赖于开放、协同和融合的组织建设。通过战略咨询、分步实施、生态建设和短板补充,可以构建符合学校特色的生态链,实现智慧校园的长远发展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值