Day3行内样式文字对齐方式，图片标签，超链接，语义化标签，

最新推荐文章于 2022-03-06 19:12:12 发布
最新推荐文章于 2022-03-06 19:12:12 发布
阅读量160 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45442261/article/details/114588406
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>引入css样式:行内样式 ，文字对齐方式</title>
	</head>
	<body>
        <div style="width: 200px;height: 200px;border:1px solid red;margin-top: 10px;overflow: hidden;"></div>
        <div style="width: 200px;height: 200px;border:2px double blue;margin-top: 10px;overflow: hidden;"></div>
        <div style="width: 200px;height: 200px;border:3px dotted magenta;margin-top: 10px;overflow: hidden;"></div>
        <div style="width: 200px;height: 200px;border:4px dashed yellow;margin-top: 10px;overflow: hidden;"></div>
        <hr>
        <div style="width: 100px;height: 100px;border:3px solid pink ;border-bottom: none; border-radius: 3px;">三边的线</div>
        <hr>
        <p style="color: hotpink;">颜色表示法</p>
        <p style="color: #0000FF;">十六进制</p>
        <p style="color: rgb(255,100,255);">rgb表示法</p>
        <hr>
        <div style="width: 150px;height: 150px;line-height: 150px;border:2px solid deeppink ;text-align: right;">东风破</div>
	</body>
</html>
<!-- 实线/双实线/点划线/间隔线       溢出隐藏  边距
     边框四个方向top/bottom/left/right
     四个边框，单独一个边框可以设置为none
     颜色表示方法：单词；十六进制；rgb( , ,)
     文字水平对齐方式：text-align [left/center/right]
     文字垂直居中；【行高和字体高度相同 height/line-height】
     
     ps取色器
     
     引进二进制十进制转换：乘以2 结果相加
     十进制转二进制：除2取余，逆序取值
    
    
     -->
     ————————————————————————————————————————————————————————————————————————————————————————————————————————————————
     <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> 图片插入和页面跳转</title>
	</head>
	<body>
        <img src="./img/咸鱼.jpg" alt="图片路径正确不显示"  title="鼠标悬浮上去提示的文字"/><br/>
        <img src="./imgs/咸鱼.jpg" alt="图片走丢了"  title="鼠标悬浮上去提示的文字" /><br/>
        <a href="loop.html" target="_blank">空白页跳转</a>
        <a href="loop.html" target="_self" title="图片解释/提示,是公共属性">原网页地址跳转</a>
        
	</body>
</html>
<!--   
 <a href=""><img src="img/咸鱼.jpg" style="width: 30px;height: 40px;"></a> 
 1.相对路径和绝对路径
 
 绝对路径：有盘符开始的路径：C:\Users\A\Pictures\Camera Roll\1.jpg
   相对路径：相对于当前的html文件  的图片路径
	../  后退一步
     2.语义化标签概念和好处
     div和和p都是块状标签，功能类似；但是div是无意义标签；而h1,p等标签是语义化标签，友好于seo识别搜索排序；
     语义化：
     		1、友好于SEO  
     		2、便于阅读和修改代码
            
        3.alt鼠标未正常显示提示文字；title，解释图片内容    
        4.私有属性，href等某个标签的专属属性；
        公共属性：多个标签都可以使用的属性；比如超链接a和图片img的title属性；
     
     
     
     
     
     -->
