前端HTML

本文详细介绍了HTML的基础知识,包括VS快捷键、SEO优化、标题标签的使用、段落与水平线、图片和超链接的设置、文本属性、表格属性以及CSS的样式选择器和常见样式属性。重点讲解了如何通过h1~h6优化SEO,以及表格的创建和单元格合并,同时探讨了CSS中的背景属性、文本对齐和字体设置。
摘要由CSDN通过智能技术生成

HTML

vs快捷键

  1. 代码格式化:shift_alt+f
  2. 向上或向下移动一行:alt+up或alt+down
  3. 快速复制一行代码:shift+alt+up或shift+alt+down
  4. 快速保存:ctrl+s
  5. 快速查找:ctrl+f
  6. 快速替换:ctrl+h

title 增加SEO优化

SEO是搜索引擎优化的英文缩写
通过对网站内容调整,满足搜索引擎的排名需求

标题标签 h1~h6

h1 ~ h6 逐渐变小
快捷键:h$*6
把标题标签只用于标题,不仅能生成粗体和大号字体,还能提升 SEO
应该将 h1 用于主标题(最重要的),其次 h2 再其次 h3,以此类推

标题标签位置摆放

align:属性
align="left"默认为左
center 中
right:右

段落p、换行br、水平线hr

水平线设置

<hr color = "" width="" size="" align=""/>
属性:

  • color:设置水平线的颜色
  • width:设置水平线的长度
  • size:高度
  • align:对齐方式(默认剧中,可取值 left | right)

图片

注意事项: img 是单标签,不需要进行闭合操作

属性:

  • src:路径(图片地址与名字)
  • alt:规定图像的替代文本
  • width:规定图像的宽度
  • height:规定图像的高度
  • title:鼠标悬停在图片上给予的提示

相对路径

  • 子级关系:/
  • 父级关系:…/
  • 同级关系:./

超链接

用 a 标签来设置超文本链接
超链接可以是一个字,一个词或者一组词,也可以是一副图像,你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分
<a href="url">链接文本</a>

超链接属性

在标签 a 中使用 href 属性来描述链接的地址
默认情况下。链接将以,以下形式出现在浏览器中:

  1. 一个未访问过的链接显示为蓝色字体并带有下划线
  2. 访问过的链接显示为紫色并带有下划线
  3. 点击链接时,链接显示为红色并带有下划线

文本标签

标签 描述
en 定义着重文字
b 定义粗体文字
i 定义斜体字
strong 定义加重语气
del 定义删除字
span 元素没有特定的含义

注意:
常用文本标签和段落是不同的,段落代表一段文本,二文本标签一般表示文本词汇

有序列表

<ol>
<li></li>
</ol>

type 属性

  1. 的属性 type 拥有的选项
  1. 1:表示列表项目用数字标号(1,2,3…)
  2. a:表示列表项目用小写字母标号(a,b,c…)
  3. A:表示列表用大写字母标号
  4. i:表示列表用小写罗马数字标号(i,ii,iii…)
  5. I:表示列表用大写罗马数字标号(I,II,III…)

有序列表嵌套有序列表

 <ol>
        <li>
            水果
            <ol>
                <li>苹果</li>
                <li>橘子</li>
                <li>西瓜</li>
            </ol>
        </li>
        <li>2</li>
        <li>3</li>
    </ol>

无序列表

语法:
ul>li
快捷键
ul<li*3

type属性

ul 的属性 tyoe 拥有的选项

  • disc:默认实心圆
  • circle:空心圆
  • square:小方块
  • none:不显示

无序列表嵌套

 <ul>
        <li>
            水果
            <ul>
                <li>苹果</li>
                <li>橘子</li>
                <li>西瓜</li>
            </ul>
        </li>
    </ul>

表格

快捷键:table>tr2>td3{单元格}
语法:
<table>:表格
<tr>:行
<td>:单元格(列)
单元格特点:同行等高,同列等宽

表格属性

  • border:设置表格的边框
  • width:表格的宽度
  • height:表格的高度

单元格合并属性

  • 水平合并:colspan 保留左边,删除右边
  • 垂直合并:rowspan 保留上边,删除下边

表单

form
表单是由容器和控件组成你的,一个表单一般应该包含用户填写信息的输入框,提交按钮等,这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件
<form action="url" method="get | post" name="myform"></form>
属性说明:

  • action:服务器地址
  • name:表单名称
    method中get 和 post 的区别
  1. 数据提交方式,get 把提交的数据 url 可以看到,post 看不到
  2. get 一般用于提交少量数据,post 用来提交大量数据

表单元素

一个完整的表单包含三个基本组成部分:表单标签,表单域,表单按钮

<form action="">
        <input type="text"> 
        <input type="submit"> // 按钮
    </form>

value 替换文本

value=“11”:替换默认文本

文本框

文本域通过<input type = "text">标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域

密码框

密码字段通过标

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

原生爱好者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值