Html语言的标签讲解

一、head头部中的内容:

1、<meta charset="UTF-8">  <--!告诉浏览器什么编码-->

2、<meta http-equiv="Refresh" Content = "5"/>  <!--页面自动刷新功能,每隔5秒-->

3、<meta http-equiv="Refresh" Content = "5; Url=http://www.baidu.com"/><!--页面自动刷新功能,每隔5秒,跳转到百度首页-->

4、<meta name="keywords" content="博文,python"/><!--网页的关键字-->

5、<meta name="description" content="各种发布的博文,python语言、linux运维等各方面的技术"/><!--网页描述-->

6、<title>欢迎加入博客园</title><--!网页显示标题-->

7、<meta http-equiv="X-UA-COMPATIBLE" CONTENT="IE=edge"/><!--指定页面的渲染模式,此指按照最高的渲染模式,主要解决兼容性的问题-->

   <meta http-equiv="X-UA-COMPATIBLE" CONTENT="IE=EmulateIE7"/><!--指定页面的渲染模式,此指按照IE7的渲染模式,主要解决兼容性的问题-->

8、link标签:主要是引入css样式、页面顶部图标、js脚本

<link rel="shortcut icon" href="image/页面图标.png"/><--!引入页面顶部图标-->

。。。

二、body的杂七杂八

三类标签的分类:块级标签、行内标签(或内联标签)和各种符号

区别:块级标签占一行,行内标签(或内联标签)占一块

A》块级标签

1、div标签:<div style="background-color: red">div:块级标签</div>

2、p标签:段落 <p style="background-color: red">p:块级标签</p>

3、br标签:换行 <p style="background-color: red">p:块<br/>级标签</p>

4、h1-h6标题标签:

 

5、列表标签

   

    

  

6、label标签

label 元素不会向用户呈现任何特殊的样式。不过,它为鼠标用户改善了可用性,因为如果用户点击 label 元素内的文本,则会切换到控件本身。

当鼠标点击label标签内的文本时,自动将焦点转移到控件本身。

B》行内标签(或内联标签)

1、a标签:<a style="background-color:greenyellow">a:行内标签</a>

   a标签的跳转用途:

      特有的属性 href = "http://www.baidu.com"

       <a href="http://www.baidu.com">百度</a>

     target属性:打开的链接页,将以重新打开一页、在当前页等形式展开

     <a href="http://www.baidu.com" target="_blank">百度</a><!--在新的一页中打开链接页-->

     <a href="http://www.baidu.com" target="_parent">百度</a><!--在父级页中打开链接页,可以理解为本页中-->

   a标签的锚点用途:

     <a href="#第一章">第一章(点击此处直接跳到id为第一章的div处)</a>

      <a href="#第二章">第二章(点击此处直接跳到id为第二章的div处)</a>

      <a href="#第三章">第三章(点击此处直接跳到id为第三章的div处)</a>

      <div id="第一章">第一章内容</div>

      <div id="第二章">第二章内容</div>

      <div id="第三章">第三章内容</div>

2、span标签:内联标签,不会独占一行。格式化文本

  <span>span标签</span>

  例如一段文本:<p>我是中国人</p>,你想把“中国”二字单独加粗,这时你就可以使用<p>我是<span>中国</span>人</p>,然后对其设置CSS就可以了。

三、允许用户输入值的系列标签

1、input系列

邮箱:<input type="email"/>                                            <!--系统自动去检测填写的内容是否符合邮箱的格式-->

登录用户名:<input type="text"/>                                          <!--单行输入框的应用-->

密码:<input type="password"/>                                           <!--自动将输入的字符或者数据转换为黑点形式-->

性别:男<input type="radio" name="sex"/>女<input type="radio" name="sex"/>                     <!--单选框的应用-->

  属性:男<input type="radio" name="sex" checked ="checked" />                                      <!--checked属性表示默认选中-->

爱好:篮球<input type="checkbox"/>&nbsp;足球<input type="checkbox"/>&nbsp;排球<input type="checkbox"/>   <!--复选框的应用-->

  属性:默认选中的方式和单选框一样的设置方式,checked = "checked"

城市:<select><option>北京</option><option>上海</option><option>广州</option></select>          <!--下来框的应用-->

  属性:<select multiple size="10">...</select>   mutiple:表示可以同时多选,size = “10”  表示列表中显示10个选项

      <option selected="selected">北京</option> 表示默认选中北京。与上面的单选框、多选框关键字不一样

简介:<textarea></textarea>                                              <!--多行输入框的应用-->

