html基础知识

最新推荐文章于 2024-07-18 20:18:47 发布

泡壶热茶__zzzz

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量342

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/qq_36257276/article/details/53382343

版权

客户端网页编程

常见的web服务器

apache ：世界上排名第一的web服务器
jboss：web servies容器，也是ejb的容器。
tomcat：开源免费的一个服务器，apache的一个基金会项目
IIS：Internet 信息服务。微软主推的一个服务器
webLogic：开发、管理、部署一些大型的web应用。分布式的服务器

HTML

什么是HTML

html本质上是一种描述网页的语言，
html超文本标记语言。
（Hypertext markup language）
html属于标记语言，不属于编程语言。---xml也是标记语言
html文档也称为web网页

HTML标签的含义

第一个标签是开始标签，第二个标签是结束标签。不是所有的标签都需要结束。
还有自开闭标签。
html注意格式规范。必须要成套出现（如果是一套的）
html标签最好是区分一下大小写。也就是前面小写后面就要小写。

HTML的版本更替

html1 1991
html2 1992
html3
html4
xhtml，融合了html 和 xml的技术
最新的 html5 （W3C的标准）---标准的网页开发  严格的模式

作用：
1. 主要用来声明网页的版本以及网页应该遵循的规范。申明有助于浏览器正确的显示我们的网页
2. 网络上有各种不同类型的文件，浏览器都可以正确的打开。如果能够正确申明html，那浏览器解析就更加准确。
3. DOCTYPE：不区分大小写。但是本身要大写

meta标签

meta是一个不需要闭合的标签。

1.提供html的元元素，元元素是不会显示出来的。只会被浏览器解析。
2.meta标签除了设置当前编码级以外还可以设置网页的关键字，网页的描述信息，作者的信息。元元素可以被搜索引擎（关键字），或者其他web服务调用

HTML基础

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">    

    <meta charset="UTF-8">      
    <meta name="description" content="this is xx web pro">
    <meta name="keywords" content="html,css,java">
    <meta name="auther" content="zhangbailin">
    <title>嘻嘻哒</title>
</head>
<body>
    <!--只是html的注释-->
    <!--这是标题标签 h1-h6-->
    <h1><a name="cc" style="color:red">这是一个标题</a></h1>
    <h2>这是第二个标题</h2>
    <h6>最多只有h6</h6>
    <!-- 段落标签-->
    <p id="p1">this is body cotent</p>
    <p id="p2">this is new message</p>
    <!--超链接-->
    <a href="www.baidu.com">百度</a>
    <!--超链接，可以链接到其他地址-->
    <a href="#">表示访问本页</a>
    <!--跳转本页需要加上#-->
    <!--通过a标签设置锚点，需要两个a标签，一个a标签设置name属性，一个a标签跳转到当前name属性对应的值-->
    <h1><a href="#cc">回到顶部</a></h1>

    <!-- 显示图片-->
    <!-- alt属性是图片没加载出来的时候显示的文字-->
    <!-- ../ 加在图片路径前面表示回到上一级目录，如果要再回到上面就要继续../-->
    <img src="img/2.jpg" width="230" height="420" title="指到图片的提示" alt="这是调试图片"/>
    <img src="img/xyz.jpg"/>
    <img src="img/re.jpg" alt="图片gg"/>
    <!-- hr 是分界线的-->
    <hr width="500px" />
    <hr/>
    <!-- 元素的内容，浏览器会把空格和换行解析了，想要换行的话必须用</br> 他也是一个自开闭的标签-->

    <!-- &nbsp; 这才表示空格-->
    <br>this is &nbsp; </br>换行标签</p>


    <!-- abbr 标签用来表示一个缩写词-->
    <abbr title="中国">zg</abbr>

    <!-- address 他表示该文档作者和所作者的信息-->
    <address>
        Written by<a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
        Visit us at:<br>
        example.com<br>
        Box 564,Disneyland<br>
        USA
     </address>

    <!-- b标签定义粗体，但是没有其他选择了才选择这个-->
     <b>this is b</b>  <br>
    <!-- strong 也是定义粗体的标签 这个兼容性好点-->
    <strong>this is strong</strong>
    <br/>
    <!-- mark  标注：颜色为黄色 所以网页的颜色设计就需要进行考虑了-->
    <mark>content element mark</mark>
    <!-- em 是斜体标签-->
    <br/>
    <em>这是斜体标签</em>

    <!-- ltr 表示文本从左开始 rtl表示从右开始-->
    <bdo dir="rtl">
        this text will go right-to-left
    </bdo>

    <br/>
    <!-- 定义与文本中其余部分不同的部分-->
    <p>这是普通文本<i>这部分是斜体文本</i>呢</p>

    <br/>
    <!-- 定义已经被插入文档中的文本-->
    <!-- del表示过时了的东西 会加上删除线-->
    <p>跳楼价来了，不要<del>998</del>，只要<ins>298</ins></p>

    <br/>
    <!-- 可预格式文本，元素中的文本会保留空格和换行符，而文本也会呈现等宽字体-->
    <pre>
        3
        +
        2
        =
        5
    </pre>
    <br/>
    <!-- 定义一个短的引用-->
    <p>夜已深，情已断，洗洗睡吧,<q>床前明月光</q></p>
    <br/>
    <!-- u标签， 加上下划线,一般不使用，别人会以为是超链接-->
    <p>夜已深，<u>情已断</u>，洗洗睡吧,<q>床前明月光</q></p>
</body>
</html>

