网页设计与网站制作html

1、李岩 138 115 84384专业方向、就业前景、学习状态等代码之美/技术之美基础识记；中、高级灵活运用敲代码，赏析各种优秀网页，模仿制作，拓展理论（专业术语、书籍）。赏析网页地址：http:/ 父元素和子元素必须正确嵌套父子，祖，后代 网页的文本内容浏览器处理空格与换行字符编码指定-链接、图像其他文本内容文件夹、文件名小写，有意义名称，便于组织扩展名/后缀名.html名称分割线用短横线绝对地址相对地址同目录子目录上层目录根相对地址Html描述的是网页内容的含义，即语义。语义化html指的是那些使用最恰当的html元素进行标记的内容，在标记过程中并不关心内容显示。语义化html优势：访问性、

2、操作性无障碍访问seo优化易于添加样式加载快块级元素、行内元素规划网站（赏析网址）创建、编辑网页保存网页指定默认主页组织站点文件在浏览器中查看网页及源代码浏览器插件不分大小写，但推荐大写首字母 非必须，推荐加，搜索引擎根据lang属性指定语言区分搜索结果页面标题页面标题title、搜素引擎优化、样式、js（javascript）仅title可见分级标题h1h6，依据层次关系选择标题级数，避免跳级，不要标记副标题，标题对的搜索引擎重要性，尤其h1H1h6是块级元素带导航的页头显示在主体内容区域的文章显示次要信息的附注栏页脚 标签定义文档的页眉（介绍信息）。如果页面中有一块包含一组介绍性或导航性内

3、容的区域，用header元素进行标记。一个页面可以有任意数量的header元素，含义根据上下文有所不同。通常，页眉包括网站标志，主导航，其他全站链接，搜索框。通常，header包括其自身的标题（h1-h6）。Header作为页面级页眉时，添加role=“banner”提高访问性。如果h1-h6能满足需求就没有必要用header将它包起来。不能在header里嵌套footer或另一个header，也不能在footer或者address里嵌套headerHeader不必需包含nav，除非header包含导航性链接。 Header是块级元素 标签定义导航链接的部分。Nav中的链接可以指向页面中的内容

4、也可以指向其他页面或资源，或者两者兼而有之。仅对文档中重要的链接群使用nav添加role=“navigation”属性可以提高访问性不推荐对辅助性的页脚链接使用nav，除非再次显示顶级全局导航或其他重要链接。不允许将nav嵌套在address中nav是块级元素 标签规定文档的主要内容。一个页面只有一个部分代表其主要内容，该元素在一个页面仅使用一次，就可以将这样的内容包在main元素里。在一个文档中，不能出现一个以上的 元素。 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。在main开始标签中添加role=“main”属性

5、可以帮助屏幕阅读器定位页面的主要区域。不能将main放在article、aside、footer、header、nav中，即： 元素不能是以上元素的后代。main是块级元素article表示文档、页面、应用或网站中一个独立的容器，是可以独立分配或可再用的部分，可以是一篇帖子、一篇文章、一篇博文、一条评论、一篇影评、一个案例、一个产品描述、一个交互式的小部件或小工具，或者任何其他独立的内容项。可以将article嵌套在另一个article中，只要里面的article与外面article是整体与部分关系。一个页面可以有多个article一个article可以包含一个或多个section在artic

6、le里包含独立的h1h6是很好的做法article是块级元素Section元素代表文档或应用的一个一般的区块、文档中的区段，比如章节、页眉、页脚或文档中的其他部分。section是具有相似主题的一组内容，通常包含一个标题。Section是页面中的特定区域，是有语义的，与div不同。Section在本质上组织性和结构性更强，而article代表的是自包含的容器。section是块级元素页面中一个与主题内容、或者附近的内容有相关性且可以独立存在的部分用aside标签定义。重要的引述、文章的侧栏、指向相关文章的一组链接（如新闻网站）、广告、nav元素组（如博客的友情链接）、相关产品列表（如电子商务网

7、站）如果aside嵌套在页面主要内容内（而不是作为侧栏位于主要内容之外）则其中的内容应与其所在的内容密切相关，而不是仅与页面整体内容相关。给aside添加role=“complementary”提高可访问性。在html中应该将aside放在main内容之后对于与内容有关的图片，使用figure不允许将aside嵌套在address元素内aside是块级元素 标签定义页面或节的页脚，页脚通常包含文档的作者、版权声明、指向隐私政策的链接、使用条款链接、联系信息等等，与header一样，也可以用在其他地方。 元素内的联系信息应该位于 标签中。footer元素代表嵌套它的最近的article、asid

8、e、blockquote、body、details、fieldset、figure、nav、section、td元素的页脚，只有当它最近的祖元素是body时，它才是整个页面的页脚。如果一个footer包着它所在区块（如一个article）的内容，它代表的是像附录、索引、版权页、许可协议这样的内容。通常，页脚位于所在元素的末尾。可以在一个文档中使用多个 元素。不能在footer里嵌套header或另一个footer，也不能将footer嵌套在header或address元素里。仅对页面级footer使用role=“contentinfo”footer是块级元素 可定义文档中的分区或节（divis

9、ion/section）。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。当需要在一段内容外包围一个容器，从而可以为其应用css样式或javascript效果，又不需要考虑语义时，可以添加一个完全没有任何语义的容器divdiv应该作为最后一个备用容器，适合所有页面容器而无需使用新的html5元素div是块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。这意味着它的内容自动地开始一个新行。实际上，换行是 固有的唯一格式表现。可以通过 的 class 或 id 应用额外的样式。（ class 用于元素组（类似的元素，或者可以理解为某

10、一类元素），而 id 用于标识单独的唯一的元素。 ）作为内容区块的主要语义化容器header，footer,aritcle、section、aside、nav可以用在任何地方。Div适合所有页面容器，而无需使用新的html5元素，但是要把它作为最后一个备用容器。ARIA的地标角色role属性role=“banner”横幅，添加到页面级的header元素，一个页面只用一次role=“navigation”导航，可以每个页面使用多次，但是同 nav一样，不要过度使用该属性role=“main”主体在每个页面仅使用一次role=“complementary”补充性内容 可以在一个页面里包含多个com

11、plementary，不要过度使用该属性role=“contentinfo”内容信息在每个页面仅使用一次ARIA的地标角色用于提升用户体验，对页面外观没有影响。给html元素指定id或类别，或同时指定id和类别，推荐以指定类别为主。Id=“name”class=“name anothername”一个页面不能出现两个具有相同id的元素，且每个元素只能有一个id。一个页面可以有一个以上的class。元素可以同时拥有id和任意数量的class尽量避免使用描述表现样式的名称可以为任何元素添加title提升无障碍访问功能，不过用的最多的是链接结束 标签定义段落，是块级元素，p元素会自动在其前后创建一些

12、空白(这个空白也可以用css样式调整)。标签表示细则一类的旁注，包括免责声明、注意事项、法律限制、版权信息、署名、满足许可等。small元素通常是行内文本中的一小块，small元素呈现小号字体效果。 标签也可以嵌套，从而连续地把文字缩小，每个 标签都把文本的字体变小一号。small只适用于短语,内容较多时应该采用p元素。 可插入一个简单的换行符。 标签是空标签（意味着它没有结束标签）。使用 来输入空行，而不是分割段落。 标签被用来组合文档中的行内元素。 标签没有固定的格式表现，没有语义，只适合包围字词或短语内容。可以应用 id 或 class 属性，这样既可以增加适当的语义，又便于对应用样式。

13、HTML的 等标签都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式，但实际上，这些标签都拥有确切的语义。如果您只是为了达到某种视觉效果而使用这些标签的话，需要使用样式表标签把文本定义为强调的内容。文字用斜体来显示,除强调之外，当引入新的术语或在引用特定类型的术语或概念时作为固定样式的时候，也可以考虑使用 标签。标签把文本定义为语气更强的强调的内容。 标签和 标签一样，用于强调文本，但标签强调的程度更强一些。和是行内元素在需要突出显示文本时使用标签，用于提醒读者对特定文本片段的注意。 标签定义公历的时间（24 小时制）、日期或时间。使用datetime 属性规定日期或时间。不能在 里嵌

14、套另一个 也不能在没有datetime属性的time元素中包含其他元素，只能包含文本。是行内元素语法：日期或时间。下面解释了其中的成分：YYYY - 年 (例如 2011)MM - 月 (例如 01 表示 January)DD - 天 (例如 08)T - 必需的分隔符，若规定时间的话hh - 时 (例如 22 表示 10.00pm)mm - 分 (例如 55)ss - 秒 (例如 03) 标签定义文档或文章的作者/拥有者的联系信息。大多数时候联系信息的形式是作者的电子邮件地址或指向联系信息页的链接，或者是作者的通讯地址。 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后

15、添加折行。如果 元素位于 元素内，则它表示文档联系信息。如果 元素位于 元素内，则它表示文章的联系信息。 标签通常表示它所包含的文本是对某内容源的引用，比如某参考文献、书籍或者杂志的标题。引用的文本默认将以斜体显示。如果引用的这些文档有联机版本，还应该在这个标签内部把引用包括在一个 标签中，从而把一个超链接指向该联机版本。属于行内元素。 标签定义简短的引用。浏览器经常在引用的内容周围添加引号添加引号。 标签在本质上与是一样的。不同之处在于它们的显示和应用。 标签用于简短的行内引用，并且引用内容不能跨越不同的段落。如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），请使用 标签。 标签

16、定义块引用。 元素包围的所有文本都会从常规文本中分离出来，显示在新一行，在左、右两边进行缩进（即增加外边距）。 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。 标签就是为他们设计的。只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 标签。pre 元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符，文本也会呈现为等宽字体，它是计算机代码示例的理想元素。 标签的一个常见应用就是用来表示计算机的源代码。如果你的代码需要显示，应该分别使用<和>如果你的代码需要显示引号

17、，应该使用"/不变。 标签指示简称或缩写，比如 WWW 或 NATO。通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。可以在 标签中使用全局的 title 属性，这样就能够在鼠标指针移动到 元素上时显示出简称/缩写的完整版本。也可以同时将全称放在缩写词后面的括号里。当含有title属性是firefox浏览器会添加下划虚线以引起注意。例：The PRC was founded in 1949. 标签可标记首次定义的术语（不是包围定义），后续使用术语时不再需要使用dfn对其进行标记。现在流行的浏览器通常用斜体来显示 中的文本。 标签可定义上标文本。包含在 标

18、签和其结束标签 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。 标签可定义下标文本。包含在 标签和其结束标签 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。如果和 标签结合起来使用，就可以创建出很好的超链接脚注。 标签定义已经被插入文档中的文本。 标签定义已经被删除的内容。两个元素一同使用，来描述文档中的更新和修正。属性 值 描述Cite URL 指向另外一个文档的 URL，此文档可解释文本被插入的原因。Datetime YYYYMMDD 定义文本被插入的日期和时间。 标签规定独立的流内容（图像、图

19、表、照片、代码等等）。请使用标签为 figure 添加标题。 标签定义figure元素的标题。用作文档中插图的图像，带有一个标题。figcaption 元素应该被置于 figure元素的第一个或最后一个子元素的位置。img 元素向网页中嵌入一幅图像。请注意，从技术上讲， 标签并不会在网页中插入图像，而是从网页上链接图像。 标签有两个必需的属性：src 属性 和 alt 属性。图像尺寸：属性值 描述heightpixels/% 定义图像的高度。widthpixels/% 设置图像的宽度。JpgGifPngWebpSvgIcon网站图标Retina显示屏在相同的空间里，它拥有的像素数量是普通显示屏

20、的像素数量的四倍。 标签标示任务的进度（进程）。结合 标签与 JavaScript 一同使用，来显示任务的进度。属性属性 值值 描述描述max number 规定任务一共需要多少工作。value number 规定已经完成多少任务。20%80%指向另一个网页的链接url会显示在状态栏，title文字会显示在链接旁边。块链接包含块级元素锚链接创建锚id=“name”href=“#name”，href=“a.html#name”其他类型链接指向万维网任何文件（图片、压缩包、程序、pdf、docx等）mailto:tel:国家代码和电话号码一条css样式规则由两部分组成：选择器 + 声明块选择器：告

21、诉浏览器网页上哪个元素或哪些元素定义了要进行样式设置；声明块：以左” ”开始，以右”结束；声明：一个属性+一个值，并以一个分号结束；放在之间属性：css提供的格式化选项属性，表示一种特定的样式效果；值：给属性赋值，类型有颜色、长度、url、关键字等。声明的顺序不重要样式规则的注释/* */ 可以包含多行描述，通常加在每组规则前1.应用在一个标签上的css属性被传递到嵌套标签上的过程称为继承。（继承也在多代间进行） 2.继承不是万能的，许多css属性不传递给派生标签，如border,padding等属性。3.可以利用继承的优势简化样式表并使之更有效。影响网页上的元素位置的属性、页边距和元素的边框

22、不被继承；当样式发生冲突时，更具体的样式胜出。关于“层叠”：当规则发生冲突时指定浏览器应该如何处理应用给同一个标签的多个样式的问题，以及当css属性相冲突时该做什么。当一个标签继承多个祖先的样式时以什么方式进行格式设置？*.直接应用于元素的样式击败所有继承来的样式；*.顺序：最近的样式胜出（最后定义的样式胜出）*.特殊性：哪种样式胜出（见下图）*.重要性：在某条规则的末尾加上!important.如：pcolor:red!important; 但不推荐使用。 !important行内 ID 类 元素任何值预定义值长度和百分数纯数字urlCss颜色Rgb十六进制rgbahsl和hslaCss样式

23、结构Css样式样式（单独）（单独）声明声明(块块)声明声明1声明声明2声明声明3属性属性值值css3手册手册.chm颜色、长度、颜色、长度、url、关键字、关键字一个网页需要多个css样式css样式表；一个样式表可能是两种存在形式嵌入样式表、外部样式表（样式放置的位置）嵌入样式表（又叫内部样式表）h1color:#ff6600;外部样式表内联样式表（又叫行内样式） 受影响的文字外部样式表rel:表示链接类型这里表示链接到样式表的一个链接；href:指向网站中那个外部css文件的位置，该属性值是一个url。创建一个内联样式表如果你必须改变单张网页的单个元素的样式时使用。不省时间，不节省宽带，只有

24、紧要关头用。Css样式表结构Css样式表样式表（集合）（集合）Css样式样式（单独）（单独）选择器选择器声明声明(块块)声明声明1声明声明2声明声明3属性属性值值css3手册手册.chm颜色、长度、颜色、长度、url、关键字、关键字嵌入样式嵌入样式表表外部样式表外部样式表内联样式内联样式表表可以指定用于特定输出的样式表，如打印、或浏览器查看,如：也可以在样式表中用media规则指定其他媒体类型，把样式规则放在media print 中，如：pcolor:rgba(7,118,251,1.00);media print pcolor:#f60;按元素名称选择元素元素属性:值；按类或ID选择元素.

25、classname属性:值；#id属性:值；.classname1 .classname2属性:值；类选择器和ID选择器区别尽可能使用类ID在一个页面只出现一次可以组合一个或多个类ID可以在页面定义锚按上下文选择元素1.按祖元素选择格式化的元素ancestor descendant属性:值;2.按父元素选择要格式化的元素parentchild 属性:值;/*直接后代*/ 3.按相邻 同胞元素选择要格式化的元素sibling+element属性:值; /*相邻且同胞*/ 指定元素组selector1, ,selector2属性:值;组合使用选择器h1,h2,.class,#id属性:值;通配符选

