前端入门学习之HTML常见的标签——day01

最新推荐文章于 2024-06-07 20:52:36 发布

Serien、

最新推荐文章于 2024-06-07 20:52:36 发布

阅读量77

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_44194443/article/details/115377971

版权

前端工具

ps:测图量图修图
编辑器:vscode
浏览器:
1. 主流浏览器:chrome谷歌,Firefox火狐,Safari,IE浏览器,Opera浏览器
2. 最重要和最核心的组件:渲染引擎(浏览器内核)
3. IE浏览器:Trident内核
  
  双内核-兼容模式极速模式 webkit
4. Safari:Webkit内核
5. Firefox:Gecko内核
6. Opera:Presto内核->Webkit内核->Blink内核
7. Chrome:Blink内核

前端开发语言

技能三要素:HTML,CSS,JS
1. HTML(HyperText Markup Language):超文本标记语言,[结构层]
2. CSS(Cascading Style Sheets):层叠样式表,[表现层]
3. JS(Java Script):脚本语言,[行为层]

HTML

HTML:文件扩展名.html 快速生成初始代码:html:5或者! +回车
1. < !DOCTYPE html >//文档类型声明(DTD) 不是一个标签,是一条命令
  作用:告诉浏览器是什么类型的文件,以什么样的标准去解析文档;
2. 标签\标记:<>尖括号包围的关键字;
3. HTML元素:由开始标签到结束标签的整个元素<head>...</head>称为一个元素;
4. html的作用:定义整个文档:
  1. ```
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    
      <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
      
      
      <meta name="description"
            content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
   
      <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
  
      
  </head>
  <body>
      
  </body>
  </html>
```
5. head头部文档:
  1. 包含的内容是文档相关信息;
    2. meta定义文档的元信息:字符集charset,关键字,网站描述
    1. 字符集charset
      1. 字符;
      2. 常见字符集(UTF-8万国码,GB2312国家标准-简体中文,GBK-简体和繁体)
    2. title:网页标题:标题栏,收藏夹,列表
  2. body文档主体:ps设计稿内容
6. 语法:
  1. 尖括号包括的关键字就是标签,通常是成对出现的;
  2. 开始的叫开始标签<…>,结束的叫闭合标签</…>,中间存放元素内容;
  3. 空标记:只有一个标记,例如<meta charset="UTF-8">
7. HTML属性:
  1. 开始标签内部;
  2. 以属性名称=’‘属性值’'形式;
  3. 给标记添加附属信息

常用标签:

div:块,容器,用来组合文档结构(画块),没有语义;
1. h1~h6标题标签:(h1最大,h6最小)
  1. h1通常用在logo或者详情页的大标题;
  2. 注意事项:
    1. 通常包含文字,内联元素,图片;
    2. 有默认外边距,字号,加粗;
2. p:段落,大面积出现文字的地方
  1. 包含文字内容,图片,其他内联元素;
  2. 注意事项:
    1. 不能包含p元素;
    2. 犹豫div和p的选择是,优先p标签
    3. 有默认外边距
3. img图片:<img src="" alt="" width="" height="" title="">
4. src=" ":包含资源路径地址:
  1. 绝对路径:带有完整于域名路径;
  2. 相对路径:相对于当前文件引起另一个文件路径关系
    1. 同级目录:(文件名.扩展名)即可;
    2. 上级目录…/文件名.扩展名;
    3. 上上级目录…/…/文件名.扩展名;
    4. 下级目录:下级文件夹名.文件名.扩展名;
  3. alt="":替换文本,当图片资源不能被正常加载时,才会显示文本文字;
  4. width="" height="’’:宽和高,指定其中一个,则图片按原比例缩放,默认为照片原本大小;
  5. title=’’’’ :工具提示,鼠标放在图片上会显示相关文本;
5. a标签超链接:<a href="" target="" title="">
  1. href="":包含资源路径地址:
    1. 绝对地址:完整域名路径;
    2. 相对地址:目录中的路径跳转;
  2. target="":目标地址的打开方式:
    1. _self:当前窗口打开;
    2. _blank:新窗口打开;
    3. 默认为当前窗口打开
  3. title="":文本提示,在有限的空间展示更多内容,优化用户体验
  4. 作用:
    1. 跳转到其他页面;
    2. 跳转到当前页面的某个部分-锚点连接:
      1. href=“id名称/name值”;
      2. div= “id名称”;
      3. <a name="锚点名称">;
    3. 跳转到其他页面的某个部分:
      1. href=“页面text.html/xmm”
  5. 注意事项:不要包含其他交互元素,包括a,button,textarea,select
  6. ```
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Document</title>
    </head>
    <body>
      <a href="#xyy">小岳岳</a>
      <a href="#xhr">小黄人</a>
      <a href="#xm">小猫</a>
  
      <h1>小岳岳</h1>
      <img src="上课素材/3.jpg" alt="" id="xyy" />
      <h1 id="xhr">小黄人</h1>
      <img src="上课素材/pic.jpg" alt="" />
  
      <h1 id="xm">小猫</h1>
      <img src="上课素材/pic1.jpg" alt="" />
    </body>
  </html>
```
6. <br/> 换行标签:处理文字的
7. ul标签:无序列表
  1. 应用:新闻列表,产品列表,导航栏(主导航,两侧电梯导航),菜单,分页
  2. 注意事项:固定嵌套,只能放在<li>..</li>中,不能嵌套放div
ol标签:有序列表
1. 应用:排行榜,面包屑导航
2. 注意事项:固定嵌套,ol的直接子元素只能是li
3. dl标签:定义列表
  1. 定义:dt 定义-概要
  2. 描述:dd 描述
  3. 应用:有定义与描述,类目与具体的类目,概要与详情
4. 注意事项:
  1. dt通常用来包含文字,图片,其他内联元素;
  2. 固定嵌套:dl的直接子元素只能是dt和dd
```
<ul>
<li>列表1</li>
<li>列表2</li>
 </ul>
<ol>
   <li>列表1</li>
   <li>列表2</li>
    </ol>
<dl>
<dt>HTML</dt>
   <dd>超文本标记语言</dd>
</dl>
```
1. < hr /> 标签:水平线分割线;
2. span标签:没有具体语义,区分文本样式,进行细节处理(比如字体颜色等);
3. strong标签:着重强调,默认加粗,用来强调内容的重要性,紧迫性,严重型;
4. b标签:默认加粗;
5. em标签:默认斜体,着重强调,程度弱于strong,整个内容重音的变化;
6. i标签:默认斜体;
7. del标签:默认删除键,删除内容;
8. sub/sup标签:下标和上标
块元素
1. 定义:独占一行的元素
2. h标签,div,ul,ol,li,dl,dt,dd,hr

行级元素(内联元素)

定义:可以在一行并列显示
a标签,img,span,b,strong,i,del,sub/sup

Serien、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端入门学习之HTML常见的标签——day01

前端工具ps:测图量图修图编辑器:vscode浏览器:主流浏览器:chrome谷歌,Firefox火狐,Safari,IE浏览器,Opera浏览器最重要和最核心的组件:渲染引擎(浏览器内核)IE浏览器:Trident内核双内核-兼容模式极速模式 webkitSafari:Webkit内核Firefox:Gecko内核Opera:Presto内核->Webkit内核->Blink内核Chrome:Blink内核
复制链接

扫一扫