HTML

一什么是HTML

超文本标记语言,{最基础的网络语言}。

二.常用的网络名词

    1. WWW 万维网

    2. URL 统一资源定位器, 网址,路径

    3. HTTP 超文本传输协议

    4. W3C 万维网联盟(组织) 制定一系列规范

三 HTML的骨架(基本结构)

    <html>

        <head>

            <title></title>

        </head>

        <body>

            用户能够看到的内容

        </body>

    </html>


六.HTML的语法

    1. 单标记 <标签名/> 例如:<br />

     2. 双标记 <开始标记></结束标记> 例如:<body> </body>

七. 常用标记

    1. h1-h6 标题标记 注意:h标记不是用来控制文字大小,是控制标题等级。

    2. br 换行 折行

    3. p 段落

    4. hr 水平线

    5. b strong 字体加粗

    6. i em 字体倾斜

    7. del 删除线

    8. u 下划线

strong,em 是带有语气和语意的标记,在描述重要的文本时使用

八. 网页的基本元素

    1. 文字 2. 图片 3. 链接

注意:当听到html标签,标记,元素,节点时,都是一个意思。

九.插入图片

    <img src="图片的路径" />

    <标签名 属性="属性值" />

    Img里的属性

  1. src 图片来源
  2. alt 替换文本(当图片不能正常显示时)
  3. title 图片标题
  4. width 设置图片宽度
  5. height 设置图片高度
  6. border 图片的边框

注意:代码中所有的标点符号必须在英文输入法状态下书写!!!

十.路径

    1. 绝对路径:带有盘符的和完整的网络地址

eg:F:\day01\1.jpg http://www.baidu.cn/1.jpg

    2. 相对路径: 不带有盘符并且不能跨盘符

eg:img/1.jpg

注意: ../跳出上一级文件夹 ../../跳出上两级文件夹

十一. 注释

        注释是给编写代码的人员看的,页面中不显示。

        <!--要注释的内容-->

十二. body里的属性

  1. bgcolor 背景颜色
  2. background 背景图片

十三. 特殊字符

        1. &nbsp; 空格

        2. &gt; 大于号

        3.&lt; 小于号

        4.&copy; 版权

        5.&reg; 注册

十四.a链接

    <a href="链接的地址"></a>

A链接里的属性

  1. Href 在自己的窗口打开。
  2. target="_blank" 新窗口打开

链接的种类

  1. 本地链接 href="../day02/01-特殊字符.html"
  2. 网络地址链接 href="http://www.baidu.cn"
  3. 空连接 假链接 href="#"
  4. 图片链接 <a href="要链接的地址"><img src="图片路径"</a>
  5. 锚点链接 <a href="#id名"></a>

十五.列表

    1. 无序列表

        <ul>---声明无序列表

            <li></li>---列表项

            <li></li>---(li可以有多个)

        </ul>

    2. 有序列表

        <ol>---声明有序列表

            <li></li>---列表项

            <li></li>--(li可以有多个)

 

        </ol>

3. 定义列表(自定义列表)

    <dl>---声明定义列表

        <dt></dt> --- 项目名称

        <dd></dd> ---对项目的描述(dd可以有多个)

    </dl>

十六. 表格

    1. 表格的基本结构

        <table> --- 声明表格

            <tr> ---- 行

                <td></td> ---列

            </tr>

</table>

注意:表格里要存放的内容都在td里)

2. table里的属性

    1. border 边框

    2. width 宽

    3. height 高

    4. align 水平对齐方式 left左 center 居中right 右

    5. bgcolor 背景颜色

    6. background 背景图片

    7. cellspacing 单元格与单元格之间的距离

    8. cellpadding 内容与单元格之间的距离

    3. tr里的属性

        1. height 高度

        2. bgcolor 背景色

        3. background 背景图片

        4. aligin 水平对齐方式 left 左 center 居中 right 右

        5. valign 垂直对齐方式 top上 middle中 bottom下

    4. td里的属性

        1. height 高度

        2. bgcolor 背景色

        3. background 背景图片

        4. aligin水平对齐方式 left 左 center 居中 right 右

5. valign 垂直对齐方式top上 middle中 bottom下

        6. width 宽度

        7. colspan 跨列

        8. rowspan 跨行

十七.表单

    1. 声明表单

    <form action="表单提交地址" method="表单提交方式" name="表单的名字"></form>

    2. 表单元素

        1. 文本框 <input type="text" name="" value="" />

        2. 密码框 <input type="password" name="" />

        3. 单选按钮 <input type="radio" name="" value="" />

        4. 多选按钮 <input type="checkbox" name="" value="" /> 默认被选中属性:checked="checked"

        5. 上传文件 <input type="file" name="" />

6.下拉选项 <select name=" ">

                    <option value=" "></option>

                </select>

例如:城市 <select name="city">

                    <option value=" ">--请选择城市--</option>

                    <option value="bj">--北京--</option>

                    <option value="sh">--上海--</option>

                </select>


7.多行文本(文本域)

<textarea rows="" cols=""></textarea>

例如:自我介绍:<text rows="10" cols="20">>/textarea>


代码里自动默认的单位是像素!

 


 

yang, xiaoyun

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: