HTML基础教程入门保姆级教学

什么是HTMLHTML全称Hyper Text Markup Language, 翻译成中文就是超文本标记语言是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言HTML 只有核心作用搭建网页的结构和内容你在浏览器里看到的所有东西都是靠 HTML 放上去的标题,段落文字,图片,按钮,链接,列表表单视频、音频等......一HTML的组成一个标准 HTML 网页一共分4 大部分1. 文档声明最顶部!DOCTYPE html告诉浏览器这是HTML5网页不是标签是声明整行固定写法不能更改2. 根标签 htmlhtml 所有内容都在这里 /html整个网页的最外层容器一个网页只能有一个里面包含head 和 body3. 头部 head给浏览器看head meta charsetUTF-8 title网页标题/title /headhead 网页头部给浏览器和搜索引擎看放标题、编码、适配、图标、样式、脚本用户看不见但非常重要4. 主体 body给用户看body h1我能被看到/h1 p文字、图片、按钮都在这/p /body网页真正显示的内容文字、标题、图片、链接、按钮、列表…用户看到的一切都在这里二HTML基础标签1标题标签h1h6数字越小字体越大。2段落标签 p定义段落用来放正文文字自带上下间距。3换行标签br强制换行单标签没有结束符号。4水平线标签 hr显示一条水平分割线用于分隔内容区域。5文本样式 加粗strong 斜体em 下划线u6. 图片标签 imgsrc图片地址 alt图片说明 width图片宽度 height图片宽度7. 超链接 ahref跳转地址8. 无序列表 ulli无序列表前面是小圆点用于并列内容。9. 有序列表 olli有序列表前面是数字顺序。10. 按钮 button定义按钮可点击用于提交、交互、触发事件。11. 输入框 input定义输入框单行输入内容。12.分区标签 div它是 HTML 里最常用、最万能的容器标签。专门用来装内容、分区域、做布局。把网页分成头部、导航、内容、侧边栏、底部等。把标题、段落、图片、按钮打包在一起方便管理。给 div 设置 class 或 id就能统一控制里面所有内容的样式。三、最常用、必须掌握的属性1. class给标签分类方便 CSS 统一设置样式。div classheader头部/div2. id给标签唯一名字一个页面只出现一次。div idlogoLOGO/div3. src放图片、视频、脚本的路径地址。img src图片.jpg script srcscript.js/script4. href放超链接地址。a hrefhttps://www.baidu.com点击跳转/a5. alt图片说明文字加载失败时显示利于 SEO。img srca.jpg alt风景图6. title鼠标放上去显示的提示文字。a href# title点我跳转链接/a7. width / height设置宽度、高度。img srcpic.jpg width200 height1008. target链接新窗口打开。a hrefhttps://www.baidu.com target_blank新窗口打开/a9. placeholder输入框里的提示文字。input typetext placeholder请输入账号10. type规定 input 是什么类型文本、密码、按钮等。input typetext 文本 input typepassword 密码 input typebutton 按钮四标签注意事项1. 标签必须正确嵌套不能交叉错误h1p标题/h1/p正确h1标题/h1 p段落/p标签不能交叉嵌套谁先开始谁先结束。2. 大部分标签要成对出现正确p/p div/div h1/h1只有少数单标签img br hr input3. 文件名和路径不要用中文、空格、特殊符号错误我的网页.html 图片 1.jpg正确index.html pic1.jpg浏览器对中文路径不友好容易找不到文件。4. 属性值要加引号错误img srcpic.jpg正确img srcpic.jpg所有属性值建议用双引号包裹。5. 一个网页只能有一个 h1h1 是最高级标题代表页面主题。h1网页主题/h1不要写多个 h1影响 SEO 和结构。6. 图片必须写 alt 属性img srclogo.png alt网站LOGO作用图片加载失败时显示文字方便搜索引擎识别图片7. 缩进要整齐方便阅读正确写法div h1标题/h1 p段落/p /div层级清晰后期维护极快。