照片:<input type="file"/>                                              <!--上传文件功能的应用-->

补充:

<div>登录用户名:<input type="text" name="username" value="root" placeholder="请输入默认值"/></div>

name属性:相当于id,标识符;value 表示默认值;placeholder="请输入默认值" 表示:提示信息,当此文本框中输入值后,此提示信息自动消失,清空后,提示信息又出现

图片:<div><img src="image/页面图标.png" alt="图标" title="页面图标"></div>                    <!--alt表示:当图片不存在时,图片的位置会显示“图片”两个字。title表示:当鼠标放到图片上,会显示“页面图标”四个字-->

<fieldset>    <legend>注册</legend>    <p>用户名:</p>    <p>密码:</p></fieldset>

2、form表单标签:用来提交表单内的数据

属性:

action = “URL” 点击summit按钮后,会自动将数据提交到URL这个界面

method = "POST"  表示以哪种提交方式提交,可以是POST,GET等

enctype = "multipart/form-data" 表示上传文件

例:<form action="http://www.baidu.com/index/">

注:form表单提交数据时,各个标签都要有name属性值

例:

<!--form标签用来提交表单内的数据,跳转至www.baidu.com,同时支持了文件的上传(enctype="multipart/form-data")--><!--特别需要注意单选框(radio),多选框(checkbox),下拉菜单(select)三个标签在form中的应用--><form action="http://www.baidu.com" enctype="multipart/form-data">    <p>        邮&nbsp;&nbsp;&nbsp;箱:<input type="email" name="email"/>    </p>    <p>        登录用户名:<input type="text" name="username"/>    </p>    <p>        密&nbsp;&nbsp;&nbsp;码:<input type="password" name="pwd"/>    </p>    <p>        确认密码:<input type="password" name="pwd_sure"/>    </p>    <p>        性&nbsp;&nbsp;&nbsp;别:男<input type="radio" name="sex" value="1"/>女<input type="radio" name="sex" value="2"/>    </p>    <p>爱&nbsp;&nbsp;&nbsp;好:        篮球<input type="checkbox" name="hobby" value="lanqiu"/>        足球<input type="checkbox" name="hobby" value="zuqiu"/>        排球<input type="checkbox" name="hobby" value="paiqiu"/>    </p>    <p>城&nbsp;&nbsp;&nbsp;市:        <select name="city">            <option value="beijing">                北京            </option>            <option value="hebei">                河北            </option>            <option value="henan">                河南            </option>        </select>    </p>    <p>简&nbsp;&nbsp;&nbsp;介:        <textarea name="jianjie"></textarea>    </p>    <p>        <input type="submit" value="提交"/>        <input type="reset" value="重置"/>    </p></form>

四、table表格的介绍

表格标签:<table> 、 <thead> 、<tbody>

行标签:<tr>

列标签:<td> 、<th>

跨多列:<td colspan="2">我占了两列</td>  表示跨两列

跨多行:<td rowspan="2">我占了两行</td>  表示跨两行

<table border="1" style="text-align: center"> <!--border:表格边框,text-align:center:文本居中-->    <thead>        <tr>            <th>序号</th>            <th>用户名</th>            <th>密码</th>            <th>操作</th>        </tr>    </thead>    <tbody>        <tr>            <td>1</td>            <td>                <select>                    <option>百度</option>                    <option>hao123</option>                </select>            </td>            <td>python</td>            <td><a href="">删除</a>|<a href="http://www.baidu.com">跳转</a></td>        </tr>        <tr>            <td>2</td>            <td>                <select>                    <option>百度</option>                    <option>hao123</option>                </select>            </td>            <td>python</td>            <td><a href="">删除</a>|<a href="http://www.hao123.com">跳转</a></td>        </tr>    </tbody></table>

五、CSS实战之前戏

margin: 0 auto           表示边距。默认边距为8像素。这样设置表示距离上、下边距为0,左、右边距自动平分。

border:1px            表示边框的大小

text-align:center          文本居中,还有居左:left,居右:right(水平方向)

height:48px             定义高度,为48px

width:16px            定义宽度,为16px

background-color:#bbbbbb     定义背景颜色

color:black               定义文本颜色

font-size: 18px            定义字体大小

line-height:36px           表示字体的位置,当div的高度为36px时,此时字体在垂直的中间位置

display: inline            表示具有内联标签的特性

display:block             表示具有块级标签的特性

display:inline-block          表示具有内联标签特性,也有块级标签的特性


注:

横线标签:<hr>

时间: 2024-10-13 04:07:40

