search
HomeWeb Front-endHTML Tutorial2015年10月15日学习html基础笔记_html/css_WEB-ITnose

一个互联网公司的分工,小公司要求全能,拿一个项目全部做出来。大公司分工明细,主要步奏为策划人员策划方案,美工人员设计图有.psd.rp等,前端人员做静态页面,后台人员获取数据java php .net。无论是处于那块的人员,都要对于其他的有所了解。

www网页服务,FTP文件上传下载,telnet远程控制

Apache2.2服务器

windows+r=运行,输入services.msc调出服务控制台

本地:127.0.0.1,访问自己本地服务器,需要使用Apache架起服务器之后,将文件放置到htdocs文件夹当中。安装Apache时要注意不能有中文文字不能有空格,可以直接安装到C盘下,不要安装到默认文件夹中。

主要使用的测试浏览器有IE、firefox、chrome、opera、safari

服务器端技术与客户端技术

常见的服务器端技术(运行在服务器上):

JSP/PHP/ASPX

(前端)常见的客户端技术(运行在浏览器上):

HTML/CSS/JS/SWF(flash)

计算机语言,HTML与JAVA/C/PHP不同,一门语言有三种结构,顺序执行、循环执行、选择执行。HTML里没有循环、选择等基本结构,只有纯文本和52个标签。

双标记标签:文本标签名>

单标记标签: 单标记标签中不能包含内容


水平线
换行

Meta标记的使用

多个关键字内容之间可以用“,”分割

设置描述:

设置作者:

设置字符集:或者utf-8

gb2312主要用于中文文字较多的,而utf-8是国标,在国际上使用较多。

设置页面定时跳转:

 

html与xhtml的区别,xhtml首先所有字母都小写,其次所有标记都要有关闭。

格式:内容标记>

 

不同标签具有不同的属性,所有标签都具备以下四个属性:

id:整个文档每个标签可以声明一个唯一的id号

style:为元素指定css样式

class:指定元素所属的类型

title:指定标签的弹出提示语

 

写代码前需要声明文档类型,否则会影响到css和javascript的解释执行,很多效果就会出不来。

文档类型声明:(所有工具都能生成这句话)

UTLIC “-//W3C//DTD XHTML1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

 

windows+d可以将桌面调出来。

 

meta data:元数据-描述数据的数据(视频1day02视频1的35分)

元数据,写在head里面title上面比较好,这样会告诉浏览器以下的文字内容以这个标准来解析。避免出现乱码问题。

 

转义字符:

正常来说是无法显示的,会被认为是告诉浏览器的语言,所以需要使用转义字符来显示到前台。

基本格式:&xxxx

空格   是 

&      是&

©      是©

?       是™

®       是®;

XHTML中不使用描述样式,都是使用CSS来控制样式,而在html中描述样式和描述语义是混杂的。例如,前面是描述样式,后面是描述语义,在xhtml中描述样式标签就不可存在了。xhtml中,代替

如今新网页中大多都是用的xhtml,为什么html却没被废弃呢?因为之前很多老网页没有修改过,都还是用的描述样式的方式,所以无法废弃,只是新的不再使用。

html元素类型,共有100多个元素类型,差不多各占一半,有的只能用于区块元素中,有的只能用于内联元素中。如果区块元素的用于内联元素中,那么效果就不会显示出来。

  1. 区块元素(block),必须自己独立占一行,例如
  2. 内联元素(inline),自己有多宽就占多宽,同时也与其他的处于同一行中。

内联标签:2015年10月15日学习html基础笔记_html/css_WEB-ITnose

