HTML基础

最新推荐文章于 2024-01-18 14:40:04 发布

123没有肆

最新推荐文章于 2024-01-18 14:40:04 发布

阅读量241

点赞数 1

分类专栏：前端文章标签： html HTML表单前端 web

本文链接：https://blog.csdn.net/weixin_44769612/article/details/107960920

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

HTML文件代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档的标题</title>
</head>
<body>

标题使用标签h来定义
<h1>标题一</h1>
<h2>标题二</h2>
段落使用标签p来定义
<p>段落一</p>
<p>段落二</p>


表头使用th定义,行使用tr定义,行里的每个数据使用td定义
<table border="1">
    <tr>
        <th>header1</th>
        <th>header2</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
    <tr>
        <td>数据3</td>
        <td>数据4</td>
    </tr>
</table>


<b>粗体文本</b>
<code>计算机代码</code> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>


<style type="text/css">
h1 {color:red;}
h2 {color:purple;}
p {color:green;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

无序列表
<ul>
    <li>项目</li>
    <li>项目</li>
</ul>

有序列表
<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

自定义列表
<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

表单

<table>
                <tr>
                    <!-- name  一定要带上以后交互 -->
                    <td>用户名：</td>
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td><input type="password" name="password"></td>
                </tr>
                <tr>
                    <td>头像：</td>
                    <td><input type="file" name="photo"></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td>
                        <!-- 单选按钮 -->
                        <!-- checked="checked"默认选中 -->
                        <input type="radio" checked="checked" name="gender" />男
                        <input type="radio" name="gender"/>女
                    </td>
                </tr>
                <tr>
                    <td>兴趣：</td>
                    <td>
                        <!-- 多选按钮 -->
                        <input type="checkbox" checked ="interests" />跑步
                        <input type="checkbox"   checked name="interests"/>打球
                        <input type="checkbox"  checked name="interests" />跑步
                        <input type="checkbox" name="interests"/>游泳
                        <input type="checkbox" name="interests" />打游戏
                        <input type="checkbox" name="interests"/>爬山
                    </td>
                </tr>
                <tr>
                    <td>学历：</td>
                    <td>
                        <!-- 下拉框 -->
                        <select name="graduation">
                            <option>高中</option>
                            <option>大专</option>
                            <option>本科</option>
                            <option>硕士</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>银行卡：</td>
                    <td>
                        <!-- 多选multiple   CDMA-->
                        <select multiple name="bank">
                            <option>中国银行</option>
                            <option>农业银行</option>
                            <option>招商银行</option>
                            <option>建设银行</option>
                            <option>江苏银行</option>
                            <option>浦发银行</option>
                            <option>交通银行</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>个人简历：</td>
                    <!-- rows 表示行 值为整数
                        cols表示列
                     -->
                    <td><textarea rows="10"  cols="30" name="profile"></textarea></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="提交" />
                        <input type="reset" value="重置" />
                    </td>
                </tr>
            </table>

普通的链接：<a href="http://www.example.com/">测试连接</a>
图像链接： <a href="https://s1.ax1x.com/2018/04/03/CpYGX8.png"><img src="URL" alt="查看图片"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

<br>单独一个br可以实现换行的作用
<br>
<a href="https://www.baidu.com/">链接使用标签a来定义,这里使用了href属性</a>

<br>
<img src="baidu.jpg" width="200" height="200" />
<br>
HTML 图像通过标签 img 来定义,图像的名称和尺寸是以属性的形式提供的


</body>
</html>

!DOCTYPE html 声明为 HTML5 文档
html 元素是 HTML 页面的根元素
head元素包含了文档的元（meta）数据，如 meta charset=“utf-8” 定义网页编码格式为
utf-8（由于在大部分浏览器中直接输出中文会出现乱码，所以要在头部将字符声明为UTF-8
HTML图像默认的路径是html文件的路径,只给出图形名称和显示的长宽就能正常显示在浏览器中
文档中的块级元素和内联元素

效果图

在这里插入图片描述

在这里插入图片描述
参考自

https://www.cnblogs.com/dabu/p/12601600.html
https://blog.csdn.net/cool99781/article/details/104332627

123没有肆

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

HTML文件代码<!DOCTYPE html><html><head><meta charset="utf-8"><title>文档的标题</title></head><body>标题使用标签h来定义<h1>标题一</h1><h2>标题二</h2>段落使用标签p来定义<p>段落一</p><p>段落二&l
复制链接

扫一扫

专栏目录