HTML+CSS学习记录02--HTML

1、 文档声明
告诉浏览器网页是以html5版本编写的

2、meta标签
HTML+CSS学习记录02--HTML_第1张图片
3、多个空格或换行会被浏览器记成一个空格
HTML+CSS学习记录02--HTML_第2张图片
所以用空格符号
HTML+CSS学习记录02--HTML_第3张图片

4、快速生成模板
HTML+CSS学习记录02--HTML_第4张图片
HTML+CSS学习记录02--HTML_第5张图片
5、元素的属性
HTML+CSS学习记录02--HTML_第6张图片
如:


html学习

6、link标签
放在head里
链接外部样式表
HTML+CSS学习记录02--HTML_第7张图片

a标签:放在body里,从一个网页跳到另一个网页

7、语义化标签
每个HTML元素都有其具体的含义:

网页标题: title
网页内容标题: h1~h6
段落: p
强调: strong
头部元素: header
导航元素: nav
主要内容: main

8、a标签

  • 用法
跳转: 链接⽂本
锚点: 

HTML+CSS学习记录02--HTML_第8张图片
HTML+CSS学习记录02--HTML_第9张图片

  • target属性
    在这里插入图片描述
    brank:打开新的浏览器标签
    在新网页跳转 否则在当前页面跳转

  • 路径
    HTML+CSS学习记录02--HTML_第10张图片

9、图像img标签
HTML+CSS学习记录02--HTML_第11张图片
HTML+CSS学习记录02--HTML_第12张图片
线上图片–右键–复制图片地址
在这里插入图片描述
截图
当前目录下图片
在这里插入图片描述

只适用于小图片转换,否则占用大量内存:
HTML+CSS学习记录02--HTML_第13张图片
点击图片跳转:
在这里插入图片描述

10、表格table标签
table: HTML 表格
tr:元素定义表格⾏
th:数据中的表头单元格
td:表示单元格
HTML+CSS学习记录02--HTML_第14张图片
HTML+CSS学习记录02--HTML_第15张图片
在这里插入图片描述

table常用属性:

  • border(边框)
    在这里插入图片描述
    HTML+CSS学习记录02--HTML_第16张图片

  • cellspacing(规定单元格之间的空⽩)
    在这里插入图片描述
    HTML+CSS学习记录02--HTML_第17张图片

  • cellpadding(规定单元边沿与其内容之间的空⽩)
    在这里插入图片描述
    HTML+CSS学习记录02--HTML_第18张图片

  • colspan(⽤于合并列)
    HTML+CSS学习记录02--HTML_第19张图片
    HTML+CSS学习记录02--HTML_第20张图片

  • rowspan(⽤于合并⾏)
    HTML+CSS学习记录02--HTML_第21张图片
    HTML+CSS学习记录02--HTML_第22张图片
    11、列表ul、 ol标签

HTML+CSS学习记录02--HTML_第23张图片HTML+CSS学习记录02--HTML_第24张图片在这里插入图片描述

12、表单form标签
form标签:
使⽤场景需要提交⼀些信息到服务端的时候(前后端联调过程中)

  • 核心元素input (核⼼元素)
    HTML+CSS学习记录02--HTML_第25张图片
    在这里插入图片描述
  • label (提⾼交互体验的)
    HTML+CSS学习记录02--HTML_第26张图片
  • select(下拉框)
    HTML+CSS学习记录02--HTML_第27张图片
  • textarea(⽂本域)
  • button(按钮)
  • form(表单元素,提交每个表单项内容)

13、区块标签和行内标签

  • div
    HTML+CSS学习记录02--HTML_第28张图片
    div与div之间可进行换行
  • span
    HTML+CSS学习记录02--HTML_第29张图片
    HTML+CSS学习记录02--HTML_第30张图片
  • 块级元素
    在这里插入图片描述
    HTML+CSS学习记录02--HTML_第31张图片

你可能感兴趣的:(Java,JSP,css,html,前端)