当前位置: 首页 > Web前端 > HTML

前端基础入门1(HTML)

时间:2023-04-02 18:21:40 HTML

学习目标了解常用浏览器掌握WEB标准了解标签语义掌握常用排版标签掌握常用文本格式化图片链接等标签掌握三种列表标签掌握表格标签掌握表格标签表单标签HTML第一天的目标是会写基本的页面(包括图片、各种标签和链接)开发工具我们主要使用的开发工具有chrome、hbuilder、Photoshop浏览器展示运行网页,常用的浏览器有IE、Firefox、Chrome、Safari和Opera。我们通常称之为五巨头浏览器。浏览器内核(理解)浏览器内核可以分为两部分:渲染引擎??(layoutengineer或RenderingEngine)和JS引擎。渲染引擎:负责获取网页的内容(HTML、XML、图片等),组织信息(如添加CSS等),计算网页的显示方式,然后将其输出到显示器或打印机。不同的浏览器内核对网页的语法解释不同,因此呈现的效果也不同。JS引擎解析Javascript语言,执行JavaScript语言,实现网页动态效果。起初,渲染引擎和JS引擎并没有明确区分。后来JS引擎越来越独立,内核往往只指渲染引擎。有一个WebStandardsInitiative小组制作了ACID来测试引擎的兼容性和性能。内核有很多种。如果加上很少人使用的非商业免费内核,可能有10多种,但常见的浏览器内核可以分为这四种:Trident、Gecko、Blink和Webkit。需要理解的一点:移动端的浏览器内核主要是指系统内置浏览器的内核。就Android手机而言,Webkit内核是用的最多的。国内浏览器大多自称有自己的内核,基本属于Webkit的二次开发。在iOS和WP7平台上,由于系统原因,大部分系统都有自己的浏览器内核,通常是Safari或IE内核Trident的web标准。设备接入3.更容易被搜索引擎搜索到4.降低网站流量成本5.使网站更易于维护6.提高页面浏览速度。是HTML。最重要的性能标准:性能用于设置网页元素的布局、颜色、大小等外观样式,主要指的是CSS。行为标准:行为是指网页模型的定义和交互的书写。我们主要学的是JavascriptHTML。它是一种用于描述网页的语言。所谓超文本,因为它可以添加图片、声音、动画、多媒体等内容,不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机上的文件连接起来。

我是大标题

注:体会文本标记语言几句话HTML指的是超文本标记语言(HyperTextMarkupLanguage)HTML不是一种编程语言,而是一种标记语言(markuplanguage)标记语言是一组标记标签(markuptag)概述:HTML的作用是用标记标签来描述网页,并在浏览器中显示网页内容。HTML骨架格式骨架结构分析1HTML标签:作为HTML中所有标签的根节点。最大标签根标签2head标签:文档的头部文档的头部描述了文档的各种属性和信息,包括文档的标题、它在Web上的位置以及它与其他文档的关系。大多数文档的标题中包含的数据实际上并不作为内容显示给读者。注意我们必须在head标签中设置的标签是title3.title标签:文档标题的作用:让页面有自己的标题。4.body标签:在文档主体之后,我们的页面内容基本都放在了body里面。body元素包含文档的所有内容(例如文本、超链接、图像、表格和列表等)。HTML标签在HTML页面分类中,带有“<>”符号的元素称为HTML标签,比如上面提到的HTML、head、body都是HTML骨架结构标签。所谓标签就是放置在“<>”标签符号中表示某种功能的编码命令,也称为HTML标签或HTML元素“表示标签作用的开始,一般称为”开始标签(starttag)",""表示标签作用的结束,一般称为“结束标签(endtag)”。与开始标签相比,结束标签只是在标签中增加了一个结束字符“/”例如,我是文字2.单标签标签也叫空标签,是指用一个标签符号就可以完整描述某种功能的标签。例如,
HTML标签关系标签之间的关系分为两种:1.嵌套关系2.并列关系body>常用的HTML标签首先,HTML和CSS是两种完全不同的语言,我们学的是结构,所以我们只需要写HTML标签,只需要知道标签就可以了。结构标签不再有样式。HTML标签有很多,这里先学习最常用的,后面还有一些比较少用的,看说明书就可以了。排版标签标题标签(记忆)单词缩写:headhead。titletitle文档标题为了让网页更加语义化,我们经常在页面中使用title标签。HTML提供了6级标题,即

,基本语法格式如下:titletextparagraph标签(记忆)

文本内容

横线标签(知识)
是单标签换行标签(记忆)
divspan标签(强调)divspan是无意义的,是我们网页布局的主要两个框css+divdiv是division的缩写partition,partition的意思是其实有很多div来组合网页。跨度,跨度,跨度;range语法格式:
Thisisthehead
Today'sprice文本格式化标签(记忆)在网页中,有时需要为文本设置粗体、斜体或下划线效果,然后您需要使用HTML中的文本格式化标签以特殊方式显示文本。bisu只能在没有强调的情况下使用。strongemdelins具有更强的语义。标签属性在使用HTML制作网页时,如果希望HTML标签提供更多的信息,可以使用HTML标签的属性来进行设置。它的基本语法格式如下:content在上面的语法中,1.一个标签可以有多个属性并且必须写在开始标签中,标签名称之后。2、属性没有先后顺序,标签名与属性、属性与属性之间用空格隔开。3.任何标签的属性都有默认值,如果省略该属性,则取默认值。取键值对的格式,key="value"的格式例如:属性是宽度值为400图片标签img(强调)字缩写:image的实现HTML网页中的任何元素都必须依赖于HTML标签,如果要在网页中显示图片,就需要使用image标签。下面详细介绍图片标签及其相关属性。其基本语法格式如下:该语法中的src属性用于指定图片文件的路径和文件名,是img标签的必备属性。链接标签(强调)词缩写:锚点[???k?(r)]的缩写。锚点和铁锚点的基本解释在HTML中创建超链接非常简单,只需用标签包围要链接的对象即可,基本语法格式如下:textorimagehref:用于指定链接目标的url地址,当href属性应用于标签时,具有超链接的功能。超文本参考的缩写。表示超文本引用目标:用于指定链接页面的打开方式,其值有self和blank两种,其中self为默认值,blank为在新窗口中的打开方式。注:1.外部链接需加http://www.baidu.com2.内部链接可直接链接内部页面名称,如首页3.如果链接target此时还没有确定,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为空链接。4、不仅可以创建文本超链接,还可以在网页中为各种网页元素添加超链接,如图片、表格、音频、视频等。锚定位(难点)通过创建锚链接,用户可以快速定位目标内容。创建锚链接分为两步:1.使用"ahref="#idname>"linktext"创建链接文本(点击)2.使用对应的id名称标记了跳转目标的位置。Episode2
基础标签基础标签可以设置整体链接的开启状态。Base写入,所有连接默认加上target="_blank。"特殊字符标签(理解)注释标签HTML中还有一个特殊的标签——注释标签。如果需要在HTML文档中添加一些易于阅读和理解但又不需要在页面上显示的注释文本,就需要使用comment标签。其基本语法格式如下:ctrl+/或ctrl+shift+/评论的内容不会显示在浏览器窗口中,但也会下载到用户的On上您的计算机,您可以在查看源代码时看到它。路径(重点、难点)在实际工作中,通常会新建一个文件夹来存放图像文件。这时候在插入图片的时候,就需要使用“路径”的方式来指定图片文件的位置。根目录当前目录路径可分为:相对路径和绝对路径相对路径是根据引用文件的网页所在位置建立的目录路径。因此,当存放在不同目录下的网页引用同一个文件时,所使用的路径就会不同,因此称为相对路径。图像文件和HTML文件在同一个文件夹中:只需输入图像文件的名称,如imgsrc="logo.gif"/。图片文件位于HTML文件的下层文件夹:输入文件夹名和文件名,以“/”分隔,如imgsrc="img/img01/logo.gif"/。图片文件位于HTML文件的上层文件夹:文件名前加“../”,如果是上两层,则需要使用“../../”,以此类推,比如imgsrc="../logo.gif"/。绝对路径绝对路径是以网站根目录为基准的目录路径。之所以叫绝对是指当所有网页引用同一个文件时,使用的路径都是同一个“D:webimglogo.gif”,或者是一个完整的网址,比如“http://www.itcast.cn”/图片/我...”。总结一下今天的思路贯穿列表标签无序列表ul(强调)无序列表的各个列表项之间没有顺序级别,它们是并列的。基本语法格式如下:
  • Listitem1
  • Listitem2
  • Listitem3
  • ...
