HTML，网页（盒子模型）

小谭同学ha

已于 2023-05-20 11:00:25 修改

阅读量104

点赞数 1

文章标签： html servlet 前端 Powered by 金山文档

于 2023-03-23 20:49:45 首次发布

本文链接：https://blog.csdn.net/qq_69032468/article/details/129738303

版权

概述

🐳HTML指超文本标记语言

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
    </body>
</html>

<!-- 
<!DOCTYPE html>   是html文件中的一个声明，让浏览器知道是html语言版本，这可以使浏览器在解析时知道用哪一版本进行解析
 <html>   所有标记类语言都有一个基本语法（必须有一个根标签），所有的内容均写在根标签内
    <head>  网页头部，设置网页元信息
        <meta charset="utf-8" />  设置浏览器解析网页时使用的字符集
 -->

2.基本语法：

👻注释：

👻标签(网页由标签构成)

💀<开始标签> 标签体 <结束标签> ：称为闭合标签/双标签

💀<标签名 />：称为自闭和标签

💀标签属性：标签中通过属性修饰标签特性

🐧属性必须写在开始标签中

🐧一个标签可有多个属性，属性格式：属性名="属性值"

💀常用标签：

<!-- 标题标签(只有6个  align属性可设置文本内容，设置标签行内的水平对齐方式)-->
    <h1 align="right">一级标题</h1>
    <h2 align="center">二级标题</h2>
    <h3 >三级标题</h3>

<!-- p  段落标签   表一个标题段落，段落之间有间隔-->
    <p align="center">加油、努力</p>

<!-- 无序列表  前面有一个图标  无序号-->
    <ul>
         <li>列表项内容</li>
         <li>列表项内容</li>
         <li>列表项内容</li>
    </ul>

<!-- 有序列表  前面有一个图标  有序号  通过type属性改变序号规则-->
     <ol type="I">
         <li>列表项内容</li>
         <li>列表项内容</li>
         <li>列表项内容</li>
     </ol>

<!-- 超链接-->
     <!-- 在原窗口打开-->
     <a href="http://www.baidu.com" target="_self">百度</a>
     <!-- 在新窗口打开-->
     <a href="http://www.baidu.com" target="_blank">百度</a>

<!-- 图片-->
<img src="img/baidu.png" width="100" height="100" border="1"/>

👻特殊符号

💀空格 —— &nbsp

💀版权(C) —— &copy

💀商标(TM) —— &trade

💀注册商标(R) —— &reg

💀小于号< —— &It

💀大于号> —— &gt

3.表格

🐳基本构成

table标签：表格标签 tr标签：表格中的行 th标签:表格的表头 td标签：表格单元格

🐳表格属性

border="number"  <!-- 设置边框属性-->
background="图片位置" <!-- 设置背景图像-->
bgcolor="颜色" <!-- 设置背景颜色-->
width="number",height="number" <!-- 设置表格大小-->
cellpadding="值"  <!--单元边沿与其内容之间的空白-->
cellspacing="值" <!-- 设置各单元边沿之间的间距-->
align <!-- 设置表格位置  left、right、center-->
valign <!-- 设置表格位置  top、bottom、middle-->

🐳表格合并

colspan="number"  <!--跨列合并  合并后把该行的剩余列全部删除-->
rowspan="number"  <!--跨行合并  合并后把被合并的对应行的对应列删除-->

4.表单

🐳form标签表示表单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 
        <input> 输入标签
        type="text" 单行文本输入框
        name="名称" ,向后端提交数据的键
        value="值",默认为空，可不写
        readonly="readonly" 只读，可提交数据
        disabled="disabled" 禁用组件，不可提交数据
        palceholder="请输入用户名" 默认提示，不是值
        
        type="password" 密码框
        选择性组件，需给定默认的value
        type="radio" 单选框  name相同为一组，会互斥，只能选择一个
        
        checked="checked" 默认选中
        
        type="checkbox" 复选框
        type="file" 文件选择框
        type="reset" 重置按钮
        type="button" 普通按钮 主要用来触发事件
        
        <select name="province"> 下拉选择框
        
        多行文本域
        <textarea
        -->

        <form action="server.html" method="get">
            用户名<input type="text" name="username" value="aa"/><br/>
            密码<input type="password" name="password"  /><br/>
            性别<input type="radio" name="gender" value="男" checked="checked"/>男
                <input type="radio" name="gender" value="女"/>女<br/>
            爱好<input type="checkbox" name="hobby" value="跳舞1"/>跳舞1
                <input type="checkbox" name="hobby" value="跳舞2"/>跳舞2
                <input type="checkbox" name="hobby" value="跳舞3"/>跳舞3<br/>
            上传头像<input type="file" name="file" /><br/>
            省份<select name="province">
                <option value="110">北京</option>
                <option value="111">上海</option>
                <option value="112">天津</option>
                </select><br/>
            
            地址<textarea cols="20" rows="5" name="address">
                
                </textarea>
            
            <input type="reset" />
            <input type="button" value="11" onclick="alert()"/>
            <input type="submit"  />
        </form>
    </body>
</html>

小谭同学ha

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML，网页（盒子模型）

🐳HTML指超文本标记语言。2.基本语法：👻注释： 👻标签(网页由标签构成) 💀 标签体：称为闭合标签/双标签 💀：称为自闭和标签 💀标签属性：标签中通过属性修饰标签特性 🐧属性必须写在开始标签中 🐧一个标签可有多个属性，属性格式：属性名="属性值"常用标签：3.表格基本构成table标签：表格标签tr标签：表格中的行th标签:表格的表
复制链接

扫一扫