html快速入门

1:基本结构
<!doctype html>
<html>
    <head>
        <title>rollover</title>
        <script src = "rollover.js"></script>
        <link rel = "stylesheet" href = "rollover.css">
    </head>
    <body>
       <p>your content</p>
    </body>
</html>


2:注释格式:<!--注释-->


3:如何在title中显示一个icon小图标
在这个网址http://www.bitbug.net/上传图片,然后生成ico格式的图标,然后再使用
    <head>
        <title>Pofar</title>
        <link rel = "icon" href = "img/ico/title_image.ico" type = "image/x-icon">
        <!--icon显示在title的左侧-->
        <link rel = "shortcut icon" href = "img/ico/title_image.ico" type = "image/x-icon">
        <!--在收藏夹中显示的icon图标-->
        </head>
    <body>


4:块级元素和内联元素
a:所有的块级元素在默认情况下都是新行开始,并且新行结束(如果后面跟一个内联元素,会自动换行)。内联元素不会
b:块级元素内部可以包含新的内俩元素和块级元素,内联元素只能嵌套内联元素和文本
c:块级元素可以可以控制宽度和边距


5:文本格式化http://www.w3school.com.cn/html/html_formatting.asp
a:格式化文本标签:<b>粗体 、<big>/<small>大/小号字、 <em>着重 、<i>斜体 、
<sub>/<sup> 下/上标字 、<ins>插入字 、 <del> 删除字
b:计算机代码格式:<code>、<kbd>、<samp>计算机代码、<tt>、<var>、<pre>
c:其他格式(鼠标放于上方会有提示):<abr>定义缩写、<acronym>定义首字母缩写、<address>、<bdo>、<blockquote>、<q>、
<cite>、<dfn>


6、链接<a>
<a href = "xiong.html/" (需要在后面再加一个/,否则会发出两次请求)target = ""(规定在哪打开链接:_blank\_parent\_self\_top\framename)>规定链接
<a name  = "name1">规定锚点   <--------   <a href = "所在.html#name1">如果是本页面的锚点则<a href = "#name1">
<a id = "id2">规定锚点    <-----------  <a href = "所在.html.id2">
<a href = "mailto:邮箱地址?subject = 内容">


7、图片<img>
<img src = "" alt = "" title = "">
a、图片与文字混合 <p>图像 <img src="" align="bottom(文本相对于图片的位置)"> 在文本中</p>


                <p>图像 <img src ="" align="middle"> 在文本中</p>


                <p>图像 <img src ="" align="top"> 在文本中</p>
                <p><img src ="" align="left/right">在文中</p>图片的位置
b、把一副图像的不同区域划分成不同的链接
<img src = "" usemap = "#mapname" alt = "">
<map name = "mapname"> 
<area shape = "circle" coords = " x, y, r" href = "" target = "" alt = "">
<area shape = "rect" coords = "x1 ,y1,x2,y2" href = "" target =  "" alt = ""> 
</map>


8、表格
td的colspan跨列 rowspan跨行
table的cellpadding 内容到边框的距离 cellspacing单元格之间的距离
<table border = "6">
    <caption>标题</caption>   
    <tr>
        <td>row1 cell1</td>
        <td>row1 cell2</td>
    </tr>
    <tr>
        <td>row2 cell1</td>
        <td>row2 cell2</td>
    </tr>
</table>


9、列表
有序列表<ol> 无序列表 <ul> 定义列表<dl>
<ol type = ""> (A a I i)
    <li></li>
    <li></li>
</ol>
<ul type = ""> (circle square disc)
    <li></li>
    <li></li>
</ul>
<dl>
<dt> </dt>
<dd> </dd>
<dt> </dt>
<dd> </dd>
</dl>
  
9、容器
<div></div>属于块级元素,主要用于布局
<span></span>   属于内联元素,主要用于在行内定义一个新的格式的文本


10、表单
        <form>
            <select>
                <option value = "a">abtion</option>
                <option value = "b" selected  = "selected">buiding</option>
                <option value = "c">care</option>
            </select>
            <br/>


            <textarea name="inputtext" id="xiong" cols="30" rows="10" >xiongshiyuan</textarea>
            <br/>


            <button type = "button">click</button>
            <br/>


            input 属性 placeholder = "" 用于输入前显示的提示信息
            required = "required" 表示提交前必须输入
            step = "2" 每次增加2


            <input list = "datalist">
            <datalist id = "datalist">
                <option value = "a">a</option>
                <option value = "b">b</option>
            </datalist>
            type = "submit"点击之后会将form中的数据至form中的action程序,value默认为submint<br/>
            <input type = "submit" vlaue = "提交"><br/>


            type = text 单行输入<br/>
            <input type = "text"><br/>


            type = "password"<br/>
            <input type  ="password"><br/>


            type = "radio"单选按钮,同一组radio必须是拥有相同的name<br/>
            <input type = "radio" name = "sex" value = "0" checked>male<br/>
            <input type = "radio" name = "sex" value = "1" >female<br/>


            type = checkbox 复选框 <br/>
            <input type = "checkbox" name = "love" value = "1">jim<br/>
            <input type = "checkbox" name = "love" value = "2">tom<br/>
            <input type = "checkbox" name = "love" value = "3">thon<br/> 


            type = button 按钮<br/>
            <input type = "button" value = "button111"><br/>


            type = data<br/>
            <input type = "date" name = "dd">
        </form>
        还有其他的表单输入,可以自行百度,其中存在浏览器不支持的情况。
11、 其他元素
canvas 画布 利用js在上面作图,可以定义宽度和高度属于块级元素
SVG 画布,与canvas不同,适合渲染速度快,适合游戏和地图类的图形显示


12、多媒体的嵌入,主要是音频和视频
添加音频:a:<audio controls = "controls">
            <source  src="####.mp3" type="audio/mp3/>
            <source src="##.ogg" type = "audio/ogg"/>
            tips(如果不能显示音频的话就会显示tips)
        </audio>
添加视频文件:<video width=""  height="" controls = "controls">
                <source src = "###.mp4" type = "video/mp4"/>
            </video>

猜你喜欢

转载自blog.csdn.net/xiongshiyuan/article/details/79398179