web 基本标签

最新推荐文章于 2024-05-11 11:34:50 发布

老酱儿

最新推荐文章于 2024-05-11 11:34:50 发布

阅读量3.8k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/ybw_2569/article/details/88653916

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

#浏览器内核（渲染引擎+js引擎）+外壳
#5大常用浏览器： chrome 谷歌内核（webkit blink）
FireFox 火狐内核（Gecko）
Safiri 苹果内核（webkit）
opear 欧朋欧洲，挪威内核（Presto）
IE 内核（Trident）

前端测试：一般常用以上5大浏览器

HTML语言

ctrl+B 将文字加粗

ctrl+1 /2 /3 标题

ctrl+shift + i 插入图片

不是编程语言编程语言都会有自己的语法结构 html语言不是编程语言它是标记语言

一组标签 --》特定功能—》浏览器里的渲染引擎

html   hyper  超  Text  文本  markup 标记 language语言

文本  .txt 文字  字符 
超文本  不仅仅只有文字  图片 视频 音频 链接

形式：  闭合标签（双标签）
       <>开始标签  </>结束标签
       <标签关键字></标签关键字>
<html></html> 根标签
<head></head> 头部标签  对浏览器说话

非闭合标签 （单标签）
 <meta charset="UTF-8">  chartset = "UTF-8"  属性名 = ”属性值“

浏览器默认字体字体大小 16px

编码

ASCII 字母+西文+符号 <128 8位二进制 256个数据第一位0 后7位 128个数据

ASCII扩展 8第一位用了 256

GBK(6000个汉字) GB2312（10000汉字） GB18030 （繁体字） 0-127 ASCII +扩充

Unicode 万国码全球所有字符（1：01110111 这是一个汉字还是字母）

UTF-8（解决问题） UTF-16

常用文本标签

1:加粗字体的标签: <b>有效内容</b>  <strong>加粗</strong>  唯一差别：strong 语义化  （权重）
2：斜体标签     <i>斜体</i>       <em>斜体</em>（语义化）
3：删除标签  （中划线）  <del>语义的</del>  <s></s>
4：下划线 <u></u>  underline 
5:水平线  <hr> 

<hr color="red" width="300px"  align="left">
color 颜色 
width  宽度
align  对齐方式  left 左  right右  center 中心居中对齐

无形当中最有形（90%）

span  小容器  图标文字
div	   大盒子 大容器 大图大的内容  没有默认属性  默认样式

常用

1:段落标签(大段文字)
<p></p> paragraph    特点：上下外间距（16px）
2：标题标签
hi  h1--h6   h1在当前界面只有一个  h1会包裹logo 权重大
3：插入图片的标签  (本质是文字)
<img src="地址" alt="图片找不到文字的提示" >


# 解决图片下间隙问题 ： 1：改变对齐方式 ---》vertical-align:middle（中线）
                                                      top  bottom baseline(只要不是基线都可以解决)


图片路径：
绝对路径 ：不建议  c://a/b/a.jpg  网上的图片路径https://m.360buyimg.com/babel/jfs/t1/14767/35/9502/98915/5c8074faE4aa55aa9/0f1a568b3e5bd8f6.jpg
相对路径：本地路径
        同级目录  图片和当前文档是一个文件下
        上一级  跳出几个文件夹 一个../  2个../../ 
        下一级

文本属性（css 样式语言）

设置标签属性  ： 1：开始标签 <   属性名=“属性值”>  默认属性
              自定义样式属性   style="属性名:属性值；属性名:属性值;属性名：属性值； "
    
    # style自定义样式集合
    
    
（1）字体属性  
             字体颜色 : color:red/yellow/green 
             字体家族: "宋体" "楷体"  font-family: "微软雅黑"  
             字体粗细： font-weight: 100-900  100最细 900最粗  400normal 正常
             字体形态：font-style: 斜体  italic / 正常 normal 
             font:  形态 粗细  字体大小 家族

ps

1:视图–》标尺点中标尺鼠标右键设置单位为像素

2：左侧工具栏标尺鼠标拽着拉动值在菜单栏

3：选区也可以测量

4：切图 6个切片在你切的的图片上画轮廓

点击文件 —》存储为web格式选图片后缀 (phg-8) --》命名–——》存储（！！！切换成选中的切片）

在桌面有文件夹 images 里面有你切下来的图片

5：吸管粘贴 #f5f5f5

<!DOCTYPE html> <!-- html5文档-->
<html lang="en"> <!-- 根标签  -->  <!--ctrl+/ 单行注释   ctrl+ shift+/ 多行注释-->
<head>
    <!--媒体标签  解释语言  charset=‘utf-8’字符编码-->
    <meta charset="UTF-8">
    <title>第二阶段 第一天</title><!--登录页 名称-->
    <!--相关浏览器 不向用户展示-->
</head>
<body>
<!--&nbsp;空格  &yen:钱的符号   &copy 版权符号   ctrl+d 复制上一行-->
<!--用户可以看到-->
<!--下面为一些常用的标签-->
<b>我是加粗标签</b>
<strong>我是加粗标签</strong><!-- 语义化 权重 -->

<i>我是 &nbsp;斜体</i>
<em>我是 斜体</em><!-- 语义化 权重 -->

<s>中划线</s>
<del>中划线</del><!-- 语义化 权重 -->

<u>下划线</u>

<hr color="red" width="300px" align="left"><!--水平线-->
<!--color 颜色 width 宽度  align 对齐方式 left  right  center -->

<br> <!--换行-->

<span style="color:black;width:300px;height: 300px;background-color:red" >默认字体</span>
<!--小盒子 包裹小元素  或者是简单的文本-->
<span style="color:red;font:normal 300 50px '楷体' " >默认字体</span><!--font:  形态 粗细  字体大小 家族-->
<!--宽度取决于内容宽度 高度取决于内容高度 -->

<div  style="width:300px;height: 400px;background-color: yellow">我是大盒子内容</div>
<!--大盒子-->

<p>我是段落</p>
<h1>我是标题</h1>
<h2>我是标题</h2>
<h3>我是标题</h3>
<h4>我是标题</h4>
<h5>我是标题</h5>
<h6>我是标题</h6>

<img src="网址" alt=""><!--协议允许图片-->
<img src="同级路径 图片名字" alt="">
<img src="./ 图片名字" alt="">
<!--跳出当前一级路径+图片路径-->

</body>
</html>

老酱儿

关注

2
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
web 基本标签

<!DOCTYPE html> <html lang="en">  <head>  ...
复制链接

扫一扫

专栏目录