HTML

2019-04-02  本文已影响0人  Like_c1dc

html的简介

超文本标记语言,网页语言

超文本:超出文本的范畴,使用html可以轻松实现这样操作

标记:html所有的操作都是通过标记现实的,标记就是标签

网页语言

html的规范(遵循):

1.一个html文件开始标签和结束的标签 <html>  </html>

2.html包含两个部分

    (1)<head>设置相关信息</head>

       (2)<body>显示在页面上的内容都写在body里面</body>

3.html的标签有开始标签,必须有结束标签

4.html的代码不区分大小写

5.有些标签,没有结束标签   在标签内结束

        比如换行  <br/>  <hr/>

html的操作思想:

    网页中有很多数据,不同的数据可能需要不同的显示效果,这个时候需要使用标签把要操作的数据包起来

    通过修改标签的属性值实现标签内数据样式的变化

    一个标签相当于一个容器,想要修改容器内数据的样式,只需要改变容器的属性值

html中常用的标签

   文字标签和注释标签

        文字标签:修改文字的样式<font></font>

            size:文字的大小  范围1-7

            color: 颜色  1.英文单词 2.使用十六进制数表示

        注释标签:<!--html的注释-->

标题标签    ,水平线标签和特殊字符

标题标签<h1></h1> <h2></h2> .........<h6></h6>

水平线标签<hr/> 属性 size:水平线的粗细  color:水平线颜色

特殊字符:需要对特殊字符进行转译

    <    &alt;

    >    &g;

    空格:&nbsp;

列表标签

<dl></dl>:表示列表的范围

    在dl里面<dt></dt>:上层内容

    在dl里面<dd></dd>:下层内容

<ol></ol>:有序列表的范围   属性:type:设置排序方式  1(默认) a

    在ol里面<li>具体内容</li>

<ul></ul>:无序列表的范围    属性: type : 空心圆 circle   实心圆disc 实心方块square 默认disc

    在ul里面 <li></li>

图像标签

<img src="图片的路径">

    src:图片的路径

    width:图片的宽度

    height:图片的高度

    alt:图片上显示的文字

路径的介绍:

两类: 绝对路径  相对路径

相对路径:三种

    1.html文件和图片在一个路径下,可以直接写文件名称

    2.图片在html的下层目录

    3.图片在html的上层目录

超链接 

<body><a href="http://www.baidu.com">百度</a><!--外部链接--><a href="Test2.html">test2</a><!--内部链接--></body>

表格标签

<table></table>:表示表格的范围

border:表格线

bordercolor:表格线的颜色

cellspacing:单元格直接的距离

width:表格的宽度

heigh:表格的高度

表单标签

<form></form>:定义一个表单标签

                    action:提交到地址,默认提交到当前的页面

                    method:  表单提交方式  

输入项:可以输入内容或选择内容的部分

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

    输入项里面需要一个name属性

        普通输入项:<input type="text"/>

        密码输入项:<input type="password">

        单选输入项:<input type="radio"  name ="sex1"/>女 <input type="radio" name="sex1"/>男

                    实现默认选中的属性:checked="checked"

        复选输入项:<input type="checkbox" name="love"/ >

        文件输入项:<input type=" file">

        下拉输入项:<select>

                                <option value="0">请选择</option>

                                <option value="1991">1991</option>

                                 <option value="1992">1992</option>

                                  <option value="1993">1993</option>

                               </select>

           文本域:<textarea clos="10"  rows="10"></textarea>

            隐藏项(不会显示在页面上,但是存在在html代码里面):

                        <input type="hidden"/>

            提交按钮:

                         <input type="submit" value="注册"/>

            使用图片提交:

                        <input type="image" src="图片路径"/>

            重置按钮:回到输入项的初始状态 

                        <input type="reset" value="">

            普通按钮:

                        <input type="button" value="">

HTML中的其他的常用标签的使用:

b:加粗

s:删除线

u:下划线

i:斜体

pre:原样输出

sub:下标

sup:上标

p:段落标签

div:自动换行

span:在一行显示

HTML的头标签的使用

<meta>标签:设置页面的一些相关内容

<base>标签:设置超链接的基本设置

                       可以统一设置超链接的打开方式

                        <base target="-blank">

<link>标签:    引入外部文件

上一篇下一篇

猜你喜欢

热点阅读