HTML基础

目录

一，HTML结构

1.认识HTML标签

2.HTML文件基本结构

3.标签层次结构 （父子&兄弟）

二，HTML常见标签

1.注释标签

2.标题标签：h1~h6

3.段落标签：p

4.换行标签：br

5.格式化标签 

(1).加粗：strong & b

(2).倾斜：em & i

(3).删除线：del & s

(4).下划线：ins & u

 6.图片标签：img

 7.超链接标签：a

 8.表格标签

（1）基本使用

（2）合并单元格

 9.列表标签

 10.表单标签

(1)form 标签

(2)input标签

11.lable标签

12.select标签

13.textarea标签

 14.无语义标签: div & span

三，案例展示

 

---

一，HTML结构

1.认识HTML标签

HTML代码是由“标签”构成的

——开始标签

hello——标签的内容

——结束标签

 注意：

只有开始标签为“单标签”

开始标签中可能会带有"属性"，id属性相当于给这个标签设置了唯一的标识符

 

hello

2.HTML文件基本结构

   整个文件的根标签

    写页面属性
    
  

     
   hello world
  

3.标签层次结构 （父子&兄弟）

  
    
  
  
   hello world
  

head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)

title 是 head 的子标签. head 是 title 的父标签

head 和 body 之间是兄弟关系.

二，HTML常见标签

1.注释标签

ctrl + / 快捷键可以快速进行注释/取消注释.

2.标题标签：h1~h6

hello

hello

hello

hello

hello

hello

数字越大, 则字体越小

3.段落标签：p

这是一个段落

第一段

第二段

注意：

(1)p 标签之间存在一个空隙
(2)当前的 p 标签描述的段落, 前面还没有缩进.
(3)自动根据浏览器宽度来决定排版.
(4)html 内容首尾处的换行, 空格均无效.
(5)在 html 中文字之间输入的多个空格只相当于一个空格.
(6)html 中直接输入换行不会真的换行, 而是相当于一个空格.

4.换行标签：br

 注意：

(1)br 是一个单标签(不需要结束标签)
(2)br 标签不像 p 标签那样带有一个很大的空隙.
(3)
是规范写法. 不建议写成

5.格式化标签 

(1).加粗：strong & b

(2).倾斜：em & i

(3).删除线：del & s

(4).下划线：ins & u

strong 加粗
b 加粗

倾斜
倾斜

删除线
删除线

下划线
下划线

 6.图片标签：img

必须带有 src 属性. 表示图片的路径

img 标签的其他属性
     alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
     title: 提示文本. 鼠标放到图片上, 就会有提示.
     width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
      border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.

 

src="rose.jpg" alt="鲜花"

title="这是一朵鲜花"

width="500px"

height="800px"
border="5px">

关于目录结构：

 1) 相对路径:

以 html 所在位置为基准, 找到图片的位置.
同级路径: 直接写文件名即可 (或者 ./)
下一级路径: image/1.jpg
上一级路径: ../image/1.jpg

使用相对路径: 创建一个 image 目录和 html 同级, 并放入一个 rose2.jpg

使用相对路径2: 在 image 目录中创建一个 html, 并访问上级目录的 rose.jpg

2) 绝对路径:

一个完整的磁盘路径, 或者网络路径. 例如
磁盘路径 D:\rose.jpg
网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png

使用绝对路径1: 

使用绝对路径2: 使用网络路径

alt="">

7.超链接标签：a

百度

注意：

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

(1).外部链接: href 引用其他网站的地址

百度

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

我是 1.html

点我跳转到 2.html

我是 2.html

点我跳转到 1.html

(3).空链接: 使用 # 在 href 中占位

空链接

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

下载文件

(5).网页元素连接：可以给图片等任何元素添加链接

  

(6).锚点链接: 可以快速定位到页面中的某个位置

第一集
第二集
第三集

 第一集剧情

 第一集剧情

 ...

 第二集剧情

 第二集剧情

...

 第三集剧情

 第三集剧情

...

 8.表格标签

（1）基本使用

(1).table 标签: 表示整个表格
(2).tr: 表示表格的一行
(3).td: 表示一个单元格
(4).th: 表示表头单元格. 会居中加粗

注意：table 包含 tr , tr 包含 td 或者 th.

(5).thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
(6).tbody: 表格得到主体区域.

表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置.
这些属性都要放到 table 标签中.
align 是表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式)
border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框.
cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素
width / height: 设置尺寸.

height="500">
  
    
    
    
  

  

    
    
    
  

  

    
    
    
  

姓名	性别	年龄
张三	男	10
李四	女	11

（2）合并单元格

跨行合并: rowspan="n"
跨列合并: colspan="n"

1. 先确定跨行还是跨列
2. 找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)
3. 删除的多余的单元格

9.列表标签

无序列表[重要] ul li 
有序列表[用的不多] ol li
自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题

注意：

元素之间是并列关系
ul/ol 中只能放 li 不能放其他标签, dl 中只能放 dt 和 dd
li 中可以放其他标签.
列表带有自己的样式, 可以使用 CSS 来修改. (例如前面的小圆点都会去掉)

无序列表

  
• 咬人猫

  
• 兔总裁

  
• 阿叶君

有序列表

  
1. 咬人猫

  
2. 兔总裁

  
3. 阿叶君

自定义列表

  

我的老婆们

  

咬人猫

  

兔总裁

  

阿叶君

 10.表单标签

表单是让用户输入信息的重要途径

分成两个部分:
表单域: 包含表单元素的区域. 重点是 form 标签.
表单控件: 输入框, 提交按钮等. 重点是 input 标签

(1)form 标签

 ... [form 的内容]

(2)input标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框

1) 文本框

2) 密码框

 3) 单选框

男
女

4) 复选框

爱好:
吃饭 睡觉
打游戏

5) 普通按钮

6) 提交按钮

  
  

7) 清空按钮

  
  
  

8) 选择文件

11.lable标签

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验

for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应.

男

12.select标签

  北京
  上海

  --请选择年份--
  1991
  1992
  1993
  1994
  1995

13.textarea标签

<br>  <br>

 14.无语义标签: div & span

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

  咬人猫
  咬人猫
  咬人猫

  兔总裁
  兔总裁
  兔总裁

  阿叶君
  阿叶君
  阿叶君

三，案例展示

 

某某某


  
基本信息
  
  
求职意向：Java 开发工程师
  
联系电话：XXX-XXX-XXXX
  
邮箱：[email protected]
  
我的 github
  
我的 博客



  
教育背景
  

    
1990 - 1996 小葵花幼儿园 幼儿园
    
1996 - 2002 小葵花小学 小学
    
2002 - 2005 小葵花中学 初中
    
2005 - 2008 小葵花中学 高中
    
2008 - 2012 小葵花大学 计算机专业 本科
  



  
专业技能
  

    
Java 基础语法扎实，已经刷了 800 道 Leetcode 题；
    
常见数据结构都可以独立实现并熟练应用；
    
熟知计算机网络理论，并且可以独立排查常见问题；
    
掌握 Web 开发能力，并且独立开发了学校的留言墙功能。
  



  
我的项目

    

      
留言墙
      
开发时间：2008年9月 到 2008年12月
      
功能介绍：
      

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

  

  
学习小助手
  
开发时间：2008年9月 到 2008年12月
  
功能介绍：
  

    
支持错题检索
    
支持同学探讨
  






  
个人评价
  
在校期间，学习成绩优良，多次获得奖学金。