HTML基础,html基础代码

http://www.itjxue.com  2023-01-16 05:44  来源:未知  点击次数: 

HTML基础有哪些单标签

1、在HTML基础中,单标签就是由一个标签组成的。例如br、hr、img、input、param、meta、link。

2、而双标签则是由“开始标签”和“结束标签”两部分构成(这两部分是相同的)。例如html、head、title、body、table、tr、td、span、p、form、h1、h2、h3、h4、h5、h6、object、style、b、u、strong、i、div、a、script、center(双标签的一部分)。

据了解,HTML标签是HTML语言中最基本的单位,同时HTML标签还是HTML(标准通用标记语言下的一个应用)最重要的组成部分。

扩展资料

HTML基础标签基于特性的分类

在HTML基础中,标签又被称为元素,根据标签特性可以分为块标签、行内(内联)标签和行内块标签。

1、块标签:默认情况下独占一行,宽度为父级的100%;支持设置宽高;支持上下左右的margin、padding值。

2、行内标签:与其他元素并列在一行;不支持设置宽高,宽度随内容撑开;支持左右方向的margin、padding。

3、行内块标签:与其他元素并列在一行;支持设置宽高;支持上下左右的margin、padding值。

参考资料:百度百科-html标签

HTML基础-常用标签及语法

HTML注释语法,VS code 快捷键【Ctrl + /】:

标题(Heading) ,是通过 h1-h6 六个标签分别来对六个级别的标题进行定义的。标题标签只是给标签内部的元素内容添加对应级别标题的语义,样式由CSS设定,标签之间不能相互嵌套,权重从 h1 向 h6 依次递减。

注意: h1 在整个HTML中的权重非常高,内部应该放置HTML中最重要的内容,比如logo。 h1 由于非常重要,内部的文字对于提高搜索引擎排名也非常重要,为了防止作弊,如果 一个页面出现多个 h1 ,反而降低权重。

约定俗成的,一个页面中只会出现一个 h1 。

段落(paragraph) ,是通过 p 标签进行定义的。 p 标签是双标签,且为文本级标签。内部只能放置文本、图片、表单元素,或者废弃的 font 标签等。 p 标签的作用是给标签内部的内容添加一个完整段落的语义,不负责内容自动换行的样式。 换行的效果是由css决定的。

(breaking)标签 是HTML中一个简单的换行符。 br / 标签是一个单标签。 在需要换行的位置可以使用 br / 标签书写,但是 br / 与 p 不同, br / 没有建立新的 段落的语义,只是简单的进行强制换行。

HTML中有部分标签是用来对文字进行格式化显示设置的,比如粗体和斜体等。文本格式化的标签均为双标签,且为文本级标签,内部只能书写文字。在HTML4.0版本规范后,结构和样式进行了分离,大部分文本格式化标签被废弃, b i u em shrong 相对比较常用。

图像(image) 由 img 标签进行定义。 img 标签是单标签,本身相当于一个特殊的文本,作用是在指定的位置插入一张图片。在HTML文件,常用的插入图片的类型有:jpg、png、gif。由于 img 为单标签,所以它只能通过属性进行相关的图像设置。

路径指的是寻找文件时所历经的线路,在HTML中有特殊的书写语法。 路径分为相对路径和绝对路径,不同的方式出发点和参考位置不同。

相对路径查找文件时,需要从HTML文件本身出发,根据相对的位置进行查找,包含三种方向。

绝对路径查找文件时,不需要从HTML文件出发,而是直接从电脑的盘符出发进行查找,或者 使用网址形式查找。

音频与视频分别使用 audio 和 video 标签进行定义。 audio 和 video 是双标签。同图片一样,需要使用src属性设置音频查找的路径。音频文件支持的格式包括:.mp3、.ogg、.wav。 视频文件支持的格式包括:.mp4、.ogg、.webm。

音频与视频加载后不会自动显示播放器的控制条,需要使用controls属性进行设置,属性值也是 controls。

a 标签(anchor 锚)在指定的位置添加超级链接,提供用户进行点击和跳转。有两种跳转形式:跨页面跳转、页面内跳转。实现跳转的方式需要用到一些标签属性。

页面内锚点跳转

①在目标位置找到任意一个标签,给它添加 id 属性, id 的属性值必须是唯一且必须以字母开头,后面可以有字母、数字、下划线和横线,区分大小写。

②在目标位置添加一个空的 a 标签,只设置一个 name 属性, name 属性值设置 方式与 id 相同,也必须是唯一的。

