1. web HTML知识点

目录

一、HTML

1.HTML 文件基本结构 

2.标签层次结构

二、HTML常见标签

1.注释标签

2.标题标签h1 - h6

3.段落标签: p

4.换行标签br

5.格式化标签

6.图片标签 

7.超链接标签: a

8.表格标签

9.列表标签

10.表单标签

1.1form 标签

1.2input 标签

1.3select 标签 

1.4textarea 标签

 11.无语义标签: div & span

三、Emmet 快捷键

四、练习

1.简历展示

2.填写简历


一、HTML

  • HTML 代码是由 "标签" 构成的
hello
  • 标签名 (body) 放到 < > 中
  • 大部分标签成对出现. 为开始标签, 为结束标签.
  • 少数标签只有开始标签, 称为 “单标签”.
  • 开始标签和结束标签之间, 写的是标签的内容. (hello)
  • 开始标签中可能会带有 “属性”. id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)
hello

1.HTML 文件基本结构 


    
        第一个页面
    
    
       hello world
    

  • html 标签是整个 html 文件的根标签(最顶层标签)
  • head 标签中写页面的属性
  • body 标签中写的是页面上显示的内容
  • title 标签中写的是页面的标题

1. web HTML知识点_第1张图片

 2.标签层次结构

1. web HTML知识点_第2张图片

二、HTML常见标签

1.注释标签

注释不会显示在界面上,是为了提高代码的可读性

2.标题标签h1 - h6

HTML有六个标签, 从 h1 - h6.;数字越大,字体越小


hello

hello

hello

hello

hello
hello

1. web HTML知识点_第3张图片

3.段落标签: p

使用段落标签可以让我们观感更好

  • p 标签之间存在一个空隙
  • 自动根据浏览器宽度来决定排版
  • html 内容首尾处的换行, 空格均无效
  • 在 html 中文字之间输入的多个空格只相当于一个空格
  • html 中直接输入换行不会真的换行, 而是相当于一个空格


HTML的全称为超文本标记语言,是一种标记语言。

它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。

超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。 这些相互关联的信息媒体可能在同一文本中, 这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便

4.换行标签br

  • br 是一个单标签是不需要结束标签的
  • br 标签不像 p 标签那样带有一个很大的空隙

  • 是规范写法;不建议写成

     

5.格式化标签

  • 加粗: strong 标签 和 b 标签
  • 倾斜: em 标签 和 i 标签
  • 删除线: del 标签 和 s 标签
  • 下划线: ins 标签 和 u 标签
    
        strong 加粗
        b 加粗
        倾斜
        倾斜
        删除线
        删除线
        下划线
        下划线

1. web HTML知识点_第4张图片

6.图片标签 

  • img 标签必须带有 src 属性;表示图片的路径.
  • 此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中

img 标签的其他属性

alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字

title: 提示文本. 鼠标放到图片上, 就会有提示

width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡

border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定 

  • 1.属性可以有多个, 不能写到标签之前
  • 2. 属性之间用空格分割, 可以是多个空格, 也可以是换行.
  • 3. 属性之间不分先后顺序
  • 4. 属性使用 "键值对" 的格式来表示
鲜花

1. web HTML知识点_第5张图片

7.超链接标签: a

  • href: 必须具备, 表示点击后会跳转到哪个页面
  • target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开

7.1外部链接: href 引用其他网站的地址

跳转百度

点击蓝色字体就能跳转百度主页 

 7.2内部链接: 网站内部页面之间的链接. 写相对路径即可

1. web HTML知识点_第6张图片

 7.3空链接: 使用 # 在 href 中占位

空链接

7.4下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)

下载文件

 7.5网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中),点击图片跳转到网页


    

7.6锚点链接: 可以快速定位到页面中的某个位置

第一集
第二集
第三集

第一集剧情
第一集剧情

第二集剧情
第二集剧情

第三集剧情
第三集剧情

1. web HTML知识点_第7张图片

8.表格标签

  • table 标签: 表示整个表格
  • tr: 表示表格的一行
  • td: 表示一个单元格
  • th: 表示表头单元格. 会居中加粗
  • thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
  • tbody: 表格得到主体区域. table 包含 tr , tr 包含 td 或者 th
  • 跨行合并: rowspan="n" 跨列合并: colspan="n"

1. web HTML知识点_第8张图片

 练习:

公司费用收支统计表
日期 项目及用途 收入 支出 结余
现金汇入 贷款收入 其他收入 办公支出 日常支出 业务支出 资产总结余 银行账户结余 现金结余
0 0 0 0 0 0 0 0 0 0 0

1. web HTML知识点_第9张图片

9.列表标签

  • 无序列表: ul li
  • 有序列表: ol li
  • 自定义列表: dl (总标签) dt (小标题) dd (围绕标题来说明)

无序列表

  • 猫咪
  • 兔子
  • 小狗

有序列表

  1. 猫咪
  2. 兔子
  3. 小狗

自定义列表

宠物
猫咪
兔子
小狗

 1. web HTML知识点_第10张图片

10.表单标签

表单是让用户输入信息的重要途径. 分成两个部分

表单域: 包含表单元素的区域. 重点是 form 标签

表单控件: 输入框, 提交按钮等. 重点是 input 标签

1.1form 标签

描述了要把数据按照什么方式, 提交到哪个页面中,框出一块区域,作为整体提交到服务器

... [form 的内容]

1.2input 标签

  • 各种输入控件, 单行文本框, 按钮, 单选框, 复选框. type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等
  • name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选一
  • value: input 中的默认值
  • checked: 默认被选中. (用于单选按钮和多选按钮)
  • maxlength: 设定最大长度

1.2.1文本框


 1.2.2密码框

1.2.3单选框

1.2.4复选框

 吃饭  睡觉 
打游戏

1.2.5普通按钮


 1.2.6提交按钮

  • 提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送

1.2.7清空按钮

1.3select 标签 

  • 下拉选择

1. web HTML知识点_第11张图片

1.4textarea 标签


  • 可以拉动文本框,也可以在里面输入一些文字

1. web HTML知识点_第12张图片

 11.无语义标签: div & span

div 标签, division 的缩写, 含义是分割

span 标签, 含义是跨度

div 是独占一行的, 是一个大盒子. span 不独占一行, 是行内元素

 1. web HTML知识点_第13张图片

三、Emmet 快捷键

1. web HTML知识点_第14张图片

 四、练习

1.简历展示




    
    简历


某某某

基本信息

求职意向:Java 开发工程师

联系电话:XXX-XXX-XXXX

邮箱:[email protected]

我的 Gitee

我的 博客

教育背景

  1. 2007 - 2013 小学
  2. 2013 - 2016 中学
  3. 2016 - 2019 高中
  4. 2019 - 2023 大学

专业技能

  • Java 基础语法扎实
  • 常见数据结构都可以独立实现并熟练应用
  • 熟知计算机网络理论,并且可以独立排查常见问题
  • 掌握 Web 开发能力

我的项目

  1. 留言墙

    开发时间:2022年5月 - 2022年12月

    功能介绍:

    • 支持留言发布
    • 支持匿名留言

个人评价

勤奋上进,热爱生活

1. web HTML知识点_第15张图片

1. web HTML知识点_第16张图片

2.填写简历




    
    填写简历


请填写简历信息

性别
出生日期
毕业院校
应聘岗位
掌握技能
项目经历
确认信息

1. web HTML知识点_第17张图片

你可能感兴趣的:(Web学习,前端,HTML)