m0_45442261
关注
Python_day19--HTML基础--文本标签、超链接标签、图片标签
Biu_Biu_0329的博客
06-27 951
一、什么是Web开发     最早的软件都是运行在大型机上的,软件使用者通过“哑终端”登陆到大型机上去运行软件。后来随着PC机的兴起,软件开始主要运行在桌面上,而数据库这样的软件运行在服务器端,这种Client/Server模式简称CS架构。随着互联网的兴起,人们发现,CS架构不适合Web,最大的原因是Web应用程序的修改和升级非常迅速,而CS架构需要每个客户端逐个升级桌面App,因此,Brows...
黑马毕向东Java课程笔记（35天day29-1——28-19）HTML
LKJgdut的博客
10-25 862
1、HTML概述   Html就是超文本标记语言的简写，是最基础的网页语言。Html语言的特点如下： 1、 Html是通过标签来定义的语言，代码都是由标签所组成； 2、Html代码不用区分大小写； 3、Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>...
JS设置网页超链接的title!!
11-22
JS设置网页超链接的title!! JS设置网页超链接的title!! JS设置网页超链接的title!! JS设置网页超链接的title!! JS设置网页超链接的title!! JS设置网页超链接的title!! JS设置网页超链接的title!!
链接内的图片与文字对齐问题（图片链接莫名底部有空白问题）
u012148262的博客
01-23 466
今天想做一个链接形的天气预报，里面包括图片和文字。却发现怎么设置都有些怪异。 一开始还以为是文字的居中没有做好，但设置span的line-height还是不行。 后来才发现，需要设置img的vertical-align，这个属性直接影响了整体。
vertical-align 调整行内元素对齐
liubangbo的专栏
12-30 193
在电商项目中，经常会搞活动，标上价格后，后面再跟个活动名称，例如： 代码如下： ​ <html> <head> <style type="text/css"> .cls{ width: 60px; height: 40px; background-color: red; text-align: center; line-height: 40px;
前端基础-html 字体标签,排版标签,超链接,图片标签
weixin_30721899的博客
10-31 2975
主要内容: 字体标签： h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub> 排版标签 　　　<div> 、<span> 、 <br>、<hr>、<center>、<pre>...
Android SpannableString设置超链接、颜色、字体等属性
01-04
Android SpannableString设置超链接、颜色、字体等属性 在Android中，TextView是我们最常用的用来显示文本的控件。   一般情况下，TextView中的文本都是一个样式。那么如何对于TextView中各个部分的文本来设置字体，大小，颜色，样式，以及超级链接等属性呢？下面我们通过SpannableString的具体实例操作来演示一下。 package com.snowdream; import java.io.IOException; import org.xmlpull.v1.XmlPullParserException; import andr
01-CSS3基础
人俗话不多
03-06 1275
CSS简介 HTML 主要做结构, 显示元素内容 css 是层叠样式表 主要做样式,用来美化 HTML ,布局网页 CSS 语法规范 css规则主要有两个盒子模型主要部分构成: 选择器以及一条或多条声明. 属性和属性值以键值对的形式出现 属性和属性值之间用 “:” 分开 多个键值对中间用";" 进行区分 代码规范 空格规范: p { color: #ff0000; font-size: 30px; } 属性值前面
WEB_Day03(CSS背景、三大特性、盒子模型、边距、CSS3盒模型、版心和布局流程、网页布局、定位)
weixin_47469183的博客
03-15 370
WEB_Day03() CSS 背景(background) CSS属性定义背景效果 background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 background-position 背景位置 background-attachment 背景固定还是滚动 背景的合写（复合属性） background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 背景图片(image) 语法： back
前端练习Day 3
silenmm的博客
05-07 244
1、选择器，id选择器 #id ，类选择器 .class，标签选择器 item，span.item表示选中class名为item的span，span .item表示选中span下面的class名为item的元素，span, .item表示同时选中span和class名为item的标签 2、css选择器优先级为id&gt;class&gt;标签 3、html5中的Web Storage包括了两...
用CSS设置超链接时的文字颜色、样式。
zfq_jxj的专栏
04-16 1900
用CSS设置超链接时的文字颜色、样式。 注意顺序： a:hover必须位于a:visted之后 a:active必须位于a:hover之后 　　<!-- a:link { text-decoration: none;color: green}　 a:visited { text-decoration: none;color: white}　 a:hover { text-d
元素行内对齐的方法
aliven1的博客
05-22 4212
利用vertical-align:middle实现行内元素的水平垂直居中对齐
js之集合
smilling sky的博客
10-04 1379
/* 1.集合元素没有顺序 2.集合元素不能重复，即元素唯一 */ function setData() { this.items = {}; //判断集合是否有元素 setData.prototype.hasOwn = function(value) { return this.items.hasOwnProperty(value); } //添加元素 setData.prototype.enData = functi
HTML和CSS常用元素
mjkkhjl的博客
04-13 622
网页设计 网站制作到前端开发 Web 1.0时代指的的网站制作，那时候的页面主要是静态页面，仅供用户浏览，而无法提供用户进行交互（无法与服务器进行数据交互）。 而到了Web 2.0时代，已经从网页制作到了前端开发，以前的网页“三剑客”（Fw、Dw、Fl）已经满足不了我们的需求，所以我们要学习新的技术。 分别是：HTML、CSS、JavaScript也是新“三剑客”。 HTML:超文本标记语言，是一门描述型语言。 CSS：层叠样式表，是控制网页外观的一门技术。 JavaScript：是嵌入HTML的一种脚
[HTML5 学习笔记] 超链接 a标签
GYK0812的博客
06-08 403
1. 给一段文本或者图片添加超链接 在文字上加上超链接，只需要把这部分文字用<a>标签包围，并添加href属性（也可以同时添加title属性，添加对超链接的描述） <p>我家有只<a href='http://www.baidu.com' title='这里是百度'>拉布拉多</a></p> 给图片加上超链接，只需要将img标签用<a>包围 <p>我有只小狗</p> <a href...
CSS中实现行内块元素对齐
热门推荐
Capgras的博客
09-15 1万+
目标：行内块元素实现对齐的几种方式 eg. 我希望下列两个单词文本和后面的两个图片能实现中线对齐且靠右。（图1变为图2） 图1 图2 html: <header> <p>Gmail</p> <p>images</p> <img src=images/menu.png class="...
CSS vertical-align 属性
极客神殿
06-13 1270
定义和用法 vertical-align 属性设置元素的垂直对齐方式。 说明 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。 默认值： baseline 继承性： no 版本： CSS1 JavaScript 语法： object.style.verticalAlign...
CSS 文本和超链接
m0_58822373的博客
06-10 1062
一、CSS 文本属性 属性 含义 举例 color 设置文本颜色 color:red; text-align 设置文本水平对齐方式 text-align:center; line-height 设置文本的行高 line-height:25px; ...
常见样式问题八、对行内元素、line-height、vertical-align的理解
c11073138的博客
03-17 3298
一、行内元素基本术语匿名文本：所有未被包含在行内元素的字符串。内容区：非替换元素中，内容区是元素中各字符的em框描述的；替换元素中，内容区是指元素的固有高度再加上可能有的外边距、边框、或内边距。em框：em框在字体中定义，也称字符框。em框不一定指示字体中字符建立的任何边界。有可能小于或者大于字符。它指示如果没有额外行间距设置字体时基线间的距离。某种字体的字符有可能比默认的基线间距离要高（即字符比...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

m0_45442261

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

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

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

打赏作者

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

抵扣说明：

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

余额充值