新手网站网页设计代做
文章目录
- html基本结构
- 属性
- 语义化
- 为什么要语义化
- 示例
- head中属性
- 样式
- 一些概念
- 块级元素与行级元素
- 空白折叠
- html编程
- 没有css的html显示逻辑
html基本结构
html基本单元就是元素，每个元素有标记和属性，如：
<a href="...">www</a>
属性
- 局部属性
部分标签特有的属性 - 全局属性
每个标签都具备的属性
语义化
- 每个html标签都具有具体的含义
- 所有标签与展示效果无关，由css负责显示
为什么要语义化
- 为了搜索引擎优化(SEO)
搜索引擎可以更好的理解网页内容 - 为了让浏览器更好的理解网页
如一些浏览器功能：阅读模式、语音模式等；这些和显示无关，只需要专注html标签即可。
示例
<!DOCTYPE HTML> <!-- HTML5标准网页声明，DOCTYPE -- 文档类型，DocType -->
<HTML lang="zh-CN"> <!-- HTML为根标签，代表整个网页 --><head> <!-- head为头部标签，一般用来描述文档的各种属性和信息， 包括标题等--><meta charset="UTF-8"> <!-- 设置字符集为utf-8 --><title>my HTML</title> <!-- 设置浏览器的标题 -->
</head><!-- 网页所有的内容都写在body标签内 -->
<body> 我的第一个HTML网页
</body></HTML>
整体的html有两个部分，第一个部分是包含关于HTML文档的信息，可以包含一些辅助性标签。如 <title></title> ，<link />、<meta /> ，<style></style> ， <script></script> 等，但是浏览器除了会在标题栏显示 <title> 元素的内容外，不会向用户显示 head 元素内的其他任何内容。
第二个部分就是HTML文档的主体部分，在这个标签中可以包含 <p><h1><br> 等众多标签，<body> 标签出现在 </head> 标签之后，且必须在闭标签 </HTML> 之前闭合。
head中属性
<meta> 标签提供了 HTML 文档的元数据，定义了与文档相关联的名称/值对。位于文档的head部分，不包含任何内容，不会显示在客户端，但是会被浏览器解析。共有四个属性，它们分别是scheme属性、 http-equiv 属性和 name 属性，在 HTML5 中，有一个新的 charset 属性，它使字符集的定义更加容易，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
-
charset 指定网页的编码方式
<meta charset="UTF-8"> -
scheme 在 HTML5 不支持
-
name 属性主要用于描述网页，与之对应的属性值为 content，content 中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。语法格式为
<meta name="参数" content="具体的参数值">，如：<!-- keywords，关键字，告诉搜索引擎该网页的关键字。 --> <meta name="keywords" content="关键字，可以有多个关键字" /><!-- description，网站内容的描述，用于告诉搜索引擎你网站的主要内容，有助于 SEO 搜索引擎优化。 --> <meta name="description" content="对网站内容的描述" /><!-- viewport：窗口视图。 --> <!-- width：设置 layout viewport 的宽度，为一个正整数，或字符串"width-device"。 --> <!-- initial-scale：设置页面的初始缩放值，为一个数字，可以带小数。 --> <!-- minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数。 --> <!-- maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数。 --> <!-- height：设置 layout viewport 的高度，这个属性对我们并不重要，很少使用 --> <!-- user-scalable：是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes 代表允许。 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- author：标注网页的作者。 --> <meta name="author" content="网页的作者"><!-- generator：网页制作软件。 --> <meta name="generator" content="制作软件"><!-- copyright：说明网站版权信息。 --> <meta name="copyright" content="版权"> -
http-equiv
http-equiv 相当于 http 的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容。<!-- Expires：期限，可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。 --> <meta http-equiv="expires" content="Fri,12 Jan 2022 18:18:18 GMT"><!-- Pragma：cache 模式，是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从 cache 中再调出。 --> <!-- cache模式：允许脱机浏览。 --> <!-- no-cache模式：无法脱机浏览。 --> <meta http-equiv="peragma" content="no-cache" /> <!-- 当前无法脱机浏览 --> <!-- Refresh：刷新，自动刷新并指向新页面。 --> <meta http-equiv="refresh" content="时间（秒为单位）;URL"><!-- Window-Target：显示窗口的设定。 --> <!-- Window-Target 有四个属性值： --> <!-- _top：表示页面以当前整个窗口显示，可以防止自己的页面被其他网页嵌套 --> <!-- _blank： 表示页面以新打开的窗口显示 --> <!-- _parent：表示页面以父容器或窗口显示 --> <!-- _self：表示页面以当前容器或窗口显示 --> <meta http-equiv="window-target" content="_top">
样式
样式有三种方式：
- 内联样式
<p style="border: red 12px; margin-top: 20px; background-color: brown;">内联样式</ p> - 内部样式表
<head><style>p {color : red;}</ style></ head> - 外部应用
<link rel="stylesheet" type="text/css" href="http://192.168.232.220:8881/style.css">
一些概念
块级元素与行级元素
- 块级元素
在显示时会单独占一行的元素，如h、p - 行级元素
在显示时不会单独占一行的元素，如span
空白折叠
在源代码中的连续空白字符(空格、换行、制表符)，在页面显示时，会被折叠为一个空格，不论标签内外
html编程
html编程分为两个层次，一个是html代码，他表征整个html功能，显示内容；一个是css，他表征整个html的显示方式。
因此，本质上，对于一个html文件，他的本质就是最基本的那些元素，如p、a、img...，而div、header...这些的存在有两方面功能，一种是更好的去进行编写css；另外一个方面是提供更好的语义。
没有css的html显示逻辑
没有css显示方式的编写，整个html一般就是两种，一种是块级元素，一种是行级元素，也就是说整个html元素会从上到下一个一个的进行显示，只不过有的元素会换行，而有的元素不会换行