《HTML入门笔记2-HTML常用标签》

永远不要双击打开HTML文件,必须通过输入网址打开

方法一:用http-server

①新建终端

②终端输入命令:yarn global add http-server

③终端输入命令:http server . -c-1(会出现几个地址,http server可以缩写为hs)

④把地址输入浏览器,加上路径访问如:http://192.168.0.104:8081/a-herf.html

方法二:用parcel

①新建终端

②终端输入命令:yarn global add parcel

③终端输入命令:parcel a-href.html

④把得到的地址输入浏览器http://localhost:1234


HTML常用的几个重要标签


1.a 标签的用法


a标签的作用

-跳转到外部页面

-跳转到内部锚点

-跳转到邮箱或电话等

a标签属性

-href

a的href取值:

网址

-https://google.com

-http://google.com

-//google.com(最高级,自动选用http或者https协议)

路径(相对路径和绝对路径,动手多操作几遍)

-/a/b/c 以及 a/b/c

-index.html 以及 ./index.html

伪协议(比较抽象,重在理解)

-javscript:代码;

-mailto:邮箱

-tel:手机号


-target

a的target取值

-_blank(新页面打开)

-_top(当前页面顶级窗口打开)

-_parent(在父级窗口打开)

-_self(当前页面打开)

-download

下载页面,不是所有的浏览器都支持,尤其是手机浏览器可能不支持

-rel=noopener(先跳过)

2.img 标签的用法

img标签属性

作用

-发出get请求,展示一张图片

属性

-alt(加载图片时页面显示的图片名称)

-height(图片高度,设置了高度就不要设置宽度,防止图片变形

-width(图片宽度)

-src (source缩写,引用图片的路径)


属性

事件(监听图片加载成功还是失败)

-onload(图片加载成功)

-onerror(图片加载失败)


监听图片加载成功还是失败

响应式

-max-width:100%;一般在程序上加上这个,便于手机用户查看图片


max-width 100%

3.table 标签的用法

与table相关的标签

-thead(表头)


thead
thead

-tbody(表中)

tbody
tbody

-tfoot(表尾,tfoot无论放在tbody前面还是后面都不会有影响)

tfoot

-tr (table row 行)

-td(table data 数据)

-th (表头单元格)

与table相关的样式

table-layout(auto:表格单元格的布局取决于内容/fixed:表格单元格固定)


auto


auto


fixed


fixed

border-collapse( 决定表格的边框是分开的还是合并的 )

border-collapse

border-spacing( 指定相邻单元格边框之间的距离)


border-spacing 20px
border-spacing 10px

4.其他感想

学习html标签先大概了解标签,然后再一个一个标签实践,熟能生巧

代码如果一直执行不了,先检查代码有没有错,再看看标点符号是不是中文的,经常犯的错,(´;︵;`)

暂时先想到这些,下次见!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,406评论 1 41
  • 学习目标: 了解常用浏览器 掌握WEB标准 理解标签语义化 掌握常用的排版标签 掌握常用的文本格式化图像链接等标签...
    淡淡疯阅读 1,282评论 0 3
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,177评论 0 0
  • HMTL初识 HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标签语言”...
    小青年coder阅读 2,387评论 0 1
  • 本文将会介绍HTML中的一些常用标签,后面还会陆续整理 1:什么是HTML HTML (Hypertext Mar...
    憨憨二师兄阅读 985评论 0 0