keyipatience:个人主页作者简介C/C后端开发学习者专栏传送门《c》《linux》《c高阶数据结构》《c数据结构与算法》《前端学习》⭐️patience is key in lifeHTML 标签认识成对标签body开始标签/body结束标签中间写标签内容单标签只有开始标签没有闭合属性写在开始标签里面格式属性名值例body idmyIdhello/bodyid给标签唯一身份标识前端用不会提交给后端HTML 基础骨架html head title第一个页面/title /head body hello world /body /htmlhtml根标签整个页面最外层head页面配置信息里面内容不会直接显示在网页上title浏览器标签栏标题body网页可见内容文字、图片、表单全部写在这里标签层级关系DOM 树父子被包裹的是子标签外面包裹的是父标签html 是 head、body 的父标签title 是 head 的子标签兄弟同一个父标签下面平级、互不包裹head 和 body 互为兄弟所有标签组合在一起叫做DOM 树文档对象模型查看网页结构浏览器F12/ 右键【检查】→ Elements 面板查看 DOM 结构HTML5 标准骨架! 自动生成模板!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body /body /html逐行解释!DOCTYPE html文档类型声明告诉浏览器这是 HTML5 网页。 不是 html 标签只是声明放在最顶部。html langen根标签。langen代表页面是英文写langzh-CN就是中文网页。 作用浏览器翻译功能识别语言。meta charsetUTF-8设置字符编码非常重要meta nameviewport contentwidthdevice-width, initial-scale1.0移动端适配widthdevice-width网页宽度 手机屏幕宽度initial-scale1.0页面初始缩放比例 1 倍不放大缩小做手机网页才重点用电脑页面可暂时了解。titleDocument/title浏览器标签栏的标题body/body表单、文字、图片全部写在 body 里面。HTML 常见标签HTML 注释写法!-- 我是注释 --浏览器不会渲染显示只给写代码的人看用来解释代码快捷键Ctrl /快速添加 / 取消注释原则注释和代码逻辑保持一致方便看懂代码标题标签 h1 ~ h6一共 6 级标题h1一级标题字号最大一个页面建议只用 1 个 h1h2二级标题h3三级标题h4四级标题h5五级标题h6六级标题字号最小egp 段落标签p第一段文字/p p第二段文字/pHTML 空白规则代码里写多个连续空格网页只显示1 个空格代码里直接敲回车换行页面不会换行只当成 1 个空格代码首尾多余空格、换行全部忽略想实现页面换行用br单标签 想输入多个空格nbsp;eg!-- 代码里很多空格页面只显示一个空格 -- p你好 世界/pbr 换行标签单标签不用写结束标签规范写法br/br浏览器也能识别但推荐br/对比 p 标签br/只是单纯换行没有上下空白间距p段落换行自带一段上下空隙hr 水平线标签单标签规范写法hr/作用在页面画一条水平分割线用来分隔两块内容文本格式化标签粗体 / 斜体等加粗: strong 标签和 b 标签倾斜: em 标签和 i 标签删除线: del 标签和 s 标签下划线: ins 标签和 u 标签strongstrong 加粗/strong bb 加粗/b em倾斜/em i倾斜/i del删除线/del s删除线/s ins下划线/ins u下划线/u效果带语义推荐优先写不带语义只改样子加粗strong代表重要内容b单纯文字变黑变粗没有 “重要” 含义斜体em代表需要着重强调i单纯文字倾斜删除线del代表被删掉、作废的内容s单纯画删除线下划线ins代表新插入、新增的内容u单纯画下划线有含义用语义标签纯美化用 b i s u。img 图片标签单标签基础写法img srcrose.jpgsrc 是必须写的属性代表图片路径常用属性src路径图片地址必填alt替换文本图片加载失败时显示这段文字无障碍必备title提示文字鼠标悬浮在图片上弹出提示width500px/height800px宽高建议只改一个另一个自动等比例缩放两个都写容易图片拉伸变形5.border5px边框现在开发一般用 CSS 写egimg srcrose.jpg alt鲜花 title这是一朵鲜花 width500px height800px border5px属性规则多个属性写在标签内部属性之间空格隔开属性不分先后顺序格式属性名值键值对形式路径重点1相对路径推荐项目搬家不容易崩以当前 html 文件为基准同级rose.jpg图片和 html 放同一个文件夹或者./rose.jpg项目文件夹 ├─ index.html └─ rose.jpg ← 图片直接和html放一起下一级文件夹image/1.jpg,或者./image/1.jpg项目文件夹 ├─ index.html └─ image └─1.jpg上一级文件夹../image/1.jpg项目文件夹 ├─ image │ └─1.jpg └─ html文件夹 └─ index.html ← html在这里要往上跳一层才能找到image2绝对路径本地磁盘D:\rose.jpg不推荐换电脑就失效网络图片https://xxx.png互联网图片地址a 超链接标签成对标签a/ahref必须写点击跳转的地址URItarget打开方式_self默认当前页面直接替换跳转_blank新标签页打开6 种链接形式1. 外部链接跳别的网站写完整网址带http:///https://a hrefhttp://www.baidu.com target_blank百度/a2. 内部链接本站网页之间跳转相对路径!-- 1.html -- a href2.html点我跳转到2.html/a !-- 2.html -- a href1.html点我跳转到1.html/a3. 空链接暂时没想好跳转地址占位#占位点击回到页面顶部不会刷新页面a href#空链接/a4. 下载链接href 指向文件zip、pdf 等浏览器触发下载a hreftest.zip下载文件/a5. 网页元素链接图片加超链接把 img 标签包在 a 里面点击图片跳转以前是点击文字跳转现在是点击图片#点击图片跳转到搜狐 a hrefhttp://www.sogou.com img srcrose.jpg alt /a6.锚点链接页面内跳转跳到当前页面某个位置原理href#id名目标标签设置id名字!DOCTYPE html html langzh-CN head meta charsetUTF-8 title锚点演示/title /head body !-- 1. 跳转按钮href#xxx #后面写目标id名称 -- a href#part1跳到第一部分/a nbsp;nbsp; a href#part2跳到第二部分/a nbsp;nbsp; a href#part3跳到第三部分/a brbrbrbrbr !-- 2. 目标位置标签上写 id名字id前面不加# -- !-- 第一部分 -- h2 idpart1第一部分内容/h2 p这里是第一部分很长的文字……/p brbrbrbrbr !-- 第二部分 -- h2 idpart2第二部分内容/h2 p这里是第二部分内容/p brbrbrbrbr !-- 第三部分 -- h2 idpart3第三部分内容/h2 p这里是第三部分内容/p !-- 回到顶部锚点 -- brbrbrbr a href#返回顶部/a /body /html表格标签 table基础标签嵌套顺序table整个表格容器tr table row一行td table data普通单元格th table header表头单元格默认居中 加粗thead表头区域包裹表头行语义标签tbody表格主体区域包裹数据行语义标签嵌套规则table里面放trtr里面放td/th层级table → tr → td/th加不加thead和tbody外观无差别作用是给浏览器 / 程序员区分表头区域和数据区域属于语义标签。table 的属性写在 table 标签上老式属性后期都用 CSSaligncenter整个表格在页面居中不是单元格文字居中border1边框数字越大边框越粗border无边框cellpadding20单元格内容到单元格边框的距离内边距cellspacing0单元格与单元格之间的空隙外边距width/height表格整体宽高注意这些老式属性 VSCode 不会自动提示开发优先 CSS。示例代码table aligncenter border1 cellpadding20 cellspacing0 width500 height500 tr td姓名/td td性别/td td年龄/td /tr tr td张三/td td男/td td10/td /tr tr td李四/td td男/td td11/td /tr tr td王五/td td女/td td12/td /tr /tablethead tbody 版本带语义推荐写法!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body table aligncenter border1 cellpadding20 cellspacing0 width500 height500 thead tr th姓名/th th性别/th th年龄/th /tr /thead tbody tr td张三/td td男/td td10/td /tr tr td李四/td td男/td td11/td /tr tr td王五/td td女/td td12/td /tr /tbody /table /body /html表格合并单元格 colspan rowspancolspan跨列合并→ 横向占几列rowspan跨行合并→ 纵向占几行合并之后被合并掉的单元格要删掉!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body table aligncenter border1 cellpadding20 cellspacing0 width500 height500 thead tr td姓名/td td性别/td td年龄/td /tr tbody tr td colspan2张三/td !-- td男/td -- td10/td /tr tr td李四/td td男/td td rowspan211/td /tr tr td王五/td td女/td !-- td12/td -- /tr /tbody /thead /table /body /html