HTML笔记

文章目录

  • 1.什么是HTML、CSS?
  • 2.VSCode编辑器?
  • 3.chrome浏览器?(谷歌浏览器)
  • 4.深入了解网上开发?
  • 5.web前端的三大核心技术?
  • 6.HTML基本结构和属性?
  • 7.HTML初始代码?
  • 8.HTML注释?
  • 9.标题与段落?
  • 10.文本修饰标准?
  • 11.图片标签?
  • 12.引入文件的地址路径
    • 相对路径
    • 绝对路径
  • 13.链接标签?
  • 14.跳转锚点
  • 15.特殊符号
  • 列表标签
    • 1.无序列表(< ul>< /ul>、< li>< /li>)
    • 2.有序列表(< ol>< /ol>、< li>< /li>)
    • 3.定义列表
  • 表格
    • 表格标签
    • 表格属性
  • 表单
    • 表单标签
    • 表格表单组合
  • div 与 span

1.什么是HTML、CSS?

(html与css相互配合)

  • 是做网站的编程语言。
  • 浏览器把代码解析后的样子就是我们看到的网站,如何看到网页的原始代码呢?通过鼠标右键查看与网页源代码。
  • 如何去写代码?写到哪里呢?
  • 一个网站是由N多个网页组成的。 每一个网页就是一个.html文件
  • 比喻:网站就像电视剧,由很多集组成。

2.VSCode编辑器?

  • VS cobe下载地址:地址
  • 如何安装插件? 主要插件:语音包(Chinese)、open in browser、view in borwser
  • 方法、作用(由于软件下载好后,其内容全部都是英语,这时咱们可以在最左侧图标找到扩展,在里面搜索安装一些插件,Chinese插件可以将内容改为中文,open in browser插件可以在编辑器点击鼠标左键找到Open ln Default Browser打开( 运行) 编写好的html文件。view in borwser插件可以在编辑器菜单上点击鼠标左键找到View ln Browser打开(运行)编写好的html文件(两者作用都一样,只是打开方式不一样))
  • 学习编辑器基本使用?
  • 设置:文件(在左上角)->首选项->设置(字体大小,、是否换行(自动折行)word wrap)
  • 创建文件、创建文件夹、重命名和删除
  • 快捷键
  • ctrl+s:保存
  • ctrl+a:全选
  • ctrl+x、ctrl+c、ctrl+v:剪切、复制、粘贴
  • ctrl+z、ctrl+y:撤销(后退一步)、前进(前进一步)
  • shift+end:从头选中一行
  • shifr+home尾部选择一行
  • shift+allt+↓:快速复制一行
  • alt+↑或↓:快速移动一行
  • tab:向后缩进
  • tab+shift:向前缩进
  • 多光标:alt+鼠标左键
  • ctrl+d:选择相同元素的下一个

3.chrome浏览器?(谷歌浏览器)

  • Chrome下载地址:地址

4.深入了解网上开发?

一个网页是由下面三种职位相互合作开发

  • UI设计师:设计稿
  • web前端开发工程师(H5开发):将设计稿转成代码、将数据库里的数据显示到页面、HTML+CSS(HTML:结构、CSS:样式)
  • wen后端开发工程师:把网站产生很多数据存储起来

5.web前端的三大核心技术?

  • HTML:结构
  • CSS:样式
  • JavaScriot:行为

6.HTML基本结构和属性?

  • HTML:超文本,标记语言。
  • 超文本:文本内容+非文本内容(图片、视频、音频等)
  • 标记:<单词>
    标记叫做标签:比如

    写法分成两种:
    1. 单标签
    2. 双标签
  • 语言:编程语言
  • 创建标签的快捷键:单词+tab键可以转换为<单词>(如果是单标签会转换为单标签,如果是双标签会转换为双标签)
  • 标签是可以上下排列,也可以组合嵌套
  • HTML常见标签:HTML5元素标签含义大全
  • 标签的属性:来修饰标签的,设置当前标签的一些功能。
  1. <标签 属性=“值” 属性2=“值2”>

7.HTML初始代码?

  • 每个.html文件都有的代码叫做初始代码,要符合html文件的规范写法。
  • !+tab建:快速的创建html的初始代码
     文档声明:告诉浏览器这是一个html文档