区块标签:



    1. 描述标签:

      语义标签:

      分区元素用于为元素分组,常用与页面布局。

      块分区元素

      ,元素分组工具,用于内容分层和页面布局,需配合CSS使用

      行内分区元素需配合css和Js才有效果

       

      下标字:

      上标字:

       

      ctrl+d删除一整行

      ctrl+alt+↓复制一整行

       

      标题字在不同的浏览器默认字体高度、间距都是不一样,所以会存在兼容性的问题。要使用css来屏蔽这个问题。

      ,在html或者html5中“/”可以省略,但是在xhmtl中是不可以省略的。


      分隔线元素,创建一条水平线,常用属性为(size、width、align、color)

      2015年10月15日学习html基础笔记_html/css_WEB-ITnose通知浏览器此刻应该向服务器发起一个图片请求,src指定图片的URL,alt属性,如果图片无法显示则显示此文字来替代。

       

      html页面中可能用到资源:图片、css、js、另一个页面

      web开发用到的图片格式

      bmp:未经压缩的bit图,一般不用于web开发

      psd:ps的原始文档,支持层,页面中不直接使用

      tiff:出版印刷

      raw:太大

      jpeg:经过压缩的图片,保真度高,色彩丰富,适用于web中的照片,1024*768大压缩到100k甚至更小完全可以接受

      png:色彩没有jpg丰富,但是透明度支持的好,压缩比例大,适合于图标

      gif:色彩比较丰富,支持动画效果,也在一定程度支持透明度。

       

      链接的表现形式

      1. 目标文档为下载资源下载
      2. 电子邮件链接联系我们
      3. 返回页面顶部的空链接
      4. 链接到javascriptjs功能

       

      页面布局的三种方式:

      table的使用主要用于显示批量的数据,但是作为页面布局已经过时。

      div+css现在的主流

      html5布局标签,未来的趋势

       

      蓝色的是内容所占区域,橙色的是间距,绿色的是填充。

       

      form表单,用于收集用户的数据,提交给服务器。有两个属性,action是指定表单数据的处理页面,必须是动态页面。还有input type。

       

      地址栏url中最多输入字符不能超过1024个字节。

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Why are HTML attributes important for web development?Why are HTML attributes important for web development?May 12, 2025 am 12:01 AM

HTMLattributesarecrucialinwebdevelopmentforcontrollingbehavior,appearance,andfunctionality.Theyenhanceinteractivity,accessibility,andSEO.Forexample,thesrcattributeintagsimpactsSEO,whileonclickintagsaddsinteractivity.Touseattributeseffectively:1)Usese

What is the purpose of the alt attribute? Why is it important?What is the purpose of the alt attribute? Why is it important?May 11, 2025 am 12:01 AM

The alt attribute is an important part of the tag in HTML and is used to provide alternative text for images. 1. When the image cannot be loaded, the text in the alt attribute will be displayed to improve the user experience. 2. Screen readers use the alt attribute to help visually impaired users understand the content of the picture. 3. Search engines index text in the alt attribute to improve the SEO ranking of web pages.

HTML, CSS, and JavaScript: Examples and Practical ApplicationsHTML, CSS, and JavaScript: Examples and Practical ApplicationsMay 09, 2025 am 12:01 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML is used to build web page structure; 2. CSS is used to beautify the appearance of web pages; 3. JavaScript is used to achieve dynamic interaction. Through tags, styles and scripts, these three together build the core functions of modern web pages.

How do you set the lang attribute on the  tag? Why is this important?How do you set the lang attribute on the tag? Why is this important?May 08, 2025 am 12:03 AM

Setting the lang attributes of a tag is a key step in optimizing web accessibility and SEO. 1) Set the lang attribute in the tag, such as. 2) In multilingual content, set lang attributes for different language parts, such as. 3) Use language codes that comply with ISO639-1 standards, such as "en", "fr", "zh", etc. Correctly setting the lang attribute can improve the accessibility of web pages and search engine rankings.

What is the purpose of HTML attributes?What is the purpose of HTML attributes?May 07, 2025 am 12:01 AM

HTMLattributesareessentialforenhancingwebelements'functionalityandappearance.Theyaddinformationtodefinebehavior,appearance,andinteraction,makingwebsitesinteractive,responsive,andvisuallyappealing.Attributeslikesrc,href,class,type,anddisabledtransform

How do you create a list in HTML?How do you create a list in HTML?May 06, 2025 am 12:01 AM

TocreatealistinHTML,useforunorderedlistsandfororderedlists:1)Forunorderedlists,wrapitemsinanduseforeachitem,renderingasabulletedlist.2)Fororderedlists,useandfornumberedlists,customizablewiththetypeattributefordifferentnumberingstyles.

HTML in Action: Examples of Website StructureHTML in Action: Examples of Website StructureMay 05, 2025 am 12:03 AM

HTML is used to build websites with clear structure. 1) Use tags such as, and define the website structure. 2) Examples show the structure of blogs and e-commerce websites. 3) Avoid common mistakes such as incorrect label nesting. 4) Optimize performance by reducing HTTP requests and using semantic tags.

How do you insert an image into an HTML page?How do you insert an image into an HTML page?May 04, 2025 am 12:02 AM

ToinsertanimageintoanHTMLpage,usethetagwithsrcandaltattributes.1)UsealttextforaccessibilityandSEO.2)Implementsrcsetforresponsiveimages.3)Applylazyloadingwithloading="lazy"tooptimizeperformance.4)OptimizeimagesusingtoolslikeImageOptimtoreduc

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool