html/css/Bootstrap/Font Awesome

本文详细介绍了HTML的基础概念,包括标签、属性、样式属性,特别讲解了响应式设计Bootstrap的使用,以及图标库Font Awesome的集成。通过实例展示了如何创建标题、段落、链接、列表、表单等基本元素,并演示了Bootstrap如何实现文本、图片和按钮的响应式布局。
摘要由CSDN通过智能技术生成

目录

基础概念

属性:每个标签有诸多属性,可以直接写在标签内部,用于指定内容样式/功能

样式属性

响应式设计Bootstrap

图标库Font Awesome


基础概念

标签:使用标签指定功能,标签下面可以有子标签

标签实际上就是一个矩形

标题:<h1> -<h6>

段落:<p>

引入资源:<link>

常用于引入字体等资源,包含多个属性

href="url" :引入资源的url

rel="xxx":rel表示relation关系,指引用元素与当前页面之间的关系,常见为stylesheet样式表 

type="":引用资源类型

如<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">

引入图片:<img>

用于引入图片,需在属性内指定资源

src="url/uri":图片来源,可以为url,也可以为本地文件地址

width/heigh="xxxpx"指定大小

alt=“xxx”:图片无法正常显示时的替代文本

如:<img src="https://www.your-image-source.com/your-image.jpg">

外部链接:<a>

a即anchor(锚点),通过设置属性href指定跳转链接,同时外部写文本显示

可以使用 href="#"进行固定连接,仍跳转到本页

如果想设置跳转文字为图片,内部嵌套<img>即可

如:<a href="http://freecatphotoapp.com">cat photos</a>

无序列表:<ul>

ul即unordered list无序列表

ul用于声明无序列表,每一个表项用<li>声明

如:

<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

有序列表:<ol>

ol即ordered list无序列表

ol用于声明有序列表,每一个表项用<li>声

如:

<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>

表单form:<form>

form用于指定web信息与服务器的交互,内部嵌入输入框,如<input>等进行显示,form主要用于表单数据的提交说明

action="url" :将表单数据提交到指定url

name="xxx":为该表单项设置名字,后台读取表单参数时根据名字来读,不设置name则读不出来

如:

<form action="/submit-cat-photo&#

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值