HTML

最新推荐文章于 2022-04-09 10:43:09 发布

itsAurora

最新推荐文章于 2022-04-09 10:43:09 发布

阅读量1k

点赞数

分类专栏： HTML/CSS 文章标签： html

本文链接：https://blog.csdn.net/weixin_45716667/article/details/107027110

版权

HTML/CSS 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

基础标签

P标签

<p>段落标签，成段显示</p>

在这里插入图片描述

h1~h6标签

<h1>标题</h1>
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    <h6>标题</h6>

在这里插入图片描述

加粗

<p>普通字体</p>
<strong>加粗字体</strong>

在这里插入图片描述

斜体

<p>普通字体</p>
<em>斜体字体</em>

在这里插入图片描述

删除线

<p>普通字体</p>
<del>删除线</del>

在这里插入图片描述

高级标签

空格输出
html中空格代表文字分隔符
若想输出空格需用 替代。

<body>
    这是很多空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;。
</body>

在这里插入图片描述

转义字符
用< >替代<>.

<body>
    &lt;p&gt;这是一个P标签&lt;p&gt;
</body>

在这里插入图片描述

有序列表

<body>
    <ol>
        <li>第一</li>
        <li>第二</li>
        <li>第三</li>
    </ol>
    <ol type="a">
        <li>一</li>
        <li>二</li>
        <li>三</li>
    </ol>
    <ol type="A">
        <li>一</li>
        <li>二</li>
        <li>三</li>
    </ol>
    <ol type="i">
        <li>一</li>
        <li>二</li>
        <li>三</li>
    </ol>
    <ol type="I">
        <li>一</li>
        <li>二</li>
        <li>三</li>
    </ol>
</body>

在这里插入图片描述
倒序排列

<ol reversed="reversed">
        <li>第一</li>
        <li>第二</li>
        <li>第三</li>
    </ol>

在这里插入图片描述
从某一序号开始

<ol start="4">
        <li>一</li>
        <li>二</li>
        <li>三</li>
    </ol>

在这里插入图片描述

无序列表

   <!-- 默认实心圆 -->
    <ul>
        <li>一</li>
        <li>二</li>
        <li>三</li>
    </ul>
    <!-- 实心方框 -->
    <ul type="square">
        <li>一</li>
        <li>二</li>
        <li>三</li>
    </ul>
    <!-- 空心圆 -->
    <ul type="circle">
        <li>一</li>
        <li>二</li>
        <li>三</li>
    </ul>

在这里插入图片描述

插入图片

<img src="地址：url/相对路径/绝对路径" alt="图片占位符" title="鼠标移到图片时所显示的内容">

在这里插入图片描述

a标签
- 超链接
- 锚点（目录）
- 打电话/发邮件
- 协定限定符
  1.超链接

<a href="www.baidu.com" target="_blank">这是一个超链接</a>

href="需要跳转的地址"
target="_blank"在新的标签页打开
2.锚点

<body>
 <div id="1" style="width: 100px;height: 100px;background-color: blue;">第一</div>
 <div id="2" style="width: 100px;height: 100px;background-color: red;">第二</div>
 <a href="#1">回到”第一“</a>
 <a href="#2">回到”第二“</a>
</body>

在这里插入图片描述
3.打电话/发邮件

<a href="tel:输入电话号码">给xxx打电话</a>
 <a href="mailto:输入邮箱地址">给xxx发邮件</a>

4.协议限定符

 <a href="javascript:">强制使用javascript</a>

form表单
提交数据时，需满足：
- 数据名称
- 数据值

<form  method="发送方式：get/post" action="发送对象">

    <!-- 发送数据需满足：
            1.数据名称  
            2.数据值 -->


    <p>
        username:<input type="text" name="username">
    </p>
    <p>
        password:<input type="passwordt" name="password">
    </p>

 </form>

在这里插入图片描述

form表单常用组件
- 输入框
- 单选框
- 复选框
- 下拉选单
- 提交按钮

 <!-- 输入框 -->
   <input type="text" name="username">
   <input type="password" name="password"> 
   <br>
   <!-- 单选框 -->
    1<input type="radio" name="a" checked="checked">
    2<input type="radio" name="a">
    3<input type="radio" name="a">
    <br>
    <!-- 复选框 -->
    1<input type="checkbox" name="b">
    2<input type="checkbox" name="b">
    3<input type="checkbox" name="b">
    <br>
    <!-- 下拉选单 -->
    <select name="c">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <br>
    <br>
    <br>
    <br>
    <!-- 提交按钮 -->
    <input type="submit">

在这里插入图片描述
当单选框/复选框在表单中时，数据值用value=""来表示。
单选框/复选框中的checked="checked"代表默认选中某一选项。
下拉选单的数据值默认为<option></option>中间的值，但也可加value=""。

itsAurora

关注

0
点赞
踩
0

收藏

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

基础标签P标签<p>段落标签，成段显示</p>h1~h6标签<h1>标题</h1> <h2>标题</h2> <h3>标题</h3> <h4>标题</h4> <h5>标题</h5> <h6>标题</h6>加粗<p>普通字体</p><stron
复制链接

扫一扫