<html lang="en">             html文件的最外层标签。包裹着所有html标签代码      lang="en"表示是一个英文网站       lang="zh-CN"表示一个中文网站
<head>
   <meta charset="UTF-8">      元信息:是编写网页中的一些赋值信息。charset="UTF-8"国际编码,让网页不出现乱码情况。charset属性规定html文档的字符编码,防止乱码 
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Documenttitle>    设置网页的标题
head>
<body>
   	显示网页内容的区域
body>
html>

8.HTML注释?

  • 写法:<!-- 注释的内容 -->在浏览器中看不到,只能在代码中看到注释的内容。
  • 意义:
  1. 把暂时不用的代码注释起来,方便以后使用。
  2. 对开发人员进行提示
  • 快捷添加注释与删除注释:
  1. ctrrl+/
  2. shift+alt+a

9.标题与段落?

  • 标题是双标签:

  • 在一个网页中,h1标签最重要,并且一个.html文件中只能出现一次h1标签。
  • h5、h6标签在网页中不经常使用。
  • 段落是双标签:

10.文本修饰标准?

  • 强调->双标签:``
  • 区别:
  1. 写法与展示效果是有区别的,对加粗字体斜体
  2. 强调性更强。强调性稍弱
    强调性稍弱
  • 下标文本:
  • 上标文本:
  • 删除文本:
  • 插入文本:﹤ins>
  • 注:一般情况下,删除文本都是和插入文本配合使用的
  • 图例
  1. a2+b2=c2
a<sup>2sup>+b<sup>2sup>=c<sup>2sup>
  1. H2O
H<snb>2snb>O
  1. 促销:原价300,现价100
促销:原价<del>300del>,现价<ins>100ins>

11.图片标签?

  • (单标签)向网页中镶入一部图像,具有以下属性。
  1. src:引入图片的地址
  2. alt:当图片出现问题的时候,可以显示一段友好的提示文字
  3. title:提示信息,当我们把鼠标放到标签上时,该提示信息就会显示出来。(所有html标签都可以拥有)
  4. width、height:控制图片的大小,单位是像素(直接输入数字)。建议设置该属性,这样可以在页面加载时为图像预留空间。如果没有这些属性,浏览器就无法了解图像的尺寸,也就无法为图像保留合适的空间,因此当图像加载时,页面的布局就会发生变化。
  5. 写法:
< img  src="图片地址"  alt="图片出现问题,代替图片的文字"  width="***"  height="***">

12.引入文件的地址路径

相对路径

  1. 以引用文件之网页所在位置为参考基础,而建立出的目录路径。
    . 在路径中表示当前路径,通常情况下可省略
    . . 在路径中表示上一级路径
  2. 图像文件和html文件位于同一文件夹:只需输入图像文件 的名称即可,如< img src=”logo.gif” />。
  3. 图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如< img src=”img/img01/logo.gif” />。
  4. 图像文件位于HTML文件的上一级文件夹:在文件名之前加入“…/”,如果是上两级,则需要使用 “…/ …/”,以此类推,如< img src=”…/logo.gif” />

绝对路径

绝对路径是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。

  • 编写文件的时候,绝对路径在电脑的任何一个文件中都能够找到(需要写全部的路径,从什么盘开始)
  • 格式比喻:
  1. D:/Hbulider/HBuilder/tools/nview/index.js(文件绝对路径)
  2. http://c.biancheng.net:80/view/7410.html(网络绝对路径)

13.链接标签?

  • href属性:链接属性
  • target属性:可以改变链接打开的方式,默认情况下:在当前页面打开_self 新窗口打开_blank(如果只想要在当前页面打开,可以不用设置target属性)
  • 单标签:作用就是改变链接的默认行为(该标签是写在初始标签中的标签中的)
  • 图例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <base target=_blank>(在这里)
head>
<body>
    
body>
html>

14.跳转锚点

  • 跳转锚点:在页面内跳转到指定地点
  • 跳转锚点也是用 < a>< /a> 标签实现,有两种实现方式:
  1. #+ id属性(id必须是唯一的)
  • 图例:


<html lang="en">
<head>
    <meta charset=

你可能感兴趣的:(笔记)