Html语言的标签讲解的相关文章

Tomcat 的context.xml说明、Context标签讲解

Tomcat的context.xml说明.Context标签讲解 1. 在tomcat 5.5之前 --------------------------- Context体现在/conf/server.xml中的Host里的<Context>元素,它由Context接口定义.每个<Context元素代表了运行在虚拟主机上的单个Web应用 Xml代码 <Context path="/kaka" docBase="kaka" debug=&quo

.NET中的XML注释(一) 标签讲解

一.摘要 .Net允许开发人员在源代码中插入XML注释,这在多人协作开发的时候显得特别有用. C#解析器可以把代码文件中的这些XML标记提取出来,并作进一步的处理为外部文档. 这篇文章将展示如何使用这些XML注释. 在项目开发中,很多人并不乐意写繁杂的文档.但是,开发组长希望代码注释尽可能详细:项目规划人员希望代码设计文档尽可能详尽:测试.检查人员希望功能说明书尽可能详细等等.如果这些文档都被要求写的话,保持它们同步比进行一个战役还痛苦. 为何不把这些信息保存在一个地方呢??最明显想到的地方就是

NET中的规范标准注释(一) -- XML注释标签讲解

一.摘要 .Net允许开发人员在源代码中插入XML注释,这在多人协作开发的时候显得特别有用. C#解析器可以把代码文件中的这些XML标记提取出来,并作进一步的处理为外部文档. 这篇文章将展示如何使用这些XML注释. 在项目开发中,很多人并不乐意写繁杂的文档.但是,开发组长希望代码注释尽可能详细:项目规划人员希望代码设计文档尽可能详尽:测试.检查人员希望功能说明书尽可能详细等等.如果这些文档都被要求写的话,保持它们同步比进行一个战役还痛苦. 为何不把这些信息保存在一个地方呢??最明显想到的地方就是

前端学习(1)~html标签讲解(一)

本文主要内容 头标签 排版标签:<p>. <div>. <span>.<br> . <hr> . <center> . <pre> 字体标记:<h1>. <font>. <b>. <u> .<sup> .<sub> 超链接 <a> 图片标签 <img> 0.前言 web标准介绍: w3c:万维网联盟组织,用来制定web标准的机构

C语言柔性数组讲解

#include<stdio.h> typedef struct _SoftArray{ int len; int array[]; }SoftArray; int main() { int len = 10; printf("The struct's size is %d\n",sizeof(SoftArray)); } 我们可以看出,_SoftArray结构体的大小是4,显然,在32位操作系统下一个int型变量大小刚好为4,也就说结构体中的数组没有占用内存.为什么会没有

HTML中的a标签讲解(菜鸟)

一.什么是a标签? a标签的作用:就是用于控制界面与页面之间的跳转的 a标签的格式:<a href="指定要跳转的目标界面的链接">需要展示给用户看见的内容</a> <a href="http://www.baidu.com">百度</a> a标签中有一个target属性,这个属性的作用就是专门用于控制如何跳转 self:用于在当前选项卡中跳转,也就是不新建页面跳转 默认就是self _blank :用于在新的选项卡中

HTML语言基本标签

创建一个HTML文档 <html></html> 设置文档标题以及其他不在WEB网页上显示的信息 <head></head> 设置文档的可见部分 <body></body> 标题标签 将文档的题目放在标题栏中 <title></title> 文档整体属性 设置背景颜色,使用名字或十六进制值 <body bgcolor=?> 设置文本文字颜色,使用名字或十六进制值 <body text=?>

转:C语言inline详细讲解

本文介绍了GCC和C99标准中inline使用上的不同之处.inline属性在使用的时候,要注意以下两点:inline关键字在GCC参考文档中仅有对其使用在函数定义(Definition)上的描述,而没有提到其是否能用于函数声明(Declare). 从 inline的作用来看,其放置于函数声明中应当也是毫无作用的:inline只会影响函数在translation unit(可以简单理解为C源码文件)内的编译行为,只要超出了这个范围inline属性就没有任何作用了.所以inline关键字不应该出现

C语言 const常量讲解

//const的本质 //const本质上是伪常量,无法用于数组初始化以及全局变量初始化 //原因在于const仅仅限定变量无法直接赋值,但是却可以通过指针间接赋值 //例如局部常量在栈区,而不在静态区(静态区会一直存在),也不在代码区(代码区只读,禁止修改) #include<stdio.h> #include<stdlib.h> //const与define的区别 #define X 10.0 const int Y = 9.0;//赋值时会自动数据类型转换 //const是有