HTML前端

 

 

 

1.<html>内容</html>     

解释：HTML文档的文档标记，也成为HTML开始标记
功能：这对标记分别位于网页的最前端和最后端
        <html>在最前段表示网页的开始
        </html>在最后端表示网页的结束
功能及解释

2.<head>内容</head>

解释：HTML文件头标记，也称为HTML头信息标记
功能：用来包含文件的基本信息，比如网页的标题、关键字，在<head></head>内可以放<title></title>、<meta>、<style type="text/css"></style>等标记
注意：在<head></head>标记内的内容不会再浏览器中显示
功能及解释

3.<title>内容</title>

解释：HTML文件标题标记
功能：网页的主题，显示在浏览器的窗口的左上边
注意：网页的标题不能太长，要短小精悍，能具体反应页面的内容，<time></time>标记中，不能包含其他标记
功能及解释

4.<body>内容</body>

解释：HTML文档的主体标记
功能：<body>...</body>是网页的主体部分，在此标记之间可以包含如<p></p>、<h1></h1>、<br>、<hr>等等标记，正是由这些内容组成了我们所看见的网页

body标记的常见属性：
            1.bgcolor:设置背景颜色  <body bgcolor="red"></body>
            2.text 设置文本颜色 <body text="green"></body>
            3.link 设置连接颜色  <body link="blue"></body>
            4.vlink 已经访问了链接颜色 <body vlink="yellow"></body>
            5.alink 正在被点击的链接颜色 <body alink="red"></body>
功能及解释

5.<meta>内容</meta>

解释： 页面的元信息（meta-information）
功能：踢过有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。
必须的属性： content 值：some_text 定义name属性相关的元信息
常见的属性： 1.常见的name属性：（1.author, 2.keywords,3.descriptior,4.others）把content属性关联到一个名称。
                比如描绘出网页的关键词：<meta name="keywords" content="关键词">
注意meta标记必须放在head元素里面
功能及解释

 6.字符实体：  

 1.什么是字符实体？比如我们想在网页上面显示一个"<"小于符号，但是"<" 在HTML中是文档标记的开始语言
        如果我们直接使用"<"会出差错，所以我们就会一些实体名称来代替！

 7.文本标记

　　 a.）hn 标题标记， 共有6个级别， n的范围1~6， 不同级别对应显示大小不同的标题，h1最大，h6最小

　　 b）font 字体设置标记 ， 设置字体的格式， 三个常用属性 ：

　　

                                                1.size（字体大小）<font size="3">
                                                2.color(颜色) <font face="微软雅黑">
                                                3.b 粗字体标记
                                                4.i 协字体标记
                                                5.sub 文字下标字体标记
                                                6.sup 文字上标字体标记
                                                7.tt 打印机字体标记
                                                8.cite 引用方式的字体，通常是斜体
                                                9.em 表示强调， 通常显示为斜体字
                                                10.strong 表示强调，通常显示为粗体字
                                                11.small 小型字体标记
                                                12.big 大型字体标记
                                                13.u 下划线字体标记

8.超链接

　　1.基本语法：

<a href="" target="打开方式" name="页面锚点名称"> 链接文字或者图片</a>

　　2.属性：

a）href属性：链接的地址，链接的地址可以是一个网页，也可以是一个视频，图片，音乐
b）target属性：
            1.作用：定义超链接的打开方式
            2.属性值：
                @）_bank ：在一个新的窗口中打开链接
                @）_seif(默认值)：在当前窗口中打开链接
                @）_parent:在父窗口中打开页面（框架中使用较多）
                @）_top: 在顶层窗口中打开文件（框架中使用较多）
            3.name属性：指定页面的锚点名

 

 9.表单

　　a）表单标记<form>

        <form></form>定义表单的开始位置和结束位置，表单提交时的内容就是<form>表单中的内容
        基本格式：<form action="服务器端地址（接受表单内容地址）" name="表单名称" method="psot|get"></form>
        常用属性：1.name 表单名称
                  2.method 传送数据的方式，分为post和get两种方式
                              get方式 不具有保密性
                              post方式 把内容一起封装到http协议里面发送到服务器处理

                  3.action 如果URL地址为空则使用当前文档的URL地址，如果表单中不需要使用action属性也要知道属性为no
                  4.enctype 设置表单的资料的编码方式
                  5.target 和超链接的属于类似，用来指定目标窗口

　　b）文本域和密码 <input>标记

　　　　　<input> 标记没有结束标记

