美文网首页
HTML基础标签认识

HTML基础标签认识

作者: ConRon | 来源:发表于2017-06-11 15:26 被阅读0次

    一、

    网站:在万维网上根据规则使用HTML工具制作的网页的集合,是web的基础。
    网页:网站由网页组成,是构成网站的基本元素。网页元素包括:文字、图片、动画音乐程序等。
    WEB主流浏览器(调试工具):IE 、谷歌、火狐、opera、safari
    WEB常用的开发工具:Webstorm、Dreaweaver、Phpstorm、Hbuilder、Sublime
    WEB标准的组成:结构、表现、行为
    HTML:Hyper Text Markup Language的缩写,超文本标记语言。是一种标记语言

    二、

    1.HTML文件的基本结构

    ``` python
        <!DOCTYPE html>    //html5标准网页声明
        <html>  //文件开始标记
        <head lang="en">    //文件头部开始的标记
            <meta charset="UTF-8">      //使用最广泛的网页编码是utf-8
            <title></title>             //定义文件的标题
        </head>         //文件头部结束的标记
        <body>          //文件主体开始的标记
          //文件主体的内容
        </body>              //文件主体结束的标记
        </html> //文件结束标记
    ```
    

    2.基础标签的认识

    1).** <p>段落标签</p>**:用来定义网页中的一段文本,段落与段落之间换行。
    属性:algin ;定义段落中的文本水平方向的对齐方式。
    属性值:left(左对齐)、right(右对齐)、center(居中对齐)

    2).<br/>:换行标签,指行与行之间换行,他是一个单标签。
    两者的区别:
    <br/>:是单标签,小行换行提行;
    <p></p> :是双标签,大行换行分段;

    3).** <h1></h1>---<h6></h6>**:
    <h1></h1>:代表一级标题,级别高,字体 也最大,其他依次递减。
    <h6></h6>:级别最小,字体最小
    属性:algin ;定义标题中的文本水平方向的对齐方式。
    属性值:left(左对齐)、right(右对齐)、center(居中对齐)

    4).<blockquote>文字段落缩进</blockquote>:在标签中包含块级标签,而不是纯文本。

    <blockquote>
      <p>自动缩进p标签内的文本</p>
    </blockquote>
    

    5). 建立无序列表

    <ul type="circle">
       <li>列表项</li>
       <li>列表项</li>
    </ul>
    

    属性:type ;定义列表项的符号。
    属性值:circle(空心圆)、disc(实心圆)、square(实心方块)

    6). 建立有序列表

    <ol type="a">
       <li>列表项</li>
       <li>列表项</li>
    </ol>
    

    属性:type ;定义列表项的符号。 start:用来设置列表编号的起始数值。
    属性值:a、A、i、I

    7).** 建立自定义列表**

    <dl>
       <dt>列表标题</dt>
       <dd>列表项</dd>
       <dd>列表项</dd>
    </dl>
    

    8). 文字特殊样式

    <i>倾斜</i>
    <u>下划线</u>
    <s>删除线</s>
    <big>放大</big>
    <small>缩小</small>
    <strong>加强强调</strong>
    <em>强调倾斜</em>```
    
    #三、
    1.** ```<img/>``` :图片标签 **
    属性:
    src:指定图片源文件;
    alt :图片未加载成功的提示文字;
    width:指定图片的宽度;
    height:指定图片的高度;
    border:指定图片的边框样式;
    alghr:top/bottom/middle;图片位于两端文字在垂直方向的一个上/中/下的对齐方式;
    2.**``` <a></a>```:超链接**
    属性:
    href:连接地址;空连接可以用"#"代替;
    target :_self/_blank;打开方式;_self在当前页面中打开,_blank在新的空白窗口打开。
    3.** URL的格式**
    URL定义:每一信息资源都有统一的且在网上唯一的地址,改地址就叫做统一资源定位符;
    URL的组成:资源类型、存放资源的主机域名、资源文件名;
    URL的语法格式一般为:(带方括号[]的为可选项);
    绝对路径:包含文件的所有信息;
    相对路径:指向相对于原文档统一服务器或者同一文件夹中的文件;
    "../":返回上级目录;"/" :表示下一级目录;
    4. **``<a>标签制作锚点、锚记``**
    ```<a href="#C3">查看 Chapter 3</a> (锚点)href里面的#是固有格式c3是随便起的名字;
    <h2><a name="C3">Chapter 3</a></h2> 锚记)name里的名字与#后面相同```
    #四、
    ####``<table></table>``:表格基本结构
    
    ``` python
    <table>
       <caption>表格标题</caption>
       <tr>
            <td>我是第一行的第一个单元格</td>
            <td>我是第一行的第二个单元格</td>
       </tr>
       <tr>
            <td>我是第二行的第一个单元格</td>
            <td>我是第二行的第二个单元格</td>
       </tr>
    </table>
    

    表格的表头<th>是<td>单元格的一种变体,实质上是一种单元格加粗和居中
    table的属性:
    width:表格的宽度
    height:表格的高度
    align:表格的对齐方式
    border:表格的边框
    bordercolor:边框的颜色
    cellspaning:单元格之前的距离
    csllpadding:单元格与内容之间的距离
    bgcolor:表格的背景颜色
    background:表格的背景图片
    tr的属性:
    height:行的高度
    bordercolor:边框的颜色
    bgcolor:表格的背景颜色
    background:背景图片
    align:文本水平对齐方式
    valign:文本垂直对齐方式
    tr的属性:
    width:单元格的宽
    height:单元格的高度
    bordercolor:边框的颜色
    bgcolor:背景颜色
    background:表格的背景图片
    align:文本水平对齐方式
    valign:文本垂直对齐方式
    colspan:水平合并单元格(跨列)
    rowspan:垂直合并单元格(跨行)
    完整的表格标记
    如果使用thead、tfoot、tbody元素,就必须使用全部的元素

    四、

    表单 (form)输入类型

    单选按钮 (checked默认)

        <input type="radio" name=" " checked />  
        <input type="radio" name=" " /> 
    

    复选按钮 (checked默认)

    <input type="checkbox" name=" " checked />
    <input type="checkbox" name=" " />

    密码输入框

    <input type="password" />

    提交按钮

       <input type="submit" />
    

    重置按钮

        <input type="reset" />
    

    普通按钮

      <input type="button" />
    

    图片按钮(有提交功能)

      <input type="image" />
    

    多行文本框

      <textarea cols="一行多少字符" rowa="多少行"><textarea>
    

    列表框

            <select size="一次显示多少个" multiple="可多选">
                    <option selected>默认的下拉菜单1</option>
                    <option>下拉菜单2</option>
            </select>
    

    单行文本框

        <input type="text" size="文本框显示的长度" maxlength="最长字符数"/>
    

    隐藏域

        <input type="hidden"/>
    

    文件域

        <input type="file"/>

    相关文章

      网友评论

          本文标题:HTML基础标签认识

          本文链接:https://www.haomeiwen.com/subject/uqycqxtx.html