前端自学之路(HTML)

96 阅读2分钟

HTML是前端三大基础之一

什么是HTML

HTML叫做‘超文本标记语言’,超文本标记就是标签, 标签通常是成对出现的 比如 <div> </div> 把前端比作一个房子,那么HTML就是房子的骨架

HTML主要就记住一些标签用法;

主要标签(用得比较多的标签)

div 没有语义,是一个大盒子,一行只能放一个 ,(布局用)

span 没有语义,是个小盒子,一行可以放多个(布局用)

h1--h6标题,独占一行,显出重要性,

p 分段落

br 单标签,分行

strong 显粗体,为了重要性

em 显斜体 ,

del 删除线

ins 下划线

图片标签

<img src="图片所在路径 /xx.jpg" alt='xxx'> 图像标签 ,单标签

src 图像标签的路径 ,是必须属性

alt 图像属性,替换文本(图像显示不出来时的提示语)

title 图像属性,提示文本(鼠标放在图像上显示文字)

width 设置图像宽度,单位为像素 不用刻意写在标签内

height 设置图像高度,单位 像素

图像标签可以有多个属性,但属性必须放在标签后面

格式 属性="属性值"

超级链接 <a href="值跳转页面" target ="目标窗口弹出的的方式"> 文本或图像 为链接标签

href 链接标签的必须属性,不知道地址时 值可以为 #

<a href="https://baidu.com" target="_parent">跳转</a>

列表标签

  • ul 无序列表 组合标签 每个列表项都是 li 标签 可以放置任何标签

  • ol 有序列表 可以通过type属性设置序号的类型,如ABCD,罗马数字。。。

  • dl 定义列表 dt数据项,dd数据定义 表格标签

  • table表格标签,与 tr td 标签共同组合使用;tr为表格行 td为列(也是表格的数据) 表单标签 form 表单 所有HTML表单都由一个from标签开始

输入框标签

  • input 输入框 type 属性设置类型,
  • radio单选按钮,
  • checkbox复选按钮,
  • label标签包裹input标签,点击字也能切换小圆点的切换状态
  • input 的type 值password为密码框,隐藏

select下拉菜单标签,内部是option标签对是选项

textarea 文本框标签,有cols,rows属性设置文本框的高宽大小(容纳的)

表单常见三种按钮 都是input标签 type属性设置为button普通按钮,submit为提交按钮,reset为重置按钮

<audio src ='音频地址' controls> </audio> 音频标签

video src ='视频地址' controls> </audio> 视频标签

controls 为显示播放控件

image.png

image.png