码迷,mamicode.com
首页 > Web开发 > 详细

html基础(一)

时间:2018-10-10 19:08:56      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:section   对话   www   tag   对话框   单元格   not   time   meta   

   html是用来描述网页的一种语言,指的是一种超文本标记语言(Hyper Text Markup Language)标记语言是一套标记标签,THML标签是由尖括号包围的关键字,通常是成对出现的,标签中的第一个标签是开始标签,第二个标签是结束标签也可以叫做开放标签和闭合标签。

   例如:    
            <html> 与 </html> 之间的文本描述网页
            <body> 与 </body> 之间的文本是可见的页面内容
            <h1> 与 </h1> 之间的文本被显示为标题
            <p> 与 </p> 之间的文本被显示为段落

 HTML的标记        
        1.文件标记
            <!DOCTYPE html> </html> 表示告诉浏览器这是一个html文件,浏览器的兼容性问题。
            <html>            </html> 表示文本是网页
            <head>            </head> 表示文件头部
            <title>        </title>    表示标题
            <body>        </body>      表示文件正文部分
        2.排版标记
            <!--注释-->                 表示对文件内容进行注释
            <br/>                     表示换行,使元素换行显示
            <p>        </p>             表示一个段落,后面的元素会换行显示,也就是说会留出一行的空格
            <hr/>                     表示在页面中间插入一条横线
            <center></center>        表示内容居中显示
            <pre>    </pre>             表示预设格式,也就是说让内容按照预设格式排版
        3.字体标记
            <strong>    </strong>    表示强调语气,是文字加粗
            <b>        </b>  表示加粗,标签却不同这样的目的是方便以后有一些自动读取系统根据不同的标签提取信息
            <i>        </i>             表示斜体
            <em>         </em>         表示斜体(强调)
            <u>        </u>             表示为元素添加一条下划线
            <ins>        </ins>         表示强调下划线
            <h1`h6>        </h1`/h6>    表示一级到六级的标题
            <font>        </font>      表示字体标记(可以控制字体大小、颜色、式样)
            &nbs;                     表示空格
            <bdo>        </bdo>       表示正反字体
            <big>        </big>         表示字体稍微加大
            <small>        </small>     表示字体稍微缩小
            <strike>    </strike>    表示为文字添加一条删除线,较少使用
            <sub>        </sub>       表示添加下标
            <sup>        </sup>       表示添加上标
        4.清单标记
            <ol>        </ol>          
                                    表示有序清单,清单会按照阿拉伯数字或英文字母或者罗马数字,但是这个标记要结合li标签使用
            <ul>        </ul>        
                                    表示无序清单,只会在清单前面出现小圆点,而没有序号,这个标记同样要结合li标签使用
        5.表格标记
            <table>        </table>     表示表格可以定义表格的一些参数
                border                表示表格框的厚度
            <caption>    </caption>    表示表格的标题
            <tr>        </tr>        表示表格的行
            <th>        </th>          表示表格的列,但是这个列中的内容会稍微加粗
            <thead>        </thead>     表示第一行列表
            <td>        </td>         表示标准单元格
                clospan                表示可以横跨的列数
                align                表示对齐的方式
                
        6.表单标记
            <form>        </form>         表单标签可以定义表单的运行模式
                action                表示提交的地址
                method                表示提交方式    
            <textarea>    </textarea>    表示文字域,可以在该范围写大量的文字
            <input/>                表示输入框
                type                表示数据的类型
                submit                表示确定、提交
                reset                表示重置
                text                表示一般文本
                button                表示按钮
                value                表示给数据赋值
                placeholder            表示提示内容
                flie                表示文件
                password            表示密码
            <select>    </select>    表示下拉列表,要结合option使用
        7.其他标记
            <img/>                    表示图片标记
                src                    表示路径
                height                表示高度
                width                表示宽度
            <audio>        </audio>    表示音频
                controls            表示控制、设置
        <vedio controls="controls"><sourse src="?"> 
                                    表示视频
            <a>        </a>             表示超链接
                href                表示需要链接的目标
                #          id            表示目标的地址
            <base>        </base>        表示为页面设置路径
            <meta>        </meta>        表示标签优化

  8.html5新标记

   <canvas>  </canvas>  表示定义图形(画布)

   <datalist>  </datalist>  定义选项列表 input 可能的值 

   <keygen>  </keygen>  规定用于表单的密钥对生成器字段

   <output>  </output>  定义不同类型的输出,比如脚本的输出

<article> 定义页面独立的内容区域。
<aside> 定义页面的侧边栏内容。
<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置。
<command> 定义命令按钮,比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框,比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption> 定义 <figure> 元素的标题
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义导航链接的部分。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释(中文注音或字符)。
<rt> 定义字符(中文注音或字符)的解释或发音。
<rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节(section、区段)。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。

 

  
        例如:一个简单的登录页面
            <!DOCTYOP html>
            <html>
                <head>
                    <title>这是窗口标题</title>
                </head>
                <body background="这是背景图片的路径">
                    <center>
                        <form action="login.jsp" method="post">
                            <table border="1">
                                <tr>
                                    <td>用户名:<input type="text" name="uname" ></td>
                                </tr>
                                <tr>    
                                    <td>密&nbsp;码:<input type="password" name="pwd"></td>
                                </tr>
                                <tr>
                                    <td>验证码:<input type="text" name="code"></td>
                                </tr>        
                                <tr>
                                    <td><img src="这是图片的路径"></td>
                                </tr>
                                <tr>
                                      <td colspan="2" align="center">
                                          <input type="submit" value="登录">
                                        <input type="reset" value="重置">
                                        <input type="button" value="注册">
                                      </td>
                                </tr>               
                            </table>
                        </form>
                    </center>
                </boby>        
            </html>    
    <!--注释内容-->
        给自己看,防止自己看不懂;方便记忆与理解。
        给别人看,方便别人去理解;保证代码能运行。
        良好的书写习惯能够减少代码的出错率。        
    行内元素和文档流的概念
        ·文档流就是将窗体自上而下分为一行行,并在每行中按照元素从左至右的顺序排放,即文档流。
        ·块级元素具有以下特点:在标准的文档流里面
            -总是在新行上开始,占据一整行
            -高度行高以及外边距和内边距都可控制
            -宽度始终与浏览器宽度一样与内容无关
            -它可以容纳内联元素和其他块级元素
        ·行内元素的特点
            -和其他元素都在一行上
            -行内元素只能容纳文本或者其他行内元素
            -宽度只与内容有关
            -不可以设置宽度;其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置内外边界,但是内外外边界不对上下起作用只能对左右起作用。(内边界Ie6中对上下不起作用)    

html基础(一)

标签:section   对话   www   tag   对话框   单元格   not   time   meta   

原文地址:https://www.cnblogs.com/skynomonarch/p/9768132.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!