HTML基础一-html、CSS

一、HTML标签

 

前端语言


    HTML-将页面展现出来
    CSS-修饰前端标签 让HTML更好看 css 对html 进行修饰
    JS-能够让页面动起来

 

HTML

htyper text markup language  即超文本标记语言

 

超文本: 就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

标记语言: 标记(标签)构成的语言.

 

网页==HTML文档,由浏览器解析,用来展示的

静态网页:静态的资源,如xxx.html

动态网页:html代码是由某种开发语言根据用户请求动态生成的

HTML基础一-html、CSS_第1张图片

 

 

什么是标签:

  • 是由一对尖括号包裹的单词构成 例如: *所有标签中的单词不可能以数字开头.
  • 标签不区分大小写. 和 . 推荐使用小写.
  • 标签分为两部分: 开始标签 和 结束标签. 两个标签之间的部分 我们叫做标签体.
  • 有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如:

  • 标签可以嵌套.但是不能交叉嵌套.

 

 1        #声明文档类型,
 2 "en">      #是所有标签的容器,lang表示语言,表示整个文档的内容以什么语言为主  
 3                  #页面结构的头部,包含辅助显示的标签
 4     "UTF-8"> 
 5     Title     #页面的标题,在标题栏显示的内容
 6 
 7                       页面结构的主体,包含在页面中显示的标签
 8 
 9 
10 
11 :设置当前文档使用的标准,建议使用HTML5的类型,
12 HTML标签:用于包裹页面上所有的其他标签
13 head标签:用于存放title,meta,base,style,script,link标签,这些标签都是用来辅助显示的标签,每个head标签必须有一个title标签
14 body标签:用于存放所有的页面上的结构标签
15 title标签:用于设置页面的标题、同时提高SEO的权重
16 meta标签:设置页面上的字符集(编码格式),utf-8,gb2312
17 :HTML注释,给代码添加的代码说明性的文字,或者使一些没有必要去掉它的作用
18 语义化:是指用合理HTML标签以及特有的属性去格式化文档内容

1.1 基本标签

 

不加标签的纯文字也是可以在body中写的
<b>加粗b>
<i>斜体i>
<u>下划线u>
<s>删除s>
<p>段落标签p> #独占一个段落

<h1>标题1h1>
<h2>标题2h2>
<h3>标题3h3>
<h4>标题4h4>
<h5>标题5h5>
<h6>标题6h6>

<br>  #换行

<hr> #就是单独个一个水平线
每次加上一些内容,别忘了刷新一下页面,才能看到新添加的效果或者内容,其实上面这些标签很少用

 

1.2 特殊字符

     #空格            °    #°;
>     #>               ±    #±
<      #<              ÷    #÷
&     #&              乘号   #×
¥     #¥              ²平方     #²
©     #版权标识©      ³立方     #³
®      #注册

 

1.3 div标签和span标签(最常用的),没有语义的标签

div布局标签

在页面上单独独占一行,如果不设置宽度,默认占一行,通常作为容器布局的时候使用
div是块级标签,也叫【伪标签】,无论自己有多大,都占满屏幕

标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

标签常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化。



span标签

一行可以放多个,显示大小由内容决定
span标签又叫内联标签,也叫【白板标签】,自己有多大就占多大

用于对文档中的行内元素进行组合。

标签没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。如果不对 应用样式,那么 元素中的文本与其他文本不会任何视觉上的差异。

标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

 
    <div>div是块级标签,也叫【伪标签】,无论自己有多大,都占满屏幕div>
    <span>span标签又叫内联标签,也叫【白板标签】,自己有多大就占多大span>

1.4 input标签

标签规定了用户可以在其中输入数据的输入字段。

元素在

元素中使用,用来声明允许用户输入数据的 input 控件。

输入字段可通过多种方式改变,取决于 type 属性。

1.4.1 
属性写在标签内部 <>之间 属性与属性之间用“空格”分隔
   <input type=text placeholder="请输入用户名">


1.4.2 value属性是input的默认值属性
<div>
        <input type=text placeholder="请输入用户名">

div>

<div>
        <input type=text value="请输入用户名">

div>

HTML基础一-html、CSS_第2张图片

 

 

1.4.3 

隐藏密码属性

 

<div>
        <input type=password value="请输入用户名">

div>

 

 

 

1.4.4 

登录按钮,可点击

 

<div>
        <input type=text placeholder="请输入用户名">
div>
<div>
        <input type=text placeholder="请输入密码">
div>
<div>
        <input type=button value="登录">
div>

 

 

 

HTML基础一-html、CSS_第3张图片

 

 

1.5 form 表单标签

跟后台交互的方式之一 form表单的提交会对页面进行刷新,这样对用户的体验不好,所以渐渐被异步提交替代

另一种【异步方式提交】ajax提交 和form提交相反,页面不会刷新

 

标签用于创建供用户输入的 HTML 表单。

元素包含一个或多个如下的表单元素: