html学习笔记02

html学习2

什么是语义化

1.每一个html元素都有具体的含义
2.所有元素与展示效果无关：元素展示到页面的效果由css决定
浏览器带有默认的css代码。
3.选择元素是选择元素的内容，不是选择元素的样式

为什么强调语义化

1.为了搜素引擎的优化（SEO）

vscode可以这样写多个h

h$*6{$级标题}

文本元素

h

h1-h6表示1级标题到6级标题

p

段落

lorem

乱数假文，没有任何含义的文字
测试排版

p*6>lorem1

span无语义

没有语义，可以用来改变单个文本样式

pre

预格式化文本元素
在pre中的内容不会出现空白折叠，该元素通常用于显示代码
pre功能是存在一个默认的css代码
显示代码时外边通常套code

空白折叠

空白折叠:在源代码中所有空白字符，在页面显示式会被折叠为一个空格
源代码的空格与页面的空格是分开的

某些元素显示会独占一行(块级元素)，有些不会(行级元素),现在已经
弃用了这个说法,因为元素没有展示效果

html实体

html entity
&lt<
&gt>
&quot “”
&amp &
&nbsp 空格
&copy 版权字符

a元素(超链接)

href

hyper reference
1.跳转页面
2.跳转到某个锚点(百度百科目录跳转):id+锚点
代码如下

 <a href="#charset1">章节1</a>
  <h2 id="charset1">章节1</h2>
   <p>as eum. Ratione ea ex, autem nihil repudiandae ad eveniet quos magni alias saepe numquam cumque quam? Architecto maiores accusantium consequatur optio!</p>
   <h2 id="charset2">章节2</h2>

回到顶部

<a href="#"><!--没有具体的锚点信息就会跳转到顶部 -->
    回到顶部
   </a>

3.功能链接
a.javascript
b.发送邮件 要求安装邮件发送软件
c.拨号

id属性

全局属性，表示唯一编号

target属性

表示跳转的窗口位置

• _self在当前页面打开
• —blank在新窗口打开

html学习2

什么是语义化

1.每一个html元素都有具体的含义
2.所有元素与展示效果无关：元素展示到页面的效果由css决定
浏览器带有默认的css代码。
3.选择元素是选择元素的内容，不是选择元素的样式

为什么强调语义化

1.为了搜素引擎的优化（SEO）

vscode可以这样写多个h

h$*6{$级标题}

文本元素

h

h1-h6表示1级标题到6级标题

p

段落

lorem

乱数假文，没有任何含义的文字
测试排版

p*6>lorem1

span无语义

没有语义，可以用来改变单个文本样式

pre

预格式化文本元素
在pre中的内容不会出现空白折叠，该元素通常用于显示代码
pre功能是存在一个默认的css代码
显示代码时外边通常套code

空白折叠

空白折叠:在源代码中所有空白字符，在页面显示式会被折叠为一个空格
源代码的空格与页面的空格是分开的

某些元素显示会独占一行(块级元素)，有些不会(行级元素),现在已经
弃用了这个说法,因为元素没有展示效果

html实体

html entity
&lt<
&gt>
&quot “”
&amp &
&nbsp 空格
&copy 版权字符

a元素(超链接)

href

hyper reference
1.跳转页面
2.跳转到某个锚点(百度百科目录跳转):id+锚点
代码如下

 <a href="#charset1">章节1</a>
  <h2 id="charset1">章节1</h2>
   <p>as eum. Ratione ea ex, autem nihil repudiandae ad eveniet quos magni alias saepe numquam cumque quam? Architecto maiores accusantium consequatur optio!</p>
   <h2 id="charset2">章节2</h2>

回到顶部

<a href="#"><!--没有具体的锚点信息就会跳转到顶部 -->
    回到顶部
   </a>

3.功能链接
a.javascript
b.发送邮件 要求安装邮件发送软件
c.拨号

id属性

全局属性，表示唯一编号

target属性

表示跳转的窗口位置

• _self在当前页面打开
• —blank在新窗口打开