26、择器*按状态选择链接元素a:link 属性:值;a:visited 属性:值;a:focus 属性:值;a:hover 属性:值;a:active 属性:值;按属性选择元素E:目标元素,可以根据具体情况省略。att：属性名称 val：值选择第一或最后一个子元素元素:first-child属性:值;元素:last-child属性:值;选择元素的第一个字母或第一行元素:first-letter属性:值;元素:first-line属性:值;font-family:Constantia, “Lucida Bright”; /*字体系列*/列出一种以上的字体或者系统默认字体；逗号和空格分隔每个字体。fo

27、nt-style:italic; /*文字样式-斜体*/font-weight:bold; /*文字加粗*/font-size:14px; /*字号*/1em=100%=16px；根据父级元素设定字号；line-height:1.5; /*行高*/color:#CD0F12; /*文字颜色*/颜色名称、十六进制、rgb、hsl、rbga、hsla同时设定字体值，至少要包含字体大小和字体系列属性如果设置行高，必须出现在大小和斜杠后面font属性是继承的letter-spacing:10px;/*中文单个字距，英文字母间距*/Word-spacing：15px;/*英文单词间距*/ text-in

28、dent:40px; /*缩进*/text-align:left; /*文本对齐*/text-decoration:underline; /*装饰文本下划线*/ text-transform:uppercase;/*大写*/text-transform:small-caps; /*小型大写*/border:1px solid #f60; /*边框*/background-color:#DBE0E3; /*背景色*/background-image:url(3.jpg); /*背景图*/background-repeat:no-repeat; /*背景图不重复*/background-posit

29、ion:left top; /*背景图定位*/可以用负值background-attachment:fixed;/*背景图固定*/Background属性颜色、图片White-space:nowrap;/*设置空白属性*/pre/nowrap/normalfont-family:Constantia, “Lucida Bright”; /*字体*/font-style:italic; /*文字样式-斜体*/font-weight:bold; /*文字加粗*/font-size:14px; /*字号*/line-height:1.5; /*行间距*/color:#CD0F12; /*中文单个字距

30、*/background-color:#DBE0E3; /*背景色*/background-image:url(3.jpg); /*背景图*/background-repeat:no-repeat; /*背景图不重复*/background-position:left top; /*背景图定位*/letter-spacing:10px;/*中文单个字距，英文字母间距*/text-indent:40px; /*缩进*/text-align:left; /*文本对齐*/text-decoration:underline; /*装饰文本下划线*/ display:inline-block; /*行内

31、、块级显示*/width:120px; /*宽度*/border:1px solid #f60; /*边框*/内容（语义化标签包围的内容）与表现（css美化/外观）分离布局方法固定宽度布局响应式布局兼容不同浏览器恰当使用article、aside、nav、section、header、footer、div等元素，将页面划分成不同的逻辑分区并制定地标角色；同时使用合适的语义标记内容，如段落、图和列表。按照一定顺序放置内容，保证合理性。正确使用h1h6，按照优先级排序。使用必要的注释来标识页面不同区域和内容。在网站主样式表中添加兼容旧版本浏览器的css样式：article, aside, figc

32、aption, figure, footer, header, main, nav, section display: block; 在之前添加兼容旧版本浏览器的js：Css处理网页时，它认为每个元素都包含在一个不可见的盒子里，这就是盒模型盒子由内容区域、内容区域周围的空间（内边距、padding）、内边距的外缘（边框，border）和边框外面将元素与相邻元素隔开的不可见区域（外边距，margin）构成。移移除所有除所有htmlhtml标签默认边距、填充区域：标签默认边距、填充区域：*margin:0;padding:0; 作为书写习惯书写作为书写习惯书写。CssCss中的中的widthwid

