HTML+CSS基础学习标签代码

HTML基础

一、HTML页面结构

1.HTML定义

(HTML)为超文本标记语言,是写给浏览器的语言, 目前网络上应用最广泛的语言,目前已经更新到HTML5,HTML添加了一些写的语义化标签,放弃了一些旧标签。目的是兼容所有以往标签编写的网页。可以更加优良的识别。应用。

2.HTML标签

(HTML)标签的书写与大小写无关,一般推荐使用小写。特点:由尖括号包围关键词,如《hmtl》。通常成对出现:比如<div></div>,一个开始一个结束标签,一般HTML的标签都是闭合的成对出现,但是,页也有个别的例外。(单标签<img/>、<br/>、<input/>、等)。标签具有属性:属性用来表示标签的特性,如<img src=" " title=" "/>

3.html基本结构

<!doctype html>:声明语句,告诉浏览器该文档遵循HTML规范

<html>:页面基础元素,主要定义页面的开始和结束部分,其他内容包含在<body>标签内

<head>:页面头部元素,包含当前文档的相关信息,可包含<title>元素,等,定义标题,编码,使用此标签可以将基本信息部分和页面主题内容区分开来。

<meta charset="utf-8">:meta元信息元素用来定义页面的附加信息,其中包括页面的作者,版权,关键字等相关信息。此元素是一个自封闭的元素,通过其中的属性来添加各种附加信息。此元素在不适用任何属性时,对页面没有影响.(页面编码有多种,但常用的是utf-8,gb2312,utf-8为多国语言编码,gb2312为中文简体编码,设置网页编码的语句为<meta charset="utf-8"/>是在head标签内定义的)

<name>:元信息元素名称属性,制定文档附加信息名称,例如,最常用的值“keywords”用来定义文档中的关键字,方便搜索引擎的搜索,name属性的语法结构用法:<meta name="keywords" ontent=" 测试软件"/>

<title></title> :设定文档的标题,标题名称,会显示在浏览器的窗口的标题栏

</head>

<body>:定义文档主题,包含文档的所有内容(文本,超链接,图像,表格等)

</body>

</html>

4.常用标签元素

行内元素:*和其他元素都在一行,*宽高设置无效,宽高就是内容撑开容器的宽高,*行内元素只能包含行内元素,不能包含块级元素。

超级链接:<a href="url"></a>标签定义超链接,href的作用是指明超链接连接到的网址,除了href属性,还有title属性表示链接的提示信息。target属性表示超链接要链接的打开方式,即当点击了链接,选择是在另一个页面打开还是本页面打开,其中属性值包括_blank(新的空白页),_self(当前页)_top(当前页)。

span标签:常用的文本标签。可以对特殊处理的文字部分添加样式<p>守护 <span style="color:red">执子之手与子偕老</span></p>

文本格式化标签: <b>粗体</b>,<strong>定义粗体</strong>,<i>斜体<i>,<em>斜体</em>,<del>定义删除</del>,4<sup>2</sup>定义上标文字。3<sub>5</sub>定义下标文字,<mark>表示提醒</mark>

img图像;展示图片,<img src=" 图片链接 " title=“ 图片名称” alt=“图片名称”/>

标签:input标签:账号:<input type="text" placeholder=" 输入框 " required=“required”/> 密码:<input type="password" placeholder="密码框"/>

单选框架:<label> <input type="readio" value="man" name="sex" id="man">男</label>  <input type="radio" value="woman" name="sex" id="woman"/><label fox="woman">女</label>

复选框架:兴趣爱好<label><input type="checkbox" name="hobby"/>听歌 </label>

<label><input type="checkbox" name="hobby"/>写字 </label>

<label><input type="checkbox" name="hobby"/>运动 </label>

下拉框架:科目<select><option value>语文</option>

<option value>数学</option>

<option value>英语</option>

</select>

按钮:<input type="submit" value="提交">

<iniput type="button" value="取消">

文件类型的input:<input type="file" id=" " value=" "/>

多行输入:textarea <textarea placeholder="输入多行内容"></textarea>

按钮标签:<button></button>

块级元素:<div style="background; 颜色"width;宽度,height;高度/> 内容 </div>

段落元素:<p></p> 定义一段文字。

语义化标题,跟随数字增大标题大小:<h1-h6>

有序列表:<ul> <li></li> </ul>

无序列表:<ol><li></li></ol>

表格table:<table bordr="  px"  cellpadding="  px"  cellpadding=" ">

</thead>

<tr><th></th></tr>

<th><tr></tr></th>

</thead>

htmkl新增标签

1.section:独立内容区块,可以用h1到h6组成大纲,表示文档结构,也可以有章节,页眉,页脚,或页眉的其他部分、

