HTML常用标签

最新推荐文章于 2021-11-01 18:57:32 发布

搬码日记

最新推荐文章于 2021-11-01 18:57:32 发布

阅读量468

点赞数 13

文章标签： HTML常用标签笔记

本文链接：https://blog.csdn.net/KamRoseLee/article/details/79513823

版权

font字体标签

font标签是字体标签。它可以用来显示文本内容。还可以简单的修改文本的字体，大小，以及颜色。

需求1：在网页上显示我是字体标签，并修改字体为宋体，颜色为红色。

<body>

    <!-- 字体标签

    需求1：在网页上显示 我是字体标签 ，并修改字体为 宋体，颜色为红色。

       font标签是字体标签，

           face属性，是修改文本的字体

           color属性，是修改文本的颜色

           size属性是修改文本的大小

     -->

    <font face="宋体" color="red" size="7">我是字体标签</font>

</body>

特殊字符

<body>
    
    <!-- 特殊字符
        < 特殊字符： <
        > 特殊字符： >
        空格特殊字符： 
     -->
    这是<br>内       容
</body>

标题标签

需求1：演示标题1到标题6的

<body>
    <!-- 标题标签
        h1 - h6 都是标题标签
        h1 最大
        h6 最小
        align属性是对齐 属性。
            默认是left
            right是右对齐 
            center是居中对象
     -->
    <h1 align="left">标题1</h1>
    <h2 align="right">标题2</h2>
    <h3 align="center">标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
</body>

超链接（ **** 重点，必须掌握 * ）

需求1：普通的超连接。

<a>

<body>
    <!-- 超链接
        a标签是超连接标签
         href属性连接的地址
         target属性设置连接的目标对象
             默认是_self
             _blank 表示打开一个新窗口去跳转
     -->
    <a href="http://www.baidu.com/">百度</a>
    <a href="http://www.baidu.com/" target="_blank">百度(新窗口)</a>
</body>

列表标签

需求1：使用无序，列表方式，把东北F4，小沈阳，赵四，刘能，宋小宝。展示出来

ul - li

ul 是列表序列

li 是列表中的每一项

<body>
    <!-- 
    需求1：使用无序，列表方式，把东北F4，小沈阳 ，赵四，刘能，宋小宝 。展示出来
        ul 是无序列表
        li 是列表项
        type是设置列表项前面的符号 
     -->
    <h2>东北F4</h2>
    <ul type="none">
        <li>小沈阳</li>
        <li>赵四</li>
        <li>刘能</li>
        <li>宋小宝</li>
    </ul>
</body>

img标签

img标签可以用来显示图像

alt 当图片找不到的时候，用来替代图片显示的文本内容

src 要显示的图片的url地址

需求1：使用img标签显示一张美女的照片。并修改宽高，和边框属性

<body>
<!--     需求1：使用img标签显示一张美女的照片。并修改宽高，和边框属性
    
        src 图片的地址
        width 图片的宽度 
        height    图片的高度
        border 是图片的边框大小
        
        
        地址分为相对路径和绝对路径两种。
        
        相对路径
            .     当前目录
            ..    上一级目录
            文件名    相当于 当前目录下的文件（相当于./文件名）

        绝对路径：
        c:\\xxx\\文件名                    错误
        http://ip:port/工程名/资源名        正确
        http://localhost:8080/img/14.jpg
 -->
    <img alt="这是美女1号" src="1.jpg" width="100" height="130" border="1"/>
    <img alt="这是美女2号" src="../2.jpg" width="100" height="130" border="1"/>
    <img alt="这是美女3号" src="../imgs/3.jpg" width="100" height="130" border="1"/>
    <img alt="这是美女4号" src="../imgs/4.jpg" width="100" height="130" border="1"/>
    <img alt="这是美女5号" src="http://192.168.10.168:8080/img/14.jpg" width="100" height="130" border="1"/>
</body>

表格标签（ **** 重点，必须掌握 * ）

需求1：做一个带表头的，三行，三列的表格，并显示边框

需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距。

<body>
<!--         需求1：做一个 带表头的 ，三行，三列的表格，并显示边框
            
            表格 是table
                border是边框
            表格的行 是tr
            一行中的每一个列叫单元格 td
            表头使用 th
            center标签包含的内容都是居中显示 
            b标签是字体加粗效果

            cellspacing 设置单元格的间距    （0挨到一起）
            cellpadding 设置单元格的内边距
                    
 -->
<!--         需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距。 -->
        <center>
            <h1>这是标题1</h1>
            <table border="1" width="500" height="400" cellspacing="0" cellpadding="10">
                <tr>
                    <th>1.1</th>
                    <th>1.2</th>
                    <th>1.3</th>
                </tr>
                <tr>
                    <td>2.1</td>
                    <td>2.2</td>
                    <td>2.3</td>
                </tr>
                <tr>
                    <td>3.1</td>
                    <td>3.2</td>
                    <td>3.3</td>
                </tr>
            </table>
        </center>
    </body>

跨行跨列表格（* 次重点，必须掌握 *）

需求1：新建一个五行，五列的表格，第一行，第一列的单元格要跨两列，第二行第一列的单元格跨两行，第四行第四列的单元格跨两行两列。

