HTML入门学习笔记

幻世界

已于 2022-02-25 10:19:16 修改

阅读量265

点赞数

分类专栏： # 技术发烧文章标签： html

于 2020-08-03 16:29:07 首次发布

本文链接：https://blog.csdn.net/qq_37310110/article/details/107767382

版权

技术发烧专栏收录该内容

11 篇文章 1 订阅

订阅专栏

欢迎加入Unity业内qq交流群：956187480

qq扫描二维码加群

前一段项目内部有个小的web界面需求，奈何项目组没有对位开发人员，后来就找了外面的朋友帮忙写了个界面。后来想着自己学习一下，拓宽一下知识维度，同时为后期打造个人网站做准备；以下笔记是学习b站千峰教育的视频实时记录的，以供后期翻阅

####快捷键
      Shift + end :从头选中一行
      Shift + home：从尾部选中一行
      Shift + alt + ↓：快速复制一行
      alt + ↑或者↓：快速移动一行
      tab：向后缩进
      tab+shift：向前缩进
      Ctrl+/ 注释单行
      Shift+Alt+A 创建注释标签，需选择内容后再按
web三大核心技术
      HTML 结构
      CSS  样式
      JavaScript 行为
1.HTML的基本结构和属性
      Html：超文本 标记 语言
      超文本：文本内容+非文本内容
      标记：也叫做标签，有单标签<>***和双标签的区分<>****</>,可嵌套
      语言：编程语言
      属性：鼠标放上去以后有个提示如：title = "***"
2.初始代码
      ！+Tab键，快速创建初始化html文件
      <!DOCTYPE html> 文档声明：告诉浏览器这是一个html文件
      <html lang="en"> html文件的最外层标签：包括这所有的html标签；lang="en"标示为英文网站 zh-CN中文网
      <head> 头标签标示网页的头部内容
                  <meta charset="UTF-8"> 元信息：是编写网页中的赋值信息
                  <title>Document</title> 设置网页标题
      </head>
                  <body>
                  显示网页内容
                  </body>
      </html>
3.标题与段落

      标题为双标签：<h1> </h1>  ...<h6></h6>； 在一个网页中，h1标签最重要，且一个html文件中只能出现一个h1标签，h5，h6标签在网页中不经常使用
      段落为双标签：<p></p>

4.文本修饰标签

      文本修饰标签为双标签：<strong></strong>，展示效果为加粗
      <em></em>也表示强调，展示效果与上不同为斜体
      下标上标 ：<sub>下标</sub>，<sup>上标</sup>
      删除文本插入文本：<del></del> <ins></ins> 一般都是两者配合使用
5.图片标签与图片属性
        
      img: 图片标签 单标签
      src: 图片地址，分相对路径和绝对路径./表示内部当前路径，../表示父级路径
      alt: 当图片出现问题的时候，显示友好的提示
      title: 提示信息属性 
      width，height：图片的像素大小尺寸，不做设置的话界面加载期间会忽略
6.跳转链接

      <a></a> 双标签
      href属性：链接的地址
      target属性：可以改变链接打开的方式，默认为在当前界面打开
      base 单标签 改变所有链接的默认行为
7.跳转锚点
      a.  <a href="#html">HTML</a>
            <h2 id="html">HTML超文本标记语言1</h2>    
      设置#标签，设置头id形成对应关系
      b.   <a href="#html">HTML</a>
            <a name="html"></a>
      设置#标签，设置name与#标签形成对应关系
8.特殊字符
      <>: &lt;&gt;
      空格：&nbsp;
      版权：&copy；
      注册商标：&reg；
      &：&amp；
      ¥：&ren；
      摄氏度：&deg；
9.列表标签
      列表之间可以形成嵌套形成多层列表
      无序列表
      a.无序列表 ，ul  li符合嵌套的规范两者内部不允许存在其他标签
      b.type，改变前面标记的样式有 disc，circle，square等，一般使用css控制



      有序列表
      a.有序列表,ol li符合嵌套的规范两者内部不允许存在其他标签
      b.type，改变前面标记的样式有 a，A，1,i等样式对应数字字母罗马文字

      定义列表:列表项需要添加标题进行描述的内容.
      <dl> 定义列表
      <dt> 定义专业术语或者名词
      <dd> 对名词进行解释和描述.

10.表格标签 属性
      table,表格的最为外层容器
      tr,定义表格行
      th,定义表头
      td,定义表格单元
      caption 定义表格标题
      
      相互之间是有嵌套关系的要符合嵌套规范
      语义化标签：tHead tBody tFoot 对界面没有任何效果影响只是一种写法规范
      在一个table中thead和tfoot只能出现一次
      属性：
      border：表格边框
      cellpadding：单元格内的空间
      cellspacing：单元格之间的空间
      rowspan：合并行
      colspan：合并列
      align：左右对齐格式 left right center
      valign：上下对齐格式 top middle bottom

11.表单标签与属性
      input表单标签：
      <form> 表单的最外层容器
      <input> 单标签 标签用于搜索用户信息，根据不同的type属性展示不同的控件，输入框 密码框 复选框等
      常用type属性：
      text:普通文本输入框
      password：密码输入框
      checkbox：复选框
      radio：单选框
      file：上传文件
      submit：提交按钮
      reset：重置按钮

      textarea：多行文本框
      select option:下拉菜单
      label：辅助标签使控件的触发范围变大 提升我们的用户体验
13.div与span
      div(块)
      全称division，分割分区的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落 标题表格，图像等各种网页元素，html中的大多数标签都可以嵌套在<div>标签中，div里面还可以嵌套多层div，用来将网页风格成独立的，不同的部分，来实现网页的规划和布局
      span(内联)
      用来修饰文字的，div和span都是没有任何默认样式的，需要配合css才行

欢迎加入Unity业内qq交流群：956187480

qq扫描二维码加群