　　　　 1.基本语法：<input type="" name="" value="" size="" maxlength="">
        2. 属性介绍：
            1.type属性：type属性有两个值
                    1.text 当type="text"时， <input>表示一个文本输入域
                    2.password 当type="password"时，<input> 表示一个密码输入域
            2.name属性  定义控件的名称
            3.value 属性 初始化值，打开浏览器时，文本框中的内容
            4.size属性 设置控件的长度
            5.maxlength属性： 输入框中最大允许输入的字符数
        3.提交，重置，普通按钮
            1.提交按钮 ：当<input type="submit"> 时，为提交按钮
            2.重置按钮 ：当<input type="reset" > 时，为重置按钮
            3.普通按钮 ：当<input type="button"> 时，为普通按钮
        4.单选框和复选框 
            1.单选按钮： 当<input type="radio" > 时，为单选按钮
            2.复选框： 当<input type="checkbox"> 时，为复选框
            3.注意：单选框和复选框都可以使用"cheked" 属性来设置默认选中项
        5.隐藏域 ： 当<input type="hidden" > 时， 为隐藏表单域
        6.多行文本域：
            1.用法，使用<textarea>标记可以实现一个，能够输入多行文本的区域
            2.语法格式：<textarea name="name" rows="value" cols="value" value="value">...</textarea>
            3.rows属性和cols属性分别用来指定，显示的行数和列数，单位是字符个数

        7.菜单下拉列表域  <select></select>标记
            1.语法标记：
                <select name="opt" size="" multiple="">
                    <option value="1" >选项1</option>
                    <option value="2" selected="">选项1</option>
                    。
                    。
                </select>
            2.属性
            3.option标记
                <option>标记用来指定列表中的一个选项，需要放在<select></select>之间
                值：
                    1.value 给选项赋值，指定传送到服务器上面的值
                    2. select 指定默认的选项

 

小案例：

写个注册网页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            div{
                width: 600px;
                height: 700px;
                background-color:#f7b497 ;
                border-style: solid;
                margin-top: 30px;
            }
            .div1{
                border-style: solid;
            }
            /*body{
                background-image: url(C:\Users\lan\Desktop\html\HTML_demo\2.jpg);
            }*/
        </style>
    </head>
    <body>
        <center>
            <div class="div1">
                <h1><center>welcome to my private web</center></h1>
        <form method="post" action="http://www.sogou.com/web">
            <center>
            <p>邮箱 &nbsp; <input type="text" name="query"></p>
            <p>用户名&nbsp;<input type="text" name="email"><br/></p>
            <p>密码 &nbsp; <input type="password" name="pwd"></p>
            <p>确认密码<input type="password" name="pwd"></p>
            验证码。。。
            <p>选择语言种类(问题1多选)</p>
            <p>
                python<input type="checkbox" nname="hobby" value="1">
                java<input type="checkbox" nname="hobby" value="2">
                c<input type="checkbox" nname="hobby" value="3">
                c#<input type="checkbox" nname="hobby" value="4">
                c++<input type="checkbox" nname="hobby" value="5">
            </p>
            <p>单选
                男<input type="radio" name="sex" value="1" />
                女<input type="radio" name="sex" value="2" />
            </p>
            <p>下拉菜单
                <select name="menu">
                    <option value="1">董事长</option>
                    <option value="2">助理</option>
                    <option value="3">CEO</option>
                    <option value="4">CTO</option>
                    <option value="5">总监</option>
                    <option value="6">经理</option>
                    <option value="7" selected="selected">职员</option>
                </select>
                
            </p>
            <p>备注
                <textarea name="qq" rows="10" cols="55">
                    
                </textarea>
            </p>
            <input type="submit" value="提交">
            </center>
        </form>
            </div>
        </center>
    </body>
</html>
小案例：注册页面

 10.常用块级标签：

    1.<br> 强制换行标记 让后面的文字，图片，表格等等，显示在下一行
    2.<p> 换段落标记  换段落，由于多个空格和回车在HTML中会被等效为一个空格，所以HTML中药换段落就要用<p></p>,<p>段落中也可以包含<p>段落
    3.<center> 居中对齐标记 让段落或者是文字相对于父标记居中显示
    4.<pre> 预格式化标记， 保留预先编排好的格式
    5.<li> 列表项目标记 每一个列表使用一个<li> 标记中
    6.<ul> 无序列表标记
    7.<ol> 有序列表标记 可以显示特定的一些顺序：
            1.格式：    
                    <ol type="符号类型">
                    <li type="符号类型"></li>
                    <li type="符号类型"></li>
                    </ol>
            2.有序列表的type属性值：
                    1.阿拉伯数字1.2.3等，默认type属性值
                    2.A大写字母A，B，C等
                    3.a小写字母a，b，c等
                    4.I 大写罗马数字I，II， III， IV
                    ５.小写罗马数字ｉ，ｉｉ，ｉｉｉ等
            ３.value 指定一个新的序列数字起始值
            4.列表可以进行嵌套
    8.<dl><dt><dd> 定义型列表：使用场合：对列表条目进行简短的说明
                                格式{
                                <dl>
                                    <dt>软件说明</dt>
                                    <dd>简单介绍软件的功能及基本应用</dd>
                                    <dt>软件界面</dt>
                                    <dd> 用于选择软件的外观
                                </dl>
                                }
    9.<hr> 水平分割线标记
    10.<div>分区显示标记，也称之为层标记

 

posted @ 2016-06-27 10:21  我当道士那儿些年  阅读(2019)  评论(0)  编辑  收藏  举报