黑马程序员pink讲前端，第一天

Zww0891

于 2024-09-22 23:47:15 发布

阅读量878

点赞数 19

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/Zwwxd666/article/details/142446592

版权

前端专栏收录该内容

36 篇文章 1 订阅

订阅专栏

HTML

1）插件

自动闭合标签，修改开标签时闭标签跟着变（微信开发者工具没有这个功能）

主题

保存格式化

浏览器打开

实时刷新，不用按浏览器的刷新按钮

win+←/→ 快速分屏

2）初始结构标签

文档类型声明标签

DOCTYPE html 文档类型，也就是H5 标准

为什么要这个标签？因为多个浏览器的html有自己不一样的标准的话在你那边是16px在我这

才12px那不是乱了套了

必须在第一行
不是html标签，而是文档类型声明标签

html标签属性值

告诉浏览器是中文网站还是英文网站，设置为zh-CN你每次点开来就不会提示你是否要翻译为中文页面

字符集设置

设置html文档使用哪种字符编码（计算机识别用的），utf-8万国码，来自全世界的人访问不会出现乱码，无脑写这个就完事了，写别的可能只支持中文或者其他语言，例如gbk2312

没有设置编码格式的，打开后会这样

也就是说，charset字符编码设置是为了传递源代码能够正确被阅读所必须设置的。类似java里的idea里的编码设置utf-8，不设置的话里面的中文字符将无法被识别，直接乱码

3）常用标签

h标签/p标签/br标签…文字标签

独占一行，大小递减

由于html多个空格默认为1个，一大堆文字挤在一起太难看，使用p标签后末尾自动换行且增加上下边距，段落文字使用p标签，一行或者几个字母想要再换行用br标签

div/span标签

div独占一行，span一行多个

img

alt表示alternative 替换文本，当图片路径get不到，获取不到图片资源时显示，起一个备注作用

title，鼠标悬浮时提示

不用px单位

tips:最好只改一个，另一个会跟着等比缩放，如果设置了width和height会失真，扭曲

相框懂吧，不过后续用css设置

src也可以发get请求拿图片

a

anchor 全称译为锚点

内部/外部链接

直接输入index.html相对路径可以跳到自己写的另一个html 或者服务器ip+路径跳到别人的html

内部链接如果不是html，是zip点击后会自动下载该文件

锚点链接

设置id，#填id，这个能做同一页面滚动效果。有smooth跳转和一瞬间跳转instance

4）特殊字符

< 和>号用&lt &gt

5）表格

属性

tr-row

td-data

th-header

设置了border后会自动生成如下两个属性值

cellpadding，单元格的内边距

cellspacing 单元格之间的外宽有多宽，类似一条河流，护城河

结构

thead 和tbody 语义化表示头部和主题部分

合并单元格

写在合并单元格的第一个格子里，然后合并后被合并的单元格删除即可

自定义列表

definition list

definition title/data

6）表单

控件标签，input，提示信息，表单域form，用于收集所有数据作为请求体发送请求给服务器交互

input

后续input的name和value会使用一个插件进行收集数据，其作为对应标识

submit类型

reset类型

所见即所得，点一下表单清空

checkbox

追加设置name属性后，提交表单将所有name一样的checkbox 的value值作为数据提交到后端

<form action="/submit" method="post">
  <label>
    <input type="checkbox" name="fruits" value="apple"> 苹果
  </label>
  <label>
    <input type="checkbox" name="fruits" value="banana"> 香蕉
  </label>
  <label>
    <input type="checkbox" name="fruits" value="orange"> 橙子
  </label>
  <button type="submit">提交</button>
</form>