Html介绍

最新推荐文章于 2024-10-17 15:53:46 发布

饮骅娜娜

最新推荐文章于 2024-10-17 15:53:46 发布

阅读量248

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Lemmontion/article/details/78632150

版权

Html介绍

HTML

什么是html?

HTML:hyper text markup language
标记语言:指的是通过一组标签的形式描述事物的一门语言

超文本:
比普通的文本更强大.

小知识点

1.作用:
html是用来制作页面的(静态页面)
2.什么时候使用:
html在设计一些网站的时候都要使用到html;
3.HTML的使结构：

doctype html
<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
    </head>
    <body>
    <p>Hello Html!</p>
    </body>
</html>

字体标签练习

color=”” size=”” face=”字体”

        <font>font是html中的字体标签</font><br />
        <font color="red">字体颜色设置属性是color="red"</font><br />
        <font color="#00ff00">字体颜色可以使用十六进制设置color="00ff00"</font><br />
        <font color="#00ff00">字体颜色可以使用十六进制设置color="ff0000"</font><br />
        <font color="#00ff00">字体颜色可以使用十六进制设置color="0000ff"</font><br />
        <font size="1">字体大写设置属性为size="1"</font><br />
        <font face="微软雅黑">face标签face="微软雅黑"</font>
        <font face="楷体">face="黑体"</font>

有关排版布局的一些标签

        <pre>原生标签类似cdata区 就是里面的特殊字符不在拥有特别意思,省去转义麻烦,但是部分东西不能识别</pre>
        <strong>&nbsp;表示一个空格</strong>
        <!--注释的使用快捷键是ctrl+反斜杠/-->
        <!--标题标签-->
        <h1>一级标题h1双标签还可以写成h2一直到h7,最小是h1最大是h7即使写的数值超过最大值或最小值,字体大小只取1或7,h自带换行</h1>

        <!--段落标签-->
        <p>这是一个段落标签p双标签,段落标签的特点是自动在结尾添加换行符并且与下行留出一行空行</p><br />
        <strong>这是粗体标签strong双标签</strong><br />
        <em>这是一个斜体标签em双标签</em><br />
        <ins>这是一个下划线标签ins双标签</ins><br />
        <del>这是一个删除线标签del双标签</del><br />
        <center>这是一个居中标签center双标签</center><br />

img标签的使用

重要属性提示,src=”地址路径” title=”悬停提示” alt=”不能正常显示时候的替代显示”
width=”宽度”

    <!--img标签的使用-->
        <!--相对路径的使用:
            如果在同一级路径下,直接使用名字调用或者使用./名字
            如果在上一级目录这使用../两级就使用两次-->
        <img src="001.jpg"/>
        <img src="./001.jpg"/>
        <!--title属性名是设置图片的鼠标悬停名alt是设置图片不能正常显示时候的替代文字 width是宽度,仅设置一个则等比例默认设置另外一个,也可以两个一起设置-->
        <img src="img/001.jpg" title="魁拔" alt="魁拔"  width="100"/ >

a标签的使用

a标签重要的属性:
href=”跳转地址”
target=”打开方式”-blank空白页打开-self自身打开

<a href="公司简介.html" target="_blank">传智播客</a>

列表标签

列表标签分为有序列表无序列表
ul无序列表ol有序列表
常用属性:
type是选择形式例如有序列表ol中type中包含aA1等三种列表形式
无序列表包含实心圆方块空心圆
start开始的位置,里面填写索引从1开始例如填写3abc有序所有就会从c开始

<!--列表-->
        <!--有type="前缀样式"  start="开始字符"-->
        <!--有序列表-->
        <ol type="A" start="3">
            <!---parent是在框架中的打开方式-->
            <li><a href="公司简介.html" target="_blank">传智播客</a></li>
            <li><a href="http://www.baidu.com"target="_blank">百度</a></li>
        </ol>


        <!--无序列表-->
        <ul type="square">
            <li>传智播客</li>
            <li>百度</li>
        </ul>

表格标签

table做表格的标签
其中重要的属性:
border 表格边框宽度width表格宽度hight表格高度其中子元素tr表示行数td表示一个行中的单元格数
单元格和表格标签皆可以设置背景图片background
合并单元格在td标签中使用colspan是列合并也就是横向合并
使用rowspan是行合并,也就是纵向合并

            <table border="20" width="200" height="200">
                <tr>
                    <td colspan="2">
                    </td>
                    <td rowspan="2">

                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>

                </tr>
            </table>

注册页面需要的多种标签

HTML的表单标签：
* 常用属性:
* action属性:提交的路径.默认提交到当前页面
* method属性:请求的方式.GET和POST.默认是GET.
* GET方式和POST方式的区别?
* GET :数据会显示到地址栏中.GET方式提交是有大小的限制.
* POST :数据不会显示到地址栏中.POST方式提交的是没有大小限制.
HTML中表单元素：
* :文本框.
* 常用属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :文本框的默认值.
* size :文本框的长度.
* maxlength:文本框输入的最大长度.
* readonly:只读文本框.
* :密码框.
* 常用属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :密码框的默认值.
* size :密码框的长度.
* maxlength:密码框输入的最大长度.

:单选按钮.
- 常用的属性:
  - name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
  - value :单选按钮的默认值.
  - checked:单选按钮默认被选中.
:复选按钮.
- 常用的属性:
  - name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
  - value :单选按钮的默认值.
  - checked:单选按钮默认被选中.
:普通按钮.没有任何功能的按钮.
:提交按钮.
:重置按钮.
:文件上传的表单项.
:隐藏字段.
:图片按钮
:下拉列表.
:文本域.

框架标签

框架标签:,标签与body标签是冲突,有frameset就可以没有body.
* 属性:
* rows
* cols
使用标签，frame代表切分的每个部分.

【步骤一】创建一个html的页面
【步骤二】将整个页面分成上下两个部分.
【步骤三】将页面的下半部分分成左右两个部分.
【步骤四】在左侧页面中添加一些链接.

<frameset rows="15%,*">
        <frame  src="top.html" name="top"/>
        <frameset cols="15%,*">
            <frame  src="left.html" name="left"/>
            <frame  src="right.html" name="right"/>
        </frameset>
    </frameset>