<body>
<!--         需求1：新建一个五行，五列的表格，
            第一行，第一列的单元格要跨两列，
            第二行第一列的单元格跨两行，
            第四行第四列的单元格跨两行两列。
            
            colspan 设置跨列
            rowspan 设置跨行
     -->
        
        <table border="1" cellspacing="0" width="500" height="500">
            <tr>
                <td colspan="2">1.1</td>
                <td>1.3</td>
                <td>1.4</td>
                <td>1.5</td>
            </tr>
            <tr>
                <td rowspan="2">2.1</td>
                <td>2.2</td>
                <td>2.3</td>
                <td>2.4</td>
                <td>2.5</td>
            </tr>
            <tr>
                <td>3.2</td>
                <td>3.3</td>
                <td>3.4</td>
                <td>3.5</td>
            </tr>
            <tr>
                <td>4.1</td>
                <td>4.2</td>
                <td>4.3</td>
                <td colspan="2" rowspan="2">4.4</td>
            </tr>
            <tr>
                <td>5.1</td>
                <td>5.2</td>
                <td>5.3</td>
            </tr>
        </table>
    </body>

了解iframe框架标签 (内嵌窗口)

iframe可以在一个大的页面中。内嵌一个小的页面。

<body>
    这是大页面<br/>
    <!-- 
        iframe内嵌的小页面。
            src属性设置这个小页面引用的页面的地址
        
        
        iframe和a标签组合使用的步骤：
        1.需要在iframe标签中使用name属性。给自己定义一个名称
        2.在a标签的target属性中，设置iframe的name属性值。
     -->
    <iframe src="5.img标签.html" width="600" height="200" name="abc"></iframe>
    <br/>
    <a href="3.标题标签.html" target="abc">3.标题标签.html</a><br/>
    <a href="4.超链接.html" target="abc">4.超链接.html</a> <br/>
    <a href="6.表格标签.html" target="abc">6.表格标签.html</a> <br/>
</body>

表单标签（ ***** 重点，必须掌握 * ）

需求1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），性趣爱好（多选），国籍（下拉列表）。

隐藏域，自我评价（多行文本域）。重置，提交。

<body>

<!-- 需求1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），性趣爱好（多选），国籍（下拉列表）。 -->
<!-- 隐藏域，自我评价（多行文本域）。重置，提交。 -->
    
    <!-- 
        form标签是表单标签
            
        input type=text 是文本输入框        value默认值
        input type=password 是密码输入框
        input type=radio  单选框 name属性可以设置分组。checked="checked"表示默认选中
        input type=checkbox    复选框    checked="checked"表示默认选中
        input type=file    文件上传域
        input type=button    是按钮    value是按钮上的文本
        input type=hidden    是隐藏域
        input type=reset     是重置按钮
        input type=submit    是提交按钮
        
        多行文本输入框textarea    rows是高度    cols是宽度
        
    下拉列表    select    下拉列表中的选项是option  selected="selected" 表示默认选中
     -->
    <form action="http://www.baidu.com">
        用户名:<input name="asdf" type="text" value="这是文本框的默认值"/>    <br/>
        密码：<input type="password" value="1234"/>    <br/>
        性别：    
                <input name="sex" type="radio" checked="checked" value="boy"/>男    
                <input name="sex" type="radio" value="girl"/>女<br/>
        兴趣爱好：    <input type="checkbox" checked="checked" value="java"/>java
                    <input type="checkbox" checked="checked" value="cpp"/>C++
                    <input type="checkbox" value="js"/>javaScript<br/>
        选择国籍：<select>
                    <option value="none">--请选择国籍--</option>
                    <option selected="selected" value="cn">中国</option>
                    <option value="usa">USA</option>
                </select><br/>
        自我评价：<textarea rows="10" cols="30">zzzzzzz中国甘要</textarea><br/>
        <input type="hidden"  />
        <input type="reset" value="恢复默认"/>  <input type="submit" value="注册"/>
    </form>
</body>

<!--

form 标签

action 设置表单提交的服务器地址

method 设置表单提交的方式 GET 或 POST

提交表单，表单项没有提交到服务器的原因：

1.表单项中，没有name属性

2.表单项没有在提交的form标签中

隐藏域是我们需要给服务器发送额外数据的时候。使用表单项。

GET请求的特点：

1.不安全

2.所有的表单项。都会以name=value&name=value进行拼接。然后追加到请求地址的后面

完整的格式是：

action?name=value&name=value

3.它有长度的限制

POST请求的特点：

1.安全（相对）

2.浏览器地址栏中只有action的属性值。

3.它提交的数据没有长度限制

-->

其他标签

需求1：div、span、p标签的演示

div标签块标签，

span标签内联标签

p标签段落标签

<body>
<!--     div标签        块标签 默认独占一行 （主要是布局） -->
        <div>div1标签</div>
        <div>div2标签</div>
<!--     span标签    内联标签   主要用来封装文本 -->
        <span>这是span1标签</span>
        <span>这是span2标签</span>
<!--     p标签        段落标签     段落标签默认会在段落的上方和下行，各空出一行 -->
        <p>段落1</p>
        <p>段落2</p>
</body>

搬码日记

关注

13
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML常用标签

font字体标签font标签是字体标签。它可以用来显示文本内容。还可以简单的修改文本的字体，大小，以及颜色。需求1：在网页上显示我是字体标签，并修改字体为宋体，颜色为红色。&lt;body&gt; &lt;!-- 字体标签需求1：在网页上显示我是字体标签，并修改字体为宋体，颜色为红色。 font标签是字体标签， face属性...
复制链接

扫一扫