表单区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--form标签 表示当前是一个表单区域，是允许用户在表单中输入信息（文本域，下拉列表，单选框，复选框）的元素-->
<!--action 表示当前表单获取到值后，提取到服务器的地址-->
<form action="">
    <!-- 在form标签里面写表单元素-->
    <!-- 文本框-->
    <!-- readonly 表示只读,可以简单写readonly 不需要写="readonly",可以复制-->
    <!-- disabled 表示禁用的意思，无法修改也无法复制-->
    <!-- values 表示设置一个默认值，会占用空间的-->
    <!-- placeholder 表示设置一个提示，不占用任何空间的-->
    <label>用户名：</label>
    <input type="text" name="这个数据是和服务器进行交互的" id="唯一性标记"  placeholder="用户名" value="小王"/>
    <label for="">密码：</label>
    <input type="password" name="" id=""  maxlength="6" placeholder="密码" />

    <!-- 文本域-->
    <!-- 也有readonly ，disabled，没有values属性-->
    <textarea name="textarr" id="2" cols="30" rows="10">

    </textarea>

    <!-- button input 标签都可以设置为按钮-->
    <!-- 这种也会有默认提交的功能，找寻action的地址-->
    <button>提交</button>
    <button>取消</button>

    <input type="button" value="修改"/>
    <!-- 重置按钮只能通过input来实现-->
    <input type="reset" value="重置"/>
    <!-- 只有submit才能将所有数据提交到action的服务器-->
    <input type="submit" value="提交"/>

    <!-- 下拉框-->
    <!-- multiple表示可以多选，size表示下拉框的大小-->
    <select name="" id="" size="3" multiple="multiple">
        <option>中国</option>
        <option>美国</option>
        <option>日本</option>
    </select>

    <!-- 就是一个划分区域的-->
    <fieldset style="width: 200px">
        <legend>登录</legend>
        <form action="">
            <select name="" id="" size="3" multiple="multiple">
                <option>中国</option>
                <option>美国</option>
                <option>日本</option>
            </select>
        </form>
    </fieldset>
    <!-- 单选按钮-->
    <!-- 设置为同一个name属性就是单选了-->
    <label for="">男</label>
    <input type="radio" name="sex"/>
    <label for="">女</label>
    <input type="radio" name="sex"/>


    <!-- 复选框-->
    <label for="">篮球</label>
    <input type="checkbox"/>
    <label for="">足球</label>
    <input type="checkbox"/>
    <label for="">棒球</label>
    <input type="checkbox"/>

</form>
</body>
</html>

iframe简单框架涉及

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <a href="baseStudy.html" target="if">学校</a>
    <a href="form.html" target="if">班级</a>
    <iframe name="if" src="baseStudy.html" frameborder="0" width="800px" height="500" ></iframe>
    <iframe name="if1" src="baseStudy.html" frameborder="0" width="300" height="300"></iframe>

    <!-- link 标签引入外部的css文件-->
    <link rel="stylesheet" href=""/>

</body>
</html>

表格的设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- table 表格-->
    <!-- tr表示行-->
    <!-- td表示列-->
    <table border="1">
        <tr>
            <td>名字</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>韦德</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>詹姆斯</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>科比</td>
            <td>男</td>
            <td>35</td>
        </tr>
    </table>
    <br/>
    <!-- thead tbody tfoot 语义化标签，有利于搜索引擎查询，可以快速定位内容-->
    <table border="0">
        <thead>
            <tr>
                <td>名字</td>
                <td>性别</td>
                <td>年龄</td>
            </tr>
        </thead>
        <tbody id="tb1">
            <tr>
                <td>韦德</td>
                <td>男</td>
                <td>35</td>
            </tr>
            <tr>
                <td>詹姆斯</td>
                <td>男</td>
                <td>35</td>
            </tr>
            <tr>
                <td>科比</td>
                <td>男</td>
                <td>35</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>123</td>
                <td>123</td>
                <td>123</td>
            </tr>
        </tfoot>
    </table>
    <br/>

    <table border="1">
        <thead>
        <tr>
            <!-- th默认居中加粗，td的话就是靠左不加粗-->
            <th>名字</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        </thead>
        <tbody id="tb1">
        <tr>
            <td>韦德</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>詹姆斯</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>科比</td>
            <td>男</td>
            <td>35</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        </tfoot>
    </table>

    <table border="3" width="500px">
        <colgroup>
            <!-- col 表示控制颜色-->
            <col style="background-color: aqua"/>
            <col style="background-color: blueviolet"/>
            <col  style="background-color:coral"/>
        </colgroup>
        <thead>
        <tr>
            <!-- th默认居中加粗，td的话就是靠左不加粗-->
            <th>名字</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        </thead>
        <tbody id="tb2">
        <tr>
            <!-- 合并列单元格-->
            <td colspan="2">韦德</td>
            <!--<td>男</td>-->
            <td>35</td>
        </tr>
        <tr>
            <!-- rowspan 合并行单元格，参数表示合并多少行-->
            <td rowspan="2">詹科比</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <!--<td>科比</td>-->
            <td>男</td>
            <td>35</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        </tfoot>
    </table>


</body>
</html>

泡壶热茶__zzzz

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html基础知识

客户端网页编程常见的web服务器apache ：世界上排名第一的web服务器jboss：web servies容器，也是ejb的容器。tomcat：开源免费的一个服务器，apache的一个基金会项目IIS：Internet 信息服务。微软主推的一个服务器webLogic：开发、管理、部署一些大型的web应用。分布式的服务器 HTML什么是HTMLhtml本质上是一种描述网页的语言，
复制链接

扫一扫