一言
应该在肩膀上长着自己的脑袋。——弗拉基米尔.伊里奇.列宁
一些常用的html标签

前言

    前几天前十几天为了完成学校的大作业,学了一些常用的html标签和css语法,但是学的不精,只是了解,在这里列一下常用的标签,css就不写了,尽管学了学,也只能做到能看懂,一些技巧还是需要学习的。

格式化标签


水平线


加粗1
倾斜
删除线
下划线

段落

强制换行(break缩写)单标签

以上的语法为

<hr>水平线 <hr/>
<strong>加粗1</strong>
<em>倾斜</em>
<del>删除线</del>
<ins>下划线</ins>
<p>段落</p>
<br />强制换行(break缩写)单标签

盒子标签

其实网页就是一个盒子一个盒子组成的,就是你划分这片区域为一个盒子,再往里放东西。

超大盒子,自己独占一行
超大盒子,自己独占一行

小盒子,一行可以放多个 多个 多个

 <div>超大盒子,自己独占一行</div>
 <div>超大盒子,自己独占一行</div>
 <span>小盒子,一行可以放多个</span> <span>多个</span> <span>多个</span>

图像标签

说起图像标签,其实相比markdown语法的插入图片语法,我更爱html的,也不知道为什么,哈哈哈哈哈。
<img src="https://cdn.xlonglong.cn/gh/Longlong418/picbed/img/202307131625310.png#pic_center" alt="如果图片无法显示,将会显示该文字"
title="鼠标放到图像上,显示的文本" width="850" height="600" border="10" />

<img src="https://cdn.xlonglong.cn/gh/Longlong418/picbed/img/202307131625310.png#pic_center" alt="如果图片无法显示,将会显示该文字"
        title="鼠标放到图像上,显示的文本" width="850" height="600" border="10" />
<!-- 其中border为边框粗细 -->

超链接标签

外部链接

这里写文本

<a href="https://blog.xlonglong.cn/" target="_blank">这里写文本</a>
<!-- 其中,target默认属性为_self,表示在当前窗口打开,_blank是在新建页面打开 -->

内部链接

这是一个内部链接

<a href="main.html" target="_blank">这是一个内部链接</a>
内部链接是作用是访问本地的一些文件

空链接

这是一个空链接

<a href="#" target="_self" rel="noopener">这是一个空链接</a>
空链接可以起到一个返回网页顶部的效果

下载链接

<a href="图片.zip" target="_blank">这是一个下载链接</a>
下载链接的文件一般是.exe文件的安装包或者.zip、.rar等压缩包

网页其他元素的链接

例:图片链接

<a href="https://blog.xlonglong.cn/"> <img      src="https://dogefs.s3.ladydaily.com/~/source/wallhaven/full/x8/wallhaven-x8gkpo.jpg"  
width="850" 
height="600" 
title="点击这个图片通往我的博客" 
border="10"/> </a>
除了图片,视频,音频都可以作为链接

锚点链接

定位到其他标签的某一id
这里定位到"前言"这一标题标签
快速定位页面中的某一个位置

特殊符号

表格标签

基本语法

姓名年龄性别
小明18
小红18
Longlong19
<table >
             <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
             </thead>
         <tbody>
            <tr>
                <td>小明</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>18</td>
                <td>女</td>
            </tr>
            <tr>
                <td>Longlong</td>
                <td>19</td>
                <td>男</td>
            </tr>
        </tbody>
</table>
    table是表格的标识,表示我们要使用表格了
    tr是每一行,每个tr标签中又包含多个单元格
    其中,th是表头单元格,会加粗显示,td是普通单元格
    thead和tbody的作用就是划分结构

而table标签又有好几个属性
border 为是否设置边框,默认为""如果想要有边框,可以设置为"1"
cellpadding是单元边和其内容的空白距离
cellspacing是单元格与单元格之间的距离

合并单元格


姓名年龄性别
小明18
18
Longlong19
<table >
             <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
             </thead>
         <tbody>
            <tr>
                <td rowspan="2">小明</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                 <!-- <td>小红</td> -->
                <td colspan="2">18</td>
               <!-- <td>女</td> -->
            </tr>
            <tr>
                <td>Longlong</td>
                <td>19</td>
                <td>男</td>
            </tr>
        </tbody>
</table>
跨行合并:rowspan="合并的单元数"
跨列合并:colspan="合并单元数"

列表

无序列表

  • 例一
  • 例二
  • 例三
  • 例四
  • 例1
  • 例2
  • 例3
  • 例4
<ul>
        <li>例一</li>
        <li>例二</li>
        <li>例三</li>
        <li>例四</li>
    </ul>