跨页面锚点跳转

列表用于制作HTML中的一系列项目。通常我们会将内容相关、结构相似、样式相近的内容使用列表结构进行搭建。根据项目的内容不同,可以有三种语义的列表结构: 无序列表、有序列表、定义列表 。

注意事项:

自定义列表不仅仅是一列项目,而是项目及其注释的组合。 由三个标签组成完整的结构,包含 dl 、 dt 和 dd 。 dl : definition list ,表示定义一个自定义列表的大结构。 dt : definition term ,表示定义自定义列表中的一个主题或者术语。 dd : definition description ,定义解释项,表示描述或解释前面的定义主题。 dl 内部只能嵌套 dt 和 dd , dt 与 dd 是同级关系。

注意事项:

常用的布局标签有 div 和 span ,俗称盒子,都没有具体明确的语义。

div: 全称division,分割、区域、跨度的意思。俗称大盒子。 div 是双标签,是最经典的容器级标签,内部可以放置任意内容。多用于划分网页区域,进行结构布局。一般将相关的内容使用 div 包裹起来,整体设置大的布局效果。

span: 小区域、小跨度的意思。俗称小盒子。 span 也是双标签,容器级标签。 在不改变整体效果的情况下,可以辅助进行局部调整。

创建一个简单的表格至少有三个标签组成,分别是 table 、 tr 、 td 标签,此外如果要制作表头,则使用 th 标签。

表格的单元格可以进行合并,通过 th 和 td 的两个属性可以进行合并设置。 rowspan :跨行和并(上下的合并)。 colspan :跨列合并(左右的合并)。属性值是数字,表示跨几行或跨几列合并。

制作技巧: (1) 先列出所有行 tr ,以最小单元格为标准。 (2) 再添加每一行的 td 或 th 单元格。 (3) 划分单元格所在行时,顶边对齐的属于同一行。 (4) 将所有行和列写完后,再查看哪个单元格有跨行或跨列,属性值的个数要参考最小 的单元格。

table 内部最直接的子级包含四个分区标签,他们都是双标签。

四个分区可以选择性的进行组合。 注意: 不论书写顺序如何颠倒,浏览器中的加载顺序都是自动按照 caption 、 thead 、 tbody 、 tfoot 执行的。制作的时候可以先书写大分区标签结构,接着填充每个分区的内部内容,如果有合并单元格内容,则进行单元格合并。

HTML表单用于搜集不同类型的用户输入,表单元素就是网页中提供用户进行输入或点击 的小控件。在HTML中,一个完整的表单通常由表单域、提示信息和表单控件(也称为表单元素)3个 部分构成。

HTML表单域使用 form 标签进行定义。 form 标签是一个功能性标签,填写的表单信息要想正确的提交到后台服务器,必须放在一个 form 标签之内。 form 标签为双标签,容器级标签。 form 标签通过对应属性规定提交数据的方法和提交位置。

input 标签是最重要的一个表单元素,为单标签,本身相当于一个特殊的文本,需要通过标签属性实现各种功能。其中ra, type 属性的值不同,决定了 input 标签的形态不同。

单选框和复选框都可以提前设置默认选中项。 input 标签有一个 checked 属性,如果不设置表示默认没有选中。 属性值如果设置为 "checked" ,表示该项默认被选中。

textarea 标签定义文本域,制作可以输入多行文本的区域,为双标签,本身相当于一个特殊的文字。 文本域可以设置默认输入的文字,在双标签之间书写默认文字。

textarea 有两个标签属性,可以设置显示区域大小。 rows :行,属性值是数字,表示文本框显示的最大行数,如果超过了行数, 会被隐藏并且出现滚动条。 cols :列,属性值是数字,表示在出现滚动条之后,每一行显示的最大字节数(一个汉字按2字节计算)。

HTML中的下拉菜单提前设置一些选项,然后可以通过点击选择其中一项。

下拉菜单需要至少两个标签完成结构: select :选择,表示定义下拉菜单整体结构。 option :选项,表示定义下拉菜单的每一项。 两个标签都是双标签,文本级标签。 关系: selectoption , option 可以有任意多项。

默认情况下,选中的是第一项。 下拉菜单可以通过给 option 标签设置 selected 属性,属性值为 selected ,更改默认选中项。

下拉菜单中如果选项变得复杂,可以将 option 进行分组管理。 可以使用 optgroup 标签对选项进行分组, optgroup 是一个双标签。 关系: selectoptgroupoption , optgroup 可以设置一个 label 属性,表示给这一组选项添加一个分组标签名,分组标签 optgroup 是不能被点击选择的。

