首页 > 代码库 > web基础--html

web基础--html

2024-08-20 11:47:55   237人阅读

WebBasic

 

1.web应用体系

技术分享

课程大纲

    1.web基础：做网页
    2.结构：
        a.html
            勾勒网页结构及内容
        b.css
            美化网页
        c.JavaScript<重点>
            呈现动态数据和效果
    3.JavaScript:
        --Java程序员使用JS实现页面的业务逻辑
        --美工做出静态页面(html+css)

设备

    Chrome、thinkpadX、thinkpadT、mac

web三要素和http

技术分享

2.html

    html(HyperText Markup Language)
    1.html与xml
        1）XML可扩展标记语言(传输或存储数据)
        a.标签、属性可扩展，元素间的嵌套关系可扩展
        b.标签
            双标签：<标签名></标签名>
            单标签：<标签名/>
            关系：<标签名/> == <标签名>内容为空</标签名>
        c.属性
            定义在开始标签,属性名无序不重复,属性名="属性值"
        d.元素
            <标签名 属性名="属性值">内容</标签名>
        2）HTML超文本标记语言(显示数据)
        a.语法固定
            标签，属性，元素嵌套关系固定
        b.html基本结构
            <!-- html是唯一的根 -->
            <html>
                <head>
                    <!-- 设置文档标题，编码，引入的资源 -->
                </head>
                <body>
                    <!-- 页面上显示的内容 -->
                </body>
            </html>

html标签

    1.<!DOCTYPE>指定版本：带X的是w3发布的，其他的都是各个公司发布的
    <!DOCTYPE html>声明为html5文档
    2.<title>指定网页标题
        <title>标题</title>
    3.乱码问题
        1>指定html文档格式为utf-8
        2><head>
            <!-- html4标准 -->
              ×<meta http-equiv="content-type" content="text/html;charset=utf-8"></meta>
            <!-- html5标准 -->
            √<meta charset="utf-8"/>
          </head>
    
    文本处理
    4.标题元素
    <h#>...</h#>  #=1,2,3,4,5,6
    5.段落元素
    <p></p>
    6.列表
    有序列表<ol>、无序列表<ul>、列表项<li>
    <!-- 有序列表 -->
    <ol>
        <li>AA省</li>
        <li>BB省</li>
    </ol>
    <!-- 无序列表 -->
    <ul>
        <li>AA市</li>
        <li>BB市</li>
    </ul>
    <!-- 列表嵌套 -->
    <ol>
        <li>
            AA省
            <ul>
                <li>AA市</li>
            </ul>
        </li>
        <li>BB省</li>
        <li>CC省</li>
    </ol>  
    7.div(块级标签)
    1)块级元素<p>、<div>、<h#>
    2)行内元素<span>、<a>
    <div></div>多用于确定网页结构
    8.行内元素
    1)<span></span>
    你好<span style="">你好</span>你好
    加粗:<strong></strong>、<b></b>
    斜体:<i></i>、<em></em>
    下划线:<u></u>
    删除线:<del></del>
    2)空格折叠
    内容内多个空格当作一个空格处理
    <br/>换行
技术分享
    9.图片标签
    相对路径与绝对路径
    <img src="http://www.mamicode.com/image‘s path" width="宽" height="高">
    10.超链接元素
    <a href="http://www.mamicode.com/链接http://www.baidu.com" target="打开方式:_blank/_self">文本</a>
    锚点:
        <a name="top"></a>
        <a href="http://www.mamicode.com/#top">去顶部</a> === <a href="http://www.mamicode.com/#">去顶部</a>
    11.表格
    <table border="像素:1px" width height align:对齐 cellpadding:单元格与内容间距 cellspacing:单元格间距>
        <tr align/valign:对齐>
            <td align/valign/width/height/colspan跨行/rowspan跨列></td>
        </tr>
    </table>
    表分组:目的是为了方便组内元素设置样式和编程(JS)
    <table>
        <thead><!-- 标题行 -->
            <tr>
                <td></td>
            </tr>
        </thead>
        <tbody><!-- 数据行 -->
            <tr>
                <td></td>
            </tr>
        </tbody>
        <tfoot><!-- 结尾行(总计) -->
            <tr>
                <td></td>
            </tr>            
        </tfoot>
    </table>
技术分享

 

继续学习

http://http://www.w3school.com.cn/

web基础--html


联系
我们