<ul>
        <li>例1</li>
        <li>例2</li>
        <li>例3</li>
        <li>例4</li>
    </ul>
ul中只能嵌套li 
li中可以放任何类型

有序列表

  1. 例一
  2. 例二
  3. 例三
  4. 例四
```
<ol>
    <li>例一</li>
    <li>例二</li>
    <li>例三</li>
    <li>例四</li>
</ol>
ol中只能嵌套li 
li中可以放任何类型
```

自定义列表

自定义类型1
解释1
解释2
解释3
自定义类型2
解释1
解释2
解释3
    <dl>
        <dt>自定义类型1</dt>
        <dd>解释1</dd>
        <dd>解释2</dd>
        <dd>解释3</dd>
        <dt>自定义类型2</dt>
        <dd>解释1</dd>
        <dd>解释2</dd>
        <dd>解释3</dd>
    </dl>

dl中只能嵌套dt和dd
li中可以放任何类型
自定义列表相比无序列表其实就是多了一个dt 该dt可以看成一个字典的key,后边的dd都是归属于dt的,
但是他们并不是嵌套关系,而是并列关系

表单标签

表单域

表单域是向后台提供该区域的各种表单元素的数据

基本语法

 

form中间就是表单域

表单元素

input输入元素

其中,type是属性值,有多个可选,如下图

20230714132334

text属性值
button 属性值
checkbox属性值
file属性值
⬅隐藏的在这里 hidden属性值,目前俺也不知道有啥用
image属性值
password属性值
radio属性值
reset属性值
submit
其他属性值

想要使用单选按钮radio或者checkbox等表单元素,需要将他们标为相同的name
选我选我 选我
如果把name看成类,那么value就是具体的对象,例如多个单选按钮,归为一个name,但是他们并不相同,都有各自的
value值
在text输入框中可以这么使用:

或者在submit、reset等按钮上使用

checked属性
页面一打开,就选上的元素,一般用于单选或者复选
我同意以上条款  ⬅一般用于这个作用
maxlength属性
就是限制输入长度的

例如这个的最长输入就是8个字符
<form> 
<input type="text">text属性值 <br>
        <input type="button">button 属性值 <br>
        <input type="checkbox">checkbox属性值<br>
        <input type="file">file属性值<br>
        <input type="hidden" />⬅隐藏的在这里 hidden属性值,目前俺也不知道有啥用<br>
        <input type="image" />image属性值<br>
        <input type="password">password属性值<br>
        <input type="radio">radio属性值<br>
        <input type="reset">reset属性值<br>
        <input type="submit">submit<br>
        <strong>其他属性值</strong> <br>
        <img src="https://img-blog.csdnimg.cn/0305b1d465ff495fba2a87a46601ce95.png" border="10"> <br>
        想要使用单选按钮radio或者checkbox等表单元素,需要将他们标为相同的name <br>
        选我<input type="radio" name="test">选我 <input type="radio" name="test"> 选我<input type="radio" name="test"> <br>
        如果把name看成类,那么value就是具体的对象,例如多个单选按钮,归为一个name,但是他们并不相同,都有各自的
        value值<br>
        在text输入框中可以这么使用:<br>
        <input type="text" value="请输入账号"> <br>
        或者在submit、reset等按钮上使用 <br>
        <input type="submit" value="登录"> <input type="reset" value="清空"><br>
        <strong>checked属性</strong> <br>
        页面一打开,就选上的元素,一般用于单选或者复选 <br>
        <input type="checkbox" checked="checked">我同意以上条款  ⬅一般用于这个作用 <br>
        <strong>maxlength属性</strong> <br>
        就是限制输入长度的
        <input type="text" maxlength="8"> <br>
        例如这个的最长输入就是8个字符
</form>

lable标签

 
⬅ 直接点击文字即可定位到文本框

label的作用是和另一个表单元素建立链接,目的就是使用户体验感更好,点击文字,即可定位到input标签

<label for="玛卡巴卡">用户名:</label> 
        <input type="text" id="玛卡巴卡"> ⬅ 直接点击文字即可定位到文本框

select下拉表单元素

其中 selected的作用是默认选择该选项
<select name="嗨呀" id="哈哈哈">
        <option value="嗯哼">语文</option>
        <option value="嗯哼" selected="selected">数学</option>
        <option value="嗯哼">英语</option>
        <option value="嗯哼">化学</option>
    </select>

文本域元素

cols是每行的字符数 rows是显示的行数
 <textarea name="" id="" cols="50" rows="8">
 这里写文本
</textarea>

总结

总之学习一些这玩意,就能大概看懂一些前端结构了..

暂无评论

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