建设一个网站成本多少,网站建设宝典,温州在线课堂,和外国人做古玩生意的网站文章目录 html基本结构属性语义化为什么要语义化 示例head中属性样式一些概念块级元素与行级元素空白折叠 html编程没有css的html显示逻辑 html基本结构
html基本单元就是元素#xff0c;每个元素有标记和属性#xff0c;如#xff1a;
a href...www每个元素有标记和属性如
a href...www/a属性
局部属性 部分标签特有的属性全局属性 每个标签都具备的属性
语义化
每个html标签都具有具体的含义所有标签与展示效果无关由css负责显示
为什么要语义化
为了搜索引擎优化(SEO) 搜索引擎可以更好的理解网页内容为了让浏览器更好的理解网页 如一些浏览器功能阅读模式、语音模式等这些和显示无关只需要专注html标签即可。
示例
!DOCTYPE HTML !-- HTML5标准网页声明DOCTYPE -- 文档类型DocType --
HTML langzh-CN !-- HTML为根标签代表整个网页 --head !-- head为头部标签一般用来描述文档的各种属性和信息 包括标题等--meta charsetUTF-8 !-- 设置字符集为utf-8 --titlemy HTML/title !-- 设置浏览器的标题 --
/head!-- 网页所有的内容都写在body标签内 --
body 我的第一个HTML网页
/body/HTML整体的html有两个部分第一个部分是包含关于HTML文档的信息可以包含一些辅助性标签。如 title/title link /、meta / style/style script/script 等但是浏览器除了会在标题栏显示 title 元素的内容外不会向用户显示 head 元素内的其他任何内容。 第二个部分就是HTML文档的主体部分在这个标签中可以包含 ph1br 等众多标签body 标签出现在 /head 标签之后且必须在闭标签 /HTML 之前闭合。
head中属性
meta 标签提供了 HTML 文档的元数据定义了与文档相关联的名称/值对。位于文档的head部分不包含任何内容不会显示在客户端但是会被浏览器解析。共有四个属性它们分别是scheme属性、 http-equiv 属性和 name 属性在 HTML5 中有一个新的 charset 属性它使字符集的定义更加容易不同的属性又有不同的参数值这些不同的参数值就实现了不同的网页功能。 charset 指定网页的编码方式meta charsetUTF-8 scheme 在 HTML5 不支持 name 属性主要用于描述网页与之对应的属性值为 contentcontent 中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。语法格式为meta name参数 content具体的参数值如 !-- keywords关键字告诉搜索引擎该网页的关键字。 --
meta namekeywords content关键字可以有多个关键字 /!-- description网站内容的描述用于告诉搜索引擎你网站的主要内容有助于 SEO 搜索引擎优化。 --
meta namedescription content对网站内容的描述 /!-- viewport窗口视图。 --
!-- width设置 layout viewport 的宽度为一个正整数或字符串width-device。 --
!-- initial-scale设置页面的初始缩放值为一个数字可以带小数。 --
!-- minimum-scale允许用户的最小缩放值为一个数字可以带小数。 --
!-- maximum-scale允许用户的最大缩放值为一个数字可以带小数。 --
!-- height设置 layout viewport 的高度这个属性对我们并不重要很少使用 --
!-- user-scalable是否允许用户进行缩放值为no或yes, no 代表不允许yes 代表允许。 --
meta nameviewport contentwidthdevice-width, initial-scale1.0!-- author标注网页的作者。 --
meta nameauthor content网页的作者!-- generator网页制作软件。 --
meta namegenerator content制作软件!-- copyright说明网站版权信息。 --
meta namecopyright content版权http-equiv http-equiv 相当于 http 的文件头作用它可以向浏览器传回一些有用的信息以帮助正确和精确地显示网页内容。 !-- Expires期限可以用于设定网页的到期时间。一旦网页过期必须到服务器上重新传输。 --
meta http-equivexpires contentFri,12 Jan 2022 18:18:18 GMT!-- Pragmacache 模式是用于设定禁止浏览器从本地机的缓存中调阅页面内容设定后一旦离开网页就无法从 cache 中再调出。 --
!-- cache模式允许脱机浏览。 --
!-- no-cache模式无法脱机浏览。 --
meta http-equivperagma contentno-cache / !-- 当前无法脱机浏览 -- !-- Refresh刷新自动刷新并指向新页面。 --
meta http-equivrefresh content时间秒为单位;URL!-- Window-Target显示窗口的设定。 --
!-- Window-Target 有四个属性值 --
!-- _top表示页面以当前整个窗口显示可以防止自己的页面被其他网页嵌套 --
!-- _blank 表示页面以新打开的窗口显示 --
!-- _parent表示页面以父容器或窗口显示 --
!-- _self表示页面以当前容器或窗口显示 --
meta http-equivwindow-target content_top样式
样式有三种方式
内联样式p styleborder: red 12px; margin-top: 20px; background-color: brown;内联样式/ p内部样式表 headstylep {color : red;}/ style/ head外部应用link relstylesheet typetext/css hrefhttp://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元素会从上到下一个一个的进行显示只不过有的元素会换行而有的元素不会换行
