WebBasic

最新推荐文章于 2022-02-09 10:48:21 发布

AraonLee

最新推荐文章于 2022-02-09 10:48:21 发布

阅读量812

点赞数

分类专栏： web 文章标签： html web应用体系

本文链接：https://blog.csdn.net/txtxttxtxtxt/article/details/53143023

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

WebBasic

1.web应用体系

课程大纲

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

设备

Chrome、thinkpadX、thinkpadT、mac

web三要素和http

![](http://i.imgur.com/otvX8lK.jpg)

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/>换行
![行内元素](http://i.imgur.com/VmEjjlK.jpg)
9.图片标签
相对路径与绝对路径
<img src="image's path" width="宽" height="高">
10.超链接元素
<a href="链接http://www.baidu.com" target="打开方式:_blank/_self">文本</a>
锚点:
    <a name="top"></a>
    <a href="#top">去顶部</a> === <a href="#">去顶部</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>