注意:
    中只能嵌套
  • ,不允许在
      标签中直接输入其他标签或文字。
    • 之间相当于一个可以容纳所有元素的容器。无序列表会有自己的style属性,放下那个style,让CSS来吧!有序列表ol(理解)有序列表是一个有排序顺序的列表,每个列表项都是按照一定的顺序排列定义的。有序列表的基本语法格式如下:
      1. Listitem1
      2. Listitem2
      3. Listitem3
      4. ...
      所有特征与ul基本一致。但是在实际工作中很少使用olimgsrc="media/1.jpg"/>自定义列表(理解)。定义列表通常用于解释和描述术语或名词。定义列表的列表项前没有项目符号。基本语法如下:
      名词1
      名词1解释1
      名词1解释2
      ...
      名词2
      Noun2Explanation1
      Noun2Explanation2
      ...
      Table表(会用到)创建表格在HTML网页中,创建一个表格,你需要使用表格相关的标签。创建表格的基本语法格式如下:......
      Textinthecell
      在上面的语法中,有三对HTML标签,分别是table标签中,一对包含几对,表示该行有多少列(或多少个单元格)。注意:1、中只能嵌套2、标签就像一个容器,可以容纳所有元素表属性的header标签header是一般位于表格的第一行或第一列,其文字以粗体居中,如下图所示,即设置了表头的表格。设置表头很简单,将对应的单元格标签td:用于定义表格的标题。必须位于
      标签中,一般包含网页的logo、导航等头部信息。:用于定义表格的主体。位于
      标签中,一般包含网页中除头部和底部以外的其他内容。表格标题表格的标题:标题定义和用法caption元素定义表格标题。
      我是表格的标题
      caption标签必须紧跟在table标签后面。每个表只能定义一个表头。通常这个标题将位于表格的中央。合并单元格(难点)跨行合并:rowspan跨列合并:colspan合并单元格的思路:合并多个内容时,会有多余的东西,删掉。比如三个tds合并为一个,就会有两个多余的,需要删除。公式:删除数=合并数-1合并顺序FirstupFirstleftSummarytableTable提供了一种在HTML中定义表格数据的方法。表格由行中的单元格组成。表中没有列元素,列数取决于行中的单元格数。表格不要担心外观,这就是CSS所做的。表格学习要求:能手写表格结构,合并单元格。表单标签(master)表单控件:包含特定的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等提示信息:一个表单通常需要包含一些说明文字提示用户填写和操作。表单域:相当于所有表单控件和提示信息的容器,通过它可以定义用于处理表单数据的程序的url地址和向服务器提交数据的方法。如果不定义表单域,则表单中的数据无法发送到后台服务器。inputcontrol(强调)在上面的语法中,input/label是一个单一的标签,type属性是它最基本的属性。有各种值来指定不同的控件类型。除了type属性,input/tag还可以定义很多其他的属性,其常用属性如下表所示。label标签(理解)label标签定义输入元素的注解(标签)。作用:用于绑定一个表单元素。当label标签被点击时,绑定的表单元素将获得输入焦点。如何绑定元素?for属性指定标签绑定到哪个表单元素。Maletextarea控件(文本域)如果需要输入很多信息,你可以需要使用textarea/textarea标签。通过textarea控件可以很方便的创建多行文本输入框,其基本语法如下:文本内容下拉菜单使用select控件定义下拉菜单的基本语法格式如下注意:select