2.article:特殊独立区块,表示这篇页眉中的核心内容

3.aside:标签内容之外与标签内容相关的辅助信息

4.header:某个区块的头部信息/标题

5.footer:底部信息

6.nav导航条部分信息

2.媒体标签

(1)video:视频;<video src=" video/coens.mp4" controls="controls" preload=" auto" loop=" loop">您的浏览器不支持</video>

(2.)audio音频<atdio src="ocans.mp4" controls="controls"> 您的浏览器不支持</audio>

原文地址:https://www.cnblogs.com/wtdall/p/10130625.html

时间: 2024-10-11 04:01:32

HTML+CSS基础学习标签代码的相关文章

HTML&CSS基础学习笔记3-HTML的标签语法

HTML标签语法 1. 标签由英文尖括号<和>括起来,如<html>就是一个标签. 2. HTML中的标签一般都是成对出现的,分开始标签和结束标签.结束标签比开始标签多了一个/.如: <p></p> 3.标签的内容是开始标签与结束标签之间的内容,如:<h1>这是标题</h1>. 4. 标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:<div>里嵌套<p>,那么</p>必须放在</div

HTML&CSS基础学习笔记6-文本操作标签

文本也许是HTML里最常见的元素了,所以我们有必要对HTML的文本操作标签做下认识. 1. <em>,<i>内的文字呈现为倾斜效果: 2. <strong>,<b>内的文字呈现为加粗效果: 3. <b>,<i>只是单纯的为了让文本具有某种特殊样式,而<strong>,<em>不仅带有特殊样式,而且也表达了某种语义: 4. 在单纯的为了达到某种样式的情况下,建议使用不带有语义的标签. 体验如下:http://ww

HTML&CSS基础学习笔记13—无序列表

无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无序列表,列表里的项目则用<li>标签来表示: 1 2 3 4 5 <ul>     <li></li>     <li></li>     ... </ul> 看一段实例代码: 对于的浏览器显示结果是这样的: 更多内容学习,请

HTML&CSS基础学习笔记7-高亮文本及组合使用

HTML提供了<mark>标签可以让你的文本高亮,这样看起来更加醒目.<mark>标签内的文本会呈现特殊的样式,它和<em>,<strong>一样也是一个带有语义的标签. 代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>高亮文本</title><

HTML&CSS基础学习笔记4-定义文档类型

定义HTML的文档类型 Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档. HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面.这就是 <!DOCTYPE> 的用处. <!DOCTYPE> 声明不是 HTML 标签,它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令.是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用置标语言解析器,它应该使用什么样的文档

HTML&CSS基础学习笔记14—有序列表及列表嵌套

我们上篇讲到了无序列表,那么今天就来看看有序列表和他们的组合嵌套使用吧. 有序列表 现在我们要做那堆杂事了,但是发现这么多杂事,先做哪个好呢?于是我们给这堆杂事弄个优先级排序,让我们能够按照顺序做下去.HTML里用<ol>标签来表示有序列表,<ol>标签的列表项依然是用<li>标签表示. 它的代码模板是这样的: <span style="font-family:Microsoft YaHei;"><ol>       <

HTML&CSS基础学习笔记11-导航栏

上文我们介绍到的<a>标签,由于<a>标签可以用来跳转,所以我们可以拿<a>标签来生成网页的导航栏. 其实在实际运用中,<a>标签就经常会被用来生成导航栏. 导航栏在HTML中有一个语义化的标签<nav>,这个标签表示带有导航性质的内容,会有自己默认的特殊样式.语义化标签我们将会在后面讲到. 我们在这里先使用下<nav>标签,和<a>组合成一个导航栏. 代码如下: <!DOCTYPE html> <htm

HTML&CSS基础学习笔记8-预格式文本

<pre>标签的主要作用是预格式化文本.被包围在 pre 标签中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码.当然你也可以在你需要在网页中预显示格式时使用它. 会使你的文本换行的标签(例如<h>.<p>)绝不能包含在 <pre> 所定义的块里.尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的. 更多学习内容,就在码芽网http://www.

CSS基础学习十四:盒子模型补充之display属性设置

我在CSS基础学习十三:盒子模型的i博文只是阐释了CSS盒子模型,并没有过多的使用实例来演示.这篇博文 就来做一些盒子模型知识的补充.这一部分对于网页总体布局还是蛮重要的,过去大多数使用HTML中的table元素和 框架标签来进行网页的整体布局,现在我们使用最多的是DIV+CSS网页布局.所以一定要掌握好盒子模型,记住 content,border,padding和margin各自在盒子中的作用和使用方式. 先来看一个完整元素的盒子模型实例: <!DOCTYPE html PUBLIC "