HTML

big up

于 2016-09-09 13:59:04 发布

阅读量334

点赞数

分类专栏： HTML JAVAEE

本文链接：https://blog.csdn.net/vv494049661/article/details/52486458

版权

HTML 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

JAVAEE

2 篇文章 0 订阅

订阅专栏

HTML简介：

超文本标记语言，不是一种变成语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。是最基础的网页语言。通过标签来定义的语言，代码都是由标签所组成。

基本格式：

<html>
        <head>
            属性信息，辅助性的信息
            引入外部的文件（css、js）
            先加载
    </head>
    <body>
        真正的数据内容（展示用户的数据）
    </body>
</html>

HTML的规范：

1，多数标签都是由开始标签和结束标签的，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
2，想要对被标签修饰的内容进行更加丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
3，属性与属性值之间用”=”连接，属性值可以用双引号或者单引号或者不用引号，一般都会用双引号。或公司规定书写规范。

HTML的标签：

排版标签

<br / >     换行
&nbsp       空格
<hr / >     水平线
<p></p>     段落标签
<div></div>
<span></span>

字体标签

<font></font>
    *color:颜色
    *size:字体的大小
        *最大值：7
        *最小值：1
    *face:字体
    *粗体标签  <b></b>
    *斜体标签  <i></i>
    *滚动字幕  <marquee></marquee>

标题标签

    <h1></h1>
    ........
    <h6></h6>

特殊字符

<           &lt       
>           &gt
&           &amp

列表标签

<dl>
    <dt>上层项目</dt>
    <dd>下层项目</dd>(特点：缩进并且自动对齐)
</dl>

    有序列表和无序列表
        有序：
            <ol type = "a" start = 3>//用abc标号，从c开始
                //type还可以是1，默认是实心圆
                <li></li>
                <li></li>
                <li></li>
            </ol>
        无序：
            <ul>
                <li></li>
                <li></li>
                <li></li>
                ...
            <ul>

图片标签

<img />
        属性：
            src = "图片的地址"
            width = ""
            height = ""
            alt :图片的说明文字

超链接标签

写法：<a></a>
        * 链接资源
            必须要指定属性:href = ""
                * 需要编写协议
                    http
                * 默认file文件的协议
                    如果浏览器可以解析文件，默认会打开文件
                    如果浏览器不能解析文件，弹出下载窗口
                * 支持自定义协议
        * 定位资源
            * 通过name 定义锚点
                * 返回需要使用href="#锚点的名称"

表格标签

<table>:声明表格的范围
    <caption></caption>：表格的标题
    <tr>：行
        <th></th>：单元格 自动居中加粗
    </tr>
    <tr>
        <td></td>：单元格
    </tr>
</table>

table的属性：
            border:1 边框
            width:宽度
            height:高度

        tr的属性：
            align:中间文字的对其方式
        td与th区别：
                  th中间的内容粗体显示
                  th中间的内容默认居中
                  th一般用来表格的表头
        td的属性
            width 宽度
            height 高度
            合并单元格（值得写法：合并几个单元格，值就写几个）
                行合并 rowspan = ""
                列合并 colspan = ""

表单标签

<form>
        *form的属性
            action = "表单的提交路径"
                http://www.baidu.com
                html页面
            method = "提交方式"（面试题）

        *form表单的提交方式有哪些(get post区别)

        *post与get区别
                    *默认方式是get
                    *get方式会把参数列表显示在地址栏上,post方式不会。（请求体）
                    *get方式说明网站的安全级别比较低，post安全级别比较高。
                    *get方式不支持大数据，post方式支持大数据。

                    *推荐使用post方式
                    *get方式是避免不了的 因为有的不可以设置提交方式都默认为get

        *用户输入的内容
            <input type = "类型" />
                type = "text" 普通的文本框
                type = "password" 密码框
                type = "radio"  单选按钮
                    name的属性,值要相同
                    默认值： checked = checked or true
                type = "checkbox"   多选按钮
                    默认值：checked = checked or true
                type = "file" 选择文件
                    name属性指定
                type = "hidden" 隐藏组件
                    name属性指定 value指定
                type = "button" 按钮
                    value = "显示的文字"
                    和js  绑定事件
                type = "reset" value = "重置"
                type = "submit" value = "提交"
                type = "image" src = "" 图片
                <textarea>文本域
                        rows 行
                        cols 列
                        name属性指定    
                </textarea>
        *声明选择框
                    <select name= “”>
                        <option value = ""></option>
                        <option>></option>
                    </select>

//例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body> 
     <form action = "demo07.html" method = "post">
        输入姓名：<input type = "text" name = "username" /><br/>
        输入密码：<input type = "password" name = "password" /><br/>
        选择性别: <input type = "radio" name = "sex" value = "nan" />男
                 <input type = "radio" checked=checked name = "sex" value = "nv"/>女 <br/>
        选择爱好：<input type = "checkbox" name = "love" value = "lanqiu" /> 篮球
                 <input type = "checkbox" name = "love" value = "zuqiu"/> 足球
                 <input type = "checkbox" name = "love" value = "paiqiu"/> 排球
                 <input type = "checkbox" name = "love" value = "wangqiu"/> 网球 <br />

        上传附件：<input type = "file" name = "myfile" /><br / >
        隐藏组件：<input type= "hidden" name = "userId" value = "001" /><br / >

        选择城市：<select name = "city">
                    <option value = "none">--请选择--</option>
                    <option value = "bj" selected = selected>北京</option>
                    <option value = "sh">上海</option>
                    <option value = "tj">天津</option>
                    <option value = "xm">厦门</option>

                </select>
                <br/>
        个人简介：<textarea rows = "10" cols = "10"  name = "desc"></textarea><br/>
        <input type = "reset" />
        <input type = "submit" />
        <input type = "button" value = "删除" /><br/>
        <input type = "image" src = "../imgs/th.png" /> <br/>
     </form>

</body>
</html>

框架标签

<frameset rows = "150,*">
    <frame src = "链接html" name = "top">
    <frame src = "链接html" name = "left">
</frameset>

//例子：
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<frameset rows = "150,*">
    <frame name = "top" src = "top.html">
    <frameset cols = "150,*">
        <frame name = "left" src = "left.html">
        <frame name = "right" src = "right.html"> 
    </frameset>
</frameset>
<body>

</body>
</html>

多媒体文件的使用

//多媒体文件的链接

单击<a href="zxmzf.mp3">最炫名族风</a><br />
单击<a href="jw.wmv">最炫名族风</a>

//多媒体文件的嵌入

<embed src="zxmzf.mp3" width="300" height="300" autostart="true" loop="true"></embed>
<embed src="jw.wmv" width="300" height="300" autostart="true" loop="true"></embed>

src:指定嵌入多媒体文件的名称
width:播放器的宽度
height:播放器的高度
autostart:是否自动播放。默认为no
loop:设置播放次数。为true时，无限制的重复播放。直到离开此网页或者单击停止。

//在网页中加入背景音乐
<bgsound src="zxmzf.mp3" loop="-1" />
Loop 播放次数，0或1都为播放一次，-1循环播放

big up

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录