HTML入门体验

天边小狮
91 阅读4分钟

※※※※※※※※※※※※※ 本文共有1468字 ※※※※※※※※※※※※※

HTML hypertext MarkUp Language 超文本标记语言

  1. 用来描述网页的语言，其中含有大量的HTML标签，学习HTML其实就是学习组成HTML的标签
  2. HTML不是一种编程语言，而是一标记语言
  3. 现在来说HTML有三种 ，分别是HTML4.0、HTML5.0、XHTML，其中XHTML由HTML发展演变而成，是一种严格模式下的HTML
  4. HTML文档就是一种HTML文件，后缀名为.html 或 .htm、一个HTML文档主要有以下部分
    • DTD 文档声明 其中DTD是为了让浏览器辨认网页标准，有利于网站的SEO
      • DTD 文档类型定义
      • SEO 搜索引擎优化
    • 头部标签 主要设置网页标题，网页小图标，引入外部样式，帮助网站进行SEO优化
    • 主要实现网页内容 大部分的代码都在body中
  5. 一个网页一般有三层组成分别是结构层、样式层、逻辑层
    • 结构层 HTML标签
    • 样式层 CSS层叠样式表
    • 逻辑层 js代码
  6. HTML中标签、属性、元素之间的关系 <a href="" > good good study </a> a是标签 href是标签a中的一个属性 元素 = 标签 + 属性 + 标签中的内容

HTML中的标签

  1. HTML中的标签一般成对出现，一般分为单标签 、双标签 常见的单标签有<hr /> 添加分隔线 <br />换行
  2. 标签的分类还可根据其自有属性分为 block inline inline-block
    • 其中块标签独占一行，可以设置宽高，默认宽度为父元素的100%
    • 内联标签大小随内容改变，不可以设置宽高 ，不会独占一行
    • 内联块标签大小随内容改变，可以设置宽高，不会独占一行
  3. h1-h6标签 ，经常使用h1包裹住网站的logo来增强SEO
  4. p标签 paragraph 段落标签 默认添加了magin 是一个block标签 支持自动换行
  5. 文本设置的相关标签
    • <strong></strong> <b></b>都表示加粗 strong强调的含义更重
    • <em></em> <i></i> 都表示倾斜 em强调含义重
    • <del></del> <s></s> 都表示删除线 del含义重
    • <ins></ins> <u></u> 都表示下划线 ins含义重
    • 推荐使用含义重的标签 弃用 b i s u
  6. div 和 span
    • div division 分隔 分割 帮助我们实现网页的布局 是一个block标签没有特殊含义
    • 使用div实现圣杯布局时通常有两种方法 一、实现浮动 、二弹性布局 flex
    • span 也没有特殊含义 是一个行内标签 inline
  7. image标签
    • 是一个行内块标签，常用属性有 src alt（图片未显示时展示、有利于SEO）；tittle（鼠标移入停留后展示 ）；height width border
  8. a标签 anchor 锚点
    • 格式 <a href="" target ="" >文本或图片</a>
    • 主要属性有 href 添加链接地址；target打开的目标地址 _blank（在新页面打开） _self（在当前页面打开，默认值）；
    • 链接的分类，一般有内部链接：在一个网站内进行跳转；外部链接、锚点链接、其他链接
    • 锚点链接，格式<a href="#xxx"> <p id="xxx"></p>，点击链接后会跳转至指定标签处
    • 其中顶部锚点比较特殊，当在底部设置好<a href ="#top"></a>不用设置<p id="top"></top>就可以实现跳转
    • 其中#top 还可以省略为# 也可实现跳转
    • <a href =""></a> 和<a href="#"> 都可以实现跳转到页面开头位置，只不过前者会重新刷新页面
  9. 列表标签
    • 主要有有序标签、无序标签、自定义标签
    • 分别是 ol li ul li dl dt dd
    • 英文缩写分别为 order list unorder definition term description
  10. 表格标签 table
    • 常用标签有
    • 常用属性有 width height border
    • cellpadding：表示单元格内容与单元格边框之间的margin大小
    • cellspacing: 表示单元格边框之间的距离
    • 多个单元格合并，分为行合并以及列合并，
    • 设置格式为<td colspan="x"></td>表示从当前单元格开始要合并的列单元格的数量
    • colspan:表示列合并 rowspan：表示行合并
  11. form 表单
    • 常见属性action，表示表单提交时的路径，包含的其他标签
    • input标签有重要的type属性 可以设置多种样式 常见的有 text number password radio checkbox
    • seclct+option 标签可以设置下拉选项框
    • textarea 可以设置输入内容区域
  12. lable for id
    • 在鼠标点击姓名时，会自动获取焦点到输入框中
    <lable for="uname">姓名</lable> 
<input id ="uname" type ="text"></input>
补充知识：
  1. 路径分为相对路径和绝对路径
    • 相对路径：相对于当前目录下的文件路径 ./ 表示当前目录（可以忽略不写） ../表示上级目录 ../../ 表示上上级目录
    • 绝对路径：在计算机上存储的绝对地址，URL也是绝对路径
  2. 文本分类 ：纯文本和超文本
    • 纯文本表示只有文字，没有样式，用记事本打开不会出现乱码
    • 超文本 ：文字+样式 常见的有Word文档、视频、音乐、程序、链接等
  3. SEO 搜索引擎优化(Search Engine Optimization)
  4. DTD 文档类型定义(Document Type Definition)
avatar
文章
阅读
粉丝