关于百度网站的优缺点,网站建设中英文,嘉兴做网络推广的公司,Win10卸载wordpressHTML 基本语法 HTML#xff08;HyperText Markup Language#xff09;是构成网页内容的基础。它使用一系列的标签来描述网页的结构#xff0c;包括文本、图片、链接等元素。浏览器会解析这些标签并渲染成我们看到的网页。 在线体验一下 CodePen (在线 HTML 编辑器)。 千万不… HTML 基本语法 HTMLHyperText Markup Language是构成网页内容的基础。它使用一系列的标签来描述网页的结构包括文本、图片、链接等元素。浏览器会解析这些标签并渲染成我们看到的网页。 在线体验一下 CodePen (在线 HTML 编辑器)。 千万不要被「超文本」、「标记语言」吓到HTML 的语法非常直观常用的标签结构并不复杂用于构建基础网页已经足够稍微了解一下就能上手。 就是这些基本的标签结构却能让人优雅地组织你的网页内容专注于信息的呈现而不是纠结于如何显示达到“心中有页落笔成型”的境界。 HTML 文档结构 每个 HTML 文档都需要一个基本的结构声明文档类型并包含 html、head 和 body 等核心标签。 HTML 语法作用示例!DOCTYPE html声明文档类型为 HTML5html/htmlHTML 文档的根元素head/head包含文档的元数据如标题、字符编码等title/title定义文档的标题显示在浏览器标签上title我的网页标题/titlemeta charsetUTF-8定义字符编码为 UTF-8支持多种字符集body/body包含网页可见内容的主体部分h1/h1 到 h6/h6定义不同级别的标题h1主标题/h1, h2副标题/h2p/p定义段落p这是一个段落。/p 可选语法 (实际上是不同的 HTML 版本和doctype) 虽然 !DOCTYPE html 是 HTML5 的标准声明但以前的 HTML 版本有不同的doctype声明方式。现在推荐使用 HTML5 的简洁声明。 最佳实践 一个标准的 HTML 文档应该以 !DOCTYPE html 开头并包含 html、head 和 body 标签确保语义清晰和结构完整。 ✅ Do this❌ Dont do this使用 !DOCTYPE html 声明 HTML5忘记添加 !DOCTYPE html 声明包含 head 和 body 标签缺少 head 或 body 标签 HTML 标题 HTML 提供了六级标题标签 h1 到 h6用于表示不同级别的标题内容。 HTML 语法作用预览效果 (描述性)h1一级标题/h1定义一级标题页面中最主要的标题h2二级标题/h2定义二级标题次要的标题h3三级标题/h3定义三级标题更细分的标题h4四级标题/h4定义四级标题h5五级标题/h5定义五级标题h6六级标题/h6定义六级标题 可选语法 (无直接对应但强调语义化) 虽然可以使用 CSS 来改变标题的显示样式但应该根据内容的逻辑结构来选择合适的标题标签而不是仅仅为了改变字体大小而随意使用。 最佳实践 按照内容的逻辑重要性使用标题标签h1 用于最重要的标题依次递减。 ✅ Do this❌ Dont do this使用 h1 作为页面主标题为了加大字体而使用 h1忽略语义化按照标题层级嵌套使用 (h2 在 h1 下)跳跃使用标题标签 (例如 h1 后直接使用 h4) HTML 段落 p 标签用于定义段落将文本内容组织成独立的段落块。 HTML 语法作用预览效果 (描述性)p这是一个段落。/p定义一个段落文本会分段显示p这是第一个句子。br这是第二个句子。/p使用 br 换行在段落内换行显示 段落Paragraph用法的最佳实践 使用 p 标签包裹文本内容以清晰地划分段落。使用 br 标签在段落内进行换行。 ✅ Do this❌ Dont do this使用 p 标签组织文本内容依赖换行符或空格来分隔段落在需要换行的地方使用 br为了视觉效果而滥用 br 标签 HTML 文本格式化 HTML 提供多种标签用于格式化文本例如加粗、斜体等。 HTML 语法作用预览效果 (描述性)b加粗文本/b定义粗体文本文本显示为粗体strong重要文本/strong定义重要文本文本显示为粗体 (强调语义)i斜体文本/i定义斜体文本文本显示为斜体em强调文本/em定义强调文本文本显示为斜体 (强调语义)small小号文本/small定义小号文本文本显示为较小字号mark标记文本/mark定义标记文本文本背景高亮显示del删除文本/del定义删除文本文本带有删除线ins插入文本/ins定义插入文本文本带有下划线sub下标文本/sub定义下标文本文本显示为下标sup上标文本/sup定义上标文本文本显示为上标 文本格式化Text Formatting用法的最佳实践 根据语义选择合适的文本格式化标签。strong 和 em 更侧重于语义强调而 b 和 i 则更多是视觉呈现。 ✅ Do this❌ Dont do this使用 strong 标记重要的关键词或句子仅为了加粗而使用 b忽略语义化使用 em 强调需要突出显示的文本使用 i 代替 em 进行强调 HTML 列表 HTML 提供了有序列表、无序列表和描述列表三种类型的列表。 HTML 语法作用预览效果 (描述性)ulli项目 1/lili项目 2/li/ul定义无序列表生成带有项目符号的列表olli项目 A/lili项目 B/li/ol定义有序列表生成带有数字编号的列表dldt术语/dtdd描述/dd/dl定义描述列表生成带有术语和描述的列表li/li定义列表项包含在 ul 或 ol 中dt/dt定义描述列表中的术语包含在 dl 中dd/dd定义描述列表中术语的描述包含在 dl 中 列表List用法的最佳实践 根据信息的组织方式选择合适的列表类型。使用嵌套列表可以清晰地表示层级关系。 ✅ Do this❌ Dont do this使用 ul 创建无需特定顺序的项目列表使用段落和 br 标签模拟列表使用 ol 创建需要排序的项目列表混淆无序列表和有序列表的使用场景使用 dl 创建术语及其解释的列表在无序或有序列表中尝试模拟描述列表的效果 HTML 链接 a 标签用于创建超链接将用户导向其他网页、文件或同一页面的不同位置。 HTML 语法作用预览效果 (描述性)a hrefURL链接文本/a创建指向 URL 的链接链接文本显示为可点击的链接跳转到 URLa hrefURL target_blank链接文本/a在新标签页打开链接点击链接将在新的浏览器标签页中打开a hrefmailto:邮箱地址发送邮件/a创建邮件链接点击链接将打开用户的邮件客户端并填写收件人a href#section跳转到Section/a创建内部链接点击链接将滚动到页面中 ID 为 section 的元素 链接Link用法的最佳实践 为链接添加清晰的链接文本并根据需要使用 target 属性来控制链接的打开方式。 ✅ Do this❌ Dont do this使用描述性的链接文本 (例如 了解更多)使用 点击这里 等模糊的链接文本外部链接使用 target_blank 在新标签页打开所有链接都强制在新标签页打开影响用户体验 HTML 图片 img 标签用于在网页中嵌入图片。 HTML 语法作用预览效果 (描述性)img src图片URL alt图片描述插入图片在指定位置显示图片img src图片URL alt图片描述 width宽度 height高度指定图片尺寸按照指定的宽度和高度显示图片 图片Image用法的最佳实践 为 img 标签提供 src 属性指定图片路径并使用 alt 属性提供图片描述这对于可访问性和 SEO 非常重要。 ✅ Do this❌ Dont do this为所有 img 标签添加 alt 属性忽略 alt 属性影响可访问性使用有意义的 alt 文本描述图片内容使用 图片 或空 alt 属性尽量优化图片大小提高网页加载速度插入过大的图片导致网页加载缓慢 HTML 代码 HTML 提供了 code 和 pre 标签用于在网页中显示代码。 HTML 语法作用预览效果 (描述性)code行内代码/code表示行内代码代码以等宽字体显示在文本中pre多行代码/pre表示预格式化的文本代码块以原始格式显示保留空格和换行符precode带语法的代码/code/pre显示带语法的代码通常与 JavaScript 库一起使用以进行语法高亮 代码Code用法的最佳实践 使用 code 标签包裹行内代码使用 pre 标签包裹多行代码块。结合 JavaScript 库可以实现代码语法高亮。 ✅ Do this❌ Dont do this使用 code 标签标记行内代码直接在文本中输入代码导致格式不易区分使用 pre 标签显示多行代码手动使用空格和换行符来模拟代码显示考虑使用代码高亮库提升代码的可读性在技术文档中直接粘贴未格式化的代码 HTML 语义化标签 HTML5 引入了一些语义化标签用于更清晰地描述文档的结构和内容提高可访问性和 SEO。 HTML 语法作用示例article/article表示文档、页面或应用程序中独立的、完整的、可以独立分发或复用的内容一篇博客文章、一篇新闻报道aside/aside表示与周围内容相关但不属于主要内容的辅助信息侧边栏、广告、相关链接details/details表示用户可以展开或收起的内容摘要常见问题解答、产品详情figcaption/figcaption表示 figure 元素的标题图片的描述或标题figure/figure表示独立的流内容图像、图表等通常带有标题一张图片及其标题footer/footer表示文档或节的页脚版权信息、联系方式header/header表示文档或节的头部网站 Logo、导航菜单main/main表示文档的主要内容网页的主要信息区域nav/nav表示页面的导航链接网站的导航栏section/section表示文档中的一个 тематический 分组内容章节、主题分组summary/summary为 details 元素定义一个可见的标题常见问题解答的标题time/time表示日期或时间发布日期、活动时间 语义化标签Semantic Tags用法的最佳实践 使用语义化标签来组织 HTML 结构提高代码的可读性和可维护性并提升网页的可访问性。 ✅ Do this❌ Dont do this使用 article 包裹独立的文章内容使用 div 替代所有语义化标签使用 nav 包裹导航链接使用无序列表 ul 模拟导航缺少语义信息使用 footer 标记页脚信息将所有内容都放在 body 中缺乏结构 HTML 元素和属性 HTML 文档由一系列嵌套的元素组成。元素由开始标签、内容和结束标签构成。标签可以拥有属性提供关于元素的额外信息。 HTML 语法作用示例标签名内容/标签名定义一个 HTML 元素p这是一个段落。/p标签名 属性名属性值内容/标签名带有属性的 HTML 元素a hrefhttps://example.com链接/aclass类名定义元素的类名 (用于 CSS 样式)div classcontainer/divid唯一ID定义元素的唯一 ID (用于 CSS 和 JavaScript)div idheader/divstyleCSS 样式定义元素的内联样式p stylecolor: red;红色文本/p 元素和属性Elements and Attributes用法的最佳实践 合理使用 HTML 元素和属性来描述网页内容。避免过度使用内联样式推荐使用外部 CSS 文件来管理样式。 ✅ Do this❌ Dont do this使用合适的 HTML 元素来表达内容语义为了样式效果而滥用 div 和 span使用 class 属性为元素添加类名方便 CSS 管理大量使用 id 选择器提高 CSS 优先级不易维护尽量避免使用内联样式保持 HTML 结构的清晰将所有样式都写在 style 属性中导致 HTML 臃肿 就是这些基本的标签结构却能让人优雅地组织你的网页内容专注于信息的呈现而不是纠结于如何显示达到“心中有页落笔成型”的境界。 好的这次的内容就到这里啦 感谢你的阅读欢迎点赞、关注、转发 我们下次再见
