html1

HTML: Hyper Text Markup Language （超文本标记语言）由大量的标签组成，每一个标签都有开始标签和结束标签。

总体格式

<标签1>    

            <标签2>

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

            </标签2>

</标签1>

第一个HTML

<!--
    1、这是一个注释
    2、第一行表示是html5语法
-->
<!doctype html>
<!--根 -->
<html>
<!--头 -->
    <head>
        <title>第一个HTML</title>
    </head>
<!--体 -->
    <body>
        文本内容-->hello world
    </body>
</html>

基本标签

<!doctype html>

<html>

    <head>
        <title>基本标签</title>
    </head>

    <body>
        <!--段落标记-->
        <p>段落1</p><p>段落2</p><p>段落3</p>
        
        <!--标题字-->
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h4>标题4</h4>
        
        <!--换行-->
        hello<br>world!
        
        <!--水平线-->
        <hr color="red" width="50%">
        
        <!--样式标签+居中标签-->
        <center>
            <font color="red" size="10px">表格样式</font>
        </center>
        
        <!--预留格式-->
        <pre>编辑的和浏览显示的是一致的</pre> 
        
        <!--粗体字-->
        <d>粗体字</d>
        
        <!--斜体字-->
        <i>斜体字</i>
        
        <!--插入字-->
        <ins>插入字</ins>
        
        <!--删除字-->
        <del>删除字</del>
        
        <!--右上角加字-->
        m<sup>2</sup>
        
        <!--右下角加字-->
        2<sub>n</sub>
    </body>
    
</html

表格

<!doctype html>
<html>

    <head>
        <title>表格样式+实体符号</title>
    </head>

    <body>
    <!-- 小于、空格、大于 -->
        a &lt; b  &nbsp; b &gt; c
        
    <!-- 基本表格:3行3列-->
        <!-- align针对整个表格以及表格内容，其他需要居中可以用<center>标签-->
        <table border="5px" width="50%" height="250px" align="center">
            <tr>
                <th>单元格1</th>
                <th>单元格2</th>
                <th>单元格3</th>
            </tr>
            
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
        
    <!-- 合并单元格:3行3列-->    
    <table border="5px" width="50%" height="250px" align="center">
            <tr>
                <th>单元格1</th>
                <th>单元格2</th>
                <th>单元格3</th>
            </tr>
            
            <tr>
            <!--左右合并-->
                <td colspan="2">test</td>
            <!--上下合并-->
                <td rowspan="2" >test</td>
            </tr>
            
            <tr>
                <td>test</td>
                <td>test</td>
                
            </tr>
        </table>
        
    </body>
    
</html>

图片

<!doctype html>
<html>
<head>
    <title>图片</title>
</head>
<!--
    1、设置宽度和高度时，只需要设置宽度，高度会等比例缩放
    2、img标签就是图片标签
    3、src属性是图片的路径
    4、width属性设置宽度，height属性设置高度
    5、title属性设置鼠标悬停信息
    6、alt属性设置加载失败时显示的信息
    7、欲使图片居中，加入<center>标签
-->
<body>
    <center>
        <img src="D:\桌面\前端\HTML\img\baidu.png" width="500px" title="我是百度图片" alt="图片找不到">
    </center>

</body>
</html>

超链接

<!doctype html>

<html>
    <head>
        <title>超链接</title>
    </head>
    
    <body>
        <!--链接到网络中的某个资源-->
        <a href="https://www.baidu.com/">百度链接</a>
        
        <!--链接到本地的某个资源-->
        <a href="D:\桌面\前端\HTML\005.图片.html">本地链接</a>
        
        <!--图片做超链接-->
        <a href="https://www.baidu.com/" target="_self">
            <img src="D:\桌面\前端\HTML\img\baidu.png" width="120px"/>
        </a>
        
    </body>
</html>

注意：

ref标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系

src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。 src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。

posted @ 2022-06-10 15:33 jason饼干大怪兽阅读(42) 评论(0) 收藏举报

刷新页面返回顶部

jasonBin

html1

总体格式

第一个HTML

基本标签

表格

图片

超链接

公告