33、th、heightheight指的是指的是内容的宽度内容的宽度外边外边距：距：Margin 两个值两个值 分别代表上下分别代表上下 左右；四左右；四个值分别代表上右下左；个值分别代表上右下左； 三个值代表三个值代表 上、左右、下。上、左右、下。内边距：内边距：Padding 两个值两个值 分别代表上下分别代表上下 左右；四左右；四个值分别代表上右下左；个值分别代表上右下左； 三个值代表三个值代表 上、左右、下。上、左右、下。边边 框框：Border 粗细粗细 样式样式 颜色颜色背背 景景：Background-color/Background-image 应用于内容和填充组成的区域应用于内容和

34、填充组成的区域Margin可以为负值可以为负值 padding一般不一般不可以可以(非标准做非标准做法法)display:inline; 设置元素显示为块级元素display:block;设置元素显示为行内元素display:inline-block;设置元素混合显示行行内元素和块级内元素和块级元素元素( (例：例：p p、h1h1、div ul lidiv ul li属块级元素；属块级元素； strong span em img a strong span em img a属行内元素属行内元素) )行内元素和块级元素之间转化的方法：行内元素和块级元素之间转化的方法：displaydispla

35、y：inline /inline /blockblock混合显示方式混合显示方式: :display:inline-block;display:inline-block;让元素与其他内容出现在同一行，让元素与其他内容出现在同一行，同时具有块级元素的属性。同时具有块级元素的属性。对于行内元素可以使用水平内边距、边框、外边距调整他们的水平对于行内元素可以使用水平内边距、边框、外边距调整他们的水平间距。但是垂直内边距、边框、外边距不影响元素显示的高度，而间距。但是垂直内边距、边框、外边距不影响元素显示的高度，而是添加是添加line-heightline-height。普通文档流元素在html中默认显

36、示为自上而下的次序，并且在块级元素开头和结尾处换行。display:none; /*隐藏后不占据文档流空间*/visibility:hidden; /*隐藏后仍占据文档流空间*/浮动框旁边的行框行框被缩短，从而在浮动框侧面留出了空间，行框围绕浮动框。 浮动的框可以左右移动，直到他的外边缘碰到碰到包含框或另一个浮动框的边缘包含框或另一个浮动框的边缘。 浮动框不在文档流中浮动框不在文档流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 如果包含块太窄无法容纳水平排列的浮动元素，那么其他浮动块向下移动，直到有足够的地方。如果浮动元素的高度不同，那么他们向下移动时可能会被其他浮动元素“卡住”。

37、 除非你正浮动一张带有预设宽度的图片，否则你应该始终给浮动设定一个应该始终给浮动设定一个宽度宽度要阻止行框围绕在浮动框的外边，需要对这个行框应用clear。 Clear属性的值可以是left、right、both、none，表示行框的哪些边不应该挨着浮动框。添加了清理的元素的顶边缘垂直下降到浮动框下面。也可以让浮动元素的父元素“自清除”在样式表中引用.clearfix规则，然后为浮动元素的父元素添加clearfix类1.*margin:0;padding:0;（去除浏览器默认内外边距）2.元素居中(左右外边距auto)3.给浮动设定一个宽度（可以是px、em、%）4. 对容器应用溢出方法或清除

38、浮动（容器在视觉上包含浮动元素）Css中的三种基本定位机制：普通流（相对定位）、浮动、绝对定位（固定定位）。普通文档流:从左到右,从上到下. . .除非专门指定，否则所有框都在普通流中定位，普通流中元素框的位置由元素在html中的位置决定。 . .块级元素从上到下一个接一个地排列，块框之间的垂直距离由框的垂直空白边计算出来。相对定位 . .如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直和水平位置，让这个元素“相对于”它的起点进行移动。 . .在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他的元素。 .相对定位实际上被看作普通流的一部分，因为元素的位置相对它在普通流中的位置。 以它正常应该显示的位置为参