所有的表单元素都可以通过绑定其他内容去扩大触发点击范围,这时需要使用一个 label 标签。该标签的作用是帮表单元素定义标注(标记)。 如果将表单控件与提示内容使用 label 进行绑定后,当用户鼠标点击 label 内的提示内容时,浏览器就会自动将焦点转到和标签相关的表单控件上。有两种绑定方法:

在普通文字书写时,有一些特殊符号不能直接书写(例如 连续的空格),或者符号具有特殊功能也不能直接书写(例如符号)。可以使用一些HTML提前预留好的替换字符进行书写,这些替换字符叫做字符实体。

通过查询w3school手册 HTML ISO-885901 ,查看所有的字符实体以及特殊字符的替换写法,包含实体名称以及实体编号。

规则: 所有的字符实体和实体编号都是以 开头,以 ; 结尾的。

注意: 实体名称对大小写敏感!

建议1 :使用实体名称,好处是名称易于记忆。不过坏处是,浏览器也许并不支持所有实 体名称(对实体数字的支持却很好)。

建议2 :不需要强制记忆所有的字符实体,只需要记忆常用的几个字符实体名称即可,其 他可以通过手册进行查询。

HTML基础知识(18)

1、call和apply

二者都可以改变当前的this,区别在于apply方法要将参数放入数组中再传参

2、函数的继承

function Fclass(name, age){

this.name = name;

this.age = age;

}

Fclass.prototype.showName = function(){

alert(this.name);

}

Fclass.prototype.showAge = function(){

alert(this.age);

}

3、子类

function Sclass(name, age, job){

// 调用父类的call方法并传入子类的this,可实现属性的继承

Fclass.call(this,name,age);

this.job = job;

}

// 方法继承:将父类的一个实例赋值给子类的继承

Sclass.prototype = new Fclass();

Sclass.prototype.showJob = function(){

alert(this.job);

}

var Driver = new Sclass('tom',18,'老司机');

Driver.showName();

Driver.showAge();

Driver.showJob();

4、新增选择器

document.querySlector()? ? 选择一个

document.querySlectorAll()?? 选择一类

jQuery加载:

将获取元素的语句写到页面头部,会因为元素还没有加载而出错,jquery有ready方法解决

//JS写法

window.onload = function(){

var div = document.getElementById('div');

alert(div.innerHTML);

}

//JQ写法

$(document).ready(function() {

var $div = $('#div');

alert('jquery:' + $div.html());

})

//简写

$(function(){

var $div = $('#div');

alert('jquery:' + $div.html());

})

5、jQuery选择器:

$(document) //选择整个文档对象

$('li') //选择所有的li元素

$('#myId') //选择id为myId的网页元素

$('.myClass') // 选择class为myClass的元素

$('input[name=first]') // 选择name属性等于first的input元素

$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素

对选择集进行修饰过滤(类似CSS伪类)

$('#ul1 li:first') //选择id为ul1元素下的第一个li

$('#ul1 li:odd') //选择id为ul1元素下的li的奇数行

$('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li

$('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li

$('#myForm :input') // 选择表单中的input元素

$('div:visible') //选择可见的div元素

对选择集进行函数过滤

$('div').has('p'); // 选择包含p元素的div元素

$('div').not('.myClass'); //选择class不等于myClass的div元素

$('div').filter('.myClass'); //选择class等于myClass的div元素

$('div').first(); //选择第1个div元素

$('div').eq(5); //选择第6个div元素

6、选择集转移

$('div').prev('p'); //选择div元素前面的第一个p元素

$('div').prevAll('p'); //选择div元素前面所有的p元素

$('div').next('p'); //选择div元素后面的第一个p元素

$('div').nextAll('p'); //选择div元素后面所有的p元素

$('div').closest('form'); //选择离div最近的那个form父元素

$('div').parent(); //选择div的父元素

$('div').children(); //选择div的所有子元素

$('div').siblings(); //选择div的同级元素

$('div').find('.myClass'); //选择div内的class等于myClass的元素

jQuery样式操作:

//读取样式

alert($('.div1').css('fontSize'));

//设置样式

$('.div1').css({background:'gold'});

//增加行间样式

$('.div1').addClass('big');

//减少行间样式,多个样式用空格分开

$('.div1').removeClass('div1');

7、click事件

$('#btn').click(function(){

$('.box').toggleClass('sty');? //切换样式

});

jQuery索引值:

$('.list li').click(function(){

// alert(this.innerHTML);

// alert($(this).html());

alert($(this).index());

});

jQuery属性操作:

html()

// 取出html内容

var $htm = $('#div1').html();

// 设置html内容

$('#div1').html('span添加文字/span');

text()

// 取出文本内容

var $htm = $('#div1').text();

// 设置文本内容

$('#div1').text('span添加文字/span');

attr():

// 取出图片的地址

var $src = $('#img1').attr('src');

// 设置图片的地址和alt属性

$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

jQuery特殊效果:

fadeIn() 淡入

fadeOut() 淡出

fadeToggle() 切换淡入淡出

hide() 隐藏元素

show() 显示元素

toggle() 依次展示或隐藏某个元素

slideDown() 向下展开

slideUp() 向上卷起

slideToggle() 依次展开或卷起某个元素

jQuery链式调用

$('#div1') // id为div1的元素

.children('ul') //该元素下面的ul子元素

.slideDown('fast') //高度从零变到实际高度来显示ul元素

.parent()? //跳到ul的父元素,也就是id为div1的元素

.siblings()? //跳到div1元素平级的所有兄弟元素

.children('ul') //这些兄弟元素中的ul子元素

.slideUp('fast');? //高度实际高度变换到零来隐藏ul元素

北大青鸟设计培训:HTML语法基础及规则?

HTML的主要语法是元素和标签。

元素是符合DTD(文档类型定义)的文档组成部分,如title(文档标题)、IMG(图象)、table(表格)等等。

元素名不区分大小写的。

杭州北大青鸟建议HTML用标签来规定元素的属性和它在文档中的位置。

标签分单独出现的标签和成对出现的标签两中。

大多数的标签是成对出现的,有首标签和尾标签组成。

首标签的格式为元素名,尾标签的格式为/元素名。

成对标签用于规定元素所含的范围,如title和/title标签用来界定标题元素的范围,也就是说。

title**/title之间的部分是该HTML文档的标题。

单独标签的格式为元素名,它的作用是在相应的位置插入元素。

如BR标签表示在该标签所在位置插入一个换行符。

1,HTML标签是文档标识符,它是成对出现的,首标签HTML和尾标签/HTML分别位于文档的最前面和最后面,明确地表示文档是以超文本标识语言(HTML)编写的。

该标签不带有任何的属性。

事实上,我们现在所用的浏览器是自动识别HTML文档的,并不要求有HTML标签的出现。

也不对它进行任何的操作。

但是,为了提高文档的适用性,还是应该养成用这个标签的习惯。

??2,HEAD标签。

习惯上我们把HTML文档分为文档头和文档主题两个部分。

文档的主题部分就是我们在浏览器用户区中看到的内容了。

而文档头部分用来规定该文档的标题(出现在浏览器窗口的标题栏中)和文档的一写属性。

HTML文档的标签是可以嵌套的,即在一对标签中可以嵌套另一对子标签。

用来规定母标签所含范围的属性和其中某一部分内容,嵌套在HEAD标签中使用的子标签主要有title和isindex。

title标签是成对的。

用来规定HTML文档的标题。

在title和/title之间的内容将显示在WEB浏览器窗口的标题栏中。

例如:html??head?title这是一个测试页/title?/head??/html??isindex标签是一个单独的标签,它是用来规定文档的属性,说明该文档是可以按关键字索引的,下面我们用一段简单的代码来说明该标签的作用。

你可以将该代码copy到你自己的浏览器中看效果。

??html?head??title这是一个"ISINNDEX"事例/title?isindex??/head?body??其中“可搜索该索引。

请键入要搜索的关键字”是IE浏览器自动加上去的。

浏览者在空白文本条内键入要查询的关键字并按回车按确认后,光标就会移动到该关键字或包含这个关键字的词处。

此时,与关键字相匹配的字符呈亮蓝色。

3,BODY标签。

body标签是成对标签。

在body/body之间的内容将显示在浏览器窗口的用户区内,它是HTML文档的主体部分。

在body标签中可以规定整个文档的一些基本属性:??·"bgcolor"。

指定html文档的背景色。

?·"text"。

指定html文档中文字的颜色。

??·"link"。

指定html文档中待连接超链接对象的颜色。

?·"alink"。

指定html文档中连接中超链接对象的颜色。

??·"vlink"。

指定html文档中以连接超链接对象的颜色。

?·"background"。

指定html文档的背景文件。

(责任编辑:IT教学网)

更多

推荐微信营销文章