一、HTML标签

前端语言

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

HTML

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

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

标记语言: 标记（标签）构成的语言.

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

静态网页：静态的资源，如xxx.html

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

什么是标签:

是由一对尖括号包裹的单词构成例如: <html> *所有标签中的单词不可能以数字开头.
标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
标签分为两部分: 开始标签<a> 和结束标签</a>. 两个标签之间的部分我们叫做标签体.
有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />
标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>

 <!DOCTYPE html>       #声明文档类型，
 <html lang="en">      #是所有标签的容器，lang表示语言，表示整个文档的内容以什么语言为主
 <head>                 #页面结构的头部，包含辅助显示的标签
     <meta charset="UTF-8">
     <title>Title</title>     #页面的标题，在标题栏显示的内容
 </head>
 <body>                      页面结构的主体，包含在页面中显示的标签

 </body>
 </html>
 <!DOCTYPE>:设置当前文档使用的标准，建议使用HTML5的类型，
 HTML标签：用于包裹页面上所有的其他标签
 head标签：用于存放title，meta，base，style，script，link标签，这些标签都是用来辅助显示的标签，每个head标签必须有一个title标签
 body标签：用于存放所有的页面上的结构标签
 title标签：用于设置页面的标题、同时提高SEO的权重
 meta标签：设置页面上的字符集（编码格式），utf-8,gb2312
 <!--注释内容-->:HTML注释，给代码添加的代码说明性的文字，或者使一些没有必要去掉它的作用
 语义化：是指用合理HTML标签以及特有的属性去格式化文档内容

1.1 基本标签

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

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

<br>  #换行

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

1.2 特殊字符

&nbsp;    #空格            °    #&deg；
&gt;     #>               ±    #&plusmn;
&lt;      #<              ÷    #&divide;
&amp;     #&              乘号   #&times;
&yen;     #¥              ²平方     #&sup2;
&copy;     #版权标识©      ³立方     #&sup3
&reg;      #注册

1.3 div标签和span标签（最常用的），没有语义的标签

div布局标签在页面上单独独占一行，如果不设置宽度，默认占一行，通常作为容器布局的时候使用

div是块级标签，也叫【伪标签】，无论自己有多大，都占满屏幕

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

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


span标签一行可以放多个，显示大小由内容决定

span标签又叫内联标签，也叫【白板标签】，自己有多大就占多大

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

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

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

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

1.4 input标签

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

<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。

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

1.4.1 <input type = text>属性写在标签内部 <>之间  属性与属性之间用“空格”分隔

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



1.4.2 value属性是input的默认值属性

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

</div>

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

</div>

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

隐藏密码属性

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

</div>

1.4.4 <input type=button value="登录">

登录按钮，可点击

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

1.5 form 表单标签

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

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

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

<form> 元素包含一个或多个如下的表单元素：

1.5.1 结合<input type=submit value="登录">

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

button与submit的区别：submit会对后端进行提交，前端好像页面刷新了一样

1.5.2 结合<input type=button value="登录" onclick="alert(111)">

使用 onclick="alert(111)" 即弹出弹窗，显示：111

    <form>
        <div>
            <input type=text placeholder="请输入用户名">
        </div>
        <div>
            <input type=text placeholder="请输入密码">
        </div>
        <div>
            <input type=button value="登录" onclick="alert(111)">
        </div>
    </form>

1.5.3 单选 type = radio

<span>男</span><input type="radio" name="sex">

<span>女</span><input type="radio" name="sex">

    <form>
        <div>
            <span>男</span><input type="radio" name="sex">
            <span>女</span><input type="radio" name="sex">
        </div>
    </form>

1.5.4 多选 type = checkbox

<span>足球</span><input type="checkbox">

<span>篮球</span><input type="checkbox">

    <form>
        <div>
            <span>足球</span><input type="checkbox">
            <span>篮球</span><input type="checkbox">
        </div>
    </form>

1.5.5 其他

</span><input type="file" name="合同"> 上传文件

</span><input type="reset" name="重置"> 重置按钮   重置必须和form表单连用才起作用

    <form>
        <div>
            </span><input type="file" name="合同">
            </span><input type="reset" name="重置">
        </div>
    </form>

1.6 form表单结合submit与后台交互

    <form method="get" action="/login">
        <div>
            <input type="text" name="username" value="dashixiong">
        </div>
        <div>
            <input type="password" name="passwd" value="dashixiong">
        </div>
        <div>
            <input type="submit" name="submit-登录">
        </div>

    </form>

1.7 label标签

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<div>
    <!--<span>用户名</span><input type="text">-->
    <label for="user">用户名</label><input type="text" id="user">  用label for 映射到id
</div>

1.8 select标签下拉标签

<select> 元素用来创建下拉列表。

<select> 元素中的 <option> 标签定义了列表中的可用选项。

select下拉标签

<div>
    <form>
        <select>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>
    </form>
</div>

【枚举值】
value="volvo"、

value="saab"

value="mercedes"

value="audi"

<div>
    <form>
        <select>
            <option selected="selected" value="1">乒乓球</option>
            <option value="2">足球</option>
            <option value="3">篮球</option>
            <option value="4">排球</option>
        </select>
    </form>
</div>

selected="selected" 默认选中项

1.9 a标签

<a> 标签定义超链接，用于从一个页面链接到另一个页面。

<a> 元素最重要的属性是 href 属性，它指定链接的目标。

在所有浏览器中，链接的默认外观如下：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

<a href="http://www.baidu.com">访问百度页面!</a>

1.10 textarea标签

<textarea> 标签定义一个多行的文本输入控件。

文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

要与后台交互，都有name属性

    <form>
        <textarea name="remark">
            多行标签
        </textarea>

    </form>

二、CSS样式

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
        background-color: red;
        height: 100px;
        width: 100px;
        }
    </style>
</head>
<body>
    <div id="i1">背景色</div>

</body>
</html>

2.1 html引入CSS样式 id

1、创建demo.css文件

#i1{
    background-color: red;
    height: 50px;
    width: 100px;
}
#i2{
    background-color: blue;
    height: 50px;
    width: 150px;
}

2、在html里引入css文件，通过link引入到html中

在<style></style>标签下加上

<link rel="stylesheet" href="demo.css">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摩羯座</title>
    <style>
        #i2{
        background-color: blueviolet;
        height: 100px;
        width: 100px;
        }
    </style>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <div id="i1" style="background-color: red;height: 50px;width: 100px">背景色</div>
    <div id="i2">引入html内CSS样式</div>
    <div id="i3">引入CSS文件样式</div>

</body>
</html>

优先顺序：1、标签内css样式 > 2、style后面css样式 > 3、css文件

注意：

1、在html中，不能出现重复引用css样式的情况，这样不符合规范

2、ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

2.2 class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摩羯座</title>
    <style>
        .c1{
        background-color: green;
        width: 100px;
        height: 50px
    }
        .wh{
            width: 150px;
            height: 30px;
        }
        .bc-1{
            background-color: red;
        }
        .bc-2{
            background-color: blue;
        }
    </style>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <div id="i3">id引入css样式</div>
    <div class="c1">class选择器</div>
    <div class="c1">class选择器</div>
    <div class="wh bc-1">宽高+颜色样式1</div>
    <div class="wh bc-2">宽高+颜色样式2</div>
</body>
</html>

不同颜色、相同宽高的正方形 class属性允许有多个，通过空格分隔即可

2.3 所有标签选择器div

所有的div标签都显示该样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: green;
        }
        .wh{
            width: 150px;
            height: 30px;
        }
    </style>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <div class="wh">div选择器</div>
</body>
</html>

2.4 层级选择器

div里span是红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摩羯座</title>
    <style>
        div{
            background-color: green;
        }
        div span{
            background-color: red;
        }
    </style>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <div class="wh">
        <span>div里span标签是红色</span>
    </div>
</body>
</html>

2.5 display属性

1、display: inline 由块级标签，变成行内标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摩羯座</title>
    <style>
        div{
            background-color: green;
        }
        .cl-1{
            width: 100px;
            height: 30px;
        }
        .dis{
            display: inline;
        }
    </style>
</head>
<body>
    <div class="dis">块div，变成行内标签</div>
</body>
</html>

2、display-block 由行内标签转块类标签行内标签必须有内容，无法应用宽、高、外边距、内边距3、display-block-inline 即是块标签，也是行内标签这样可以应用宽、高、内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摩羯座</title>
    <style>
        .wh{
            width: 150px;
            height: 30px;
        }
        .cl-1{
            background-color: green;
        }
        .dis-block-inline{
            display: inline-block;
        }
    </style>
</head>
<body>
        <span class="dis-block-inline cl-1">行内标签转块类标签</span>
</body>
</html>

2.6 外边距、内边距

1、margin-top: 0 外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摩羯座</title>
    <style>
        .wh{
            width: 150px;
            height: 30px;
        }
        .cl-1{
            background-color: green;
        }
        .c1{
            border: 1px solid red;
            width: 100%;
            height: 200px;
        }
        .c2{
            background-color: green;
            width: 100%;
            height: 30px;
            margin-top: 0;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2">border属性、margin-top属性</div>
</div>
</body>
</html>

2、内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摩羯座</title>
    <style>
        .wh{
            width: 150px;
            height: 30px;
        }
        .cl-1{
            background-color: green;
        }
        .c1{
            border: 1px solid red;
            width: 100%;
            height: 200px;
        }
        .c2{
            background-color: green;
            width: 100%;
            height: 30px;
            /*margin-top: 0;*/
            padding-top: 0;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2">border属性、margin-top属性</div>
</div>
</body>
</html>

HTML基础一-html、CSS的更多相关文章

Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
基础DOM和CSS操作(三)
CSS方法 jQuery不但提供了CSS的核心操作方法,比如.css()..addClass()等.还封装了一些特殊功能的CSS操作方法,我们分别来了解一下. width()方法方法名描述 wid ...
基础DOM和CSS操作(二)
元素样式操作元素样式操作包括了直接设置CSS样式.增加CSS类别.类别切换.删除类别这几种操作方法.而在整个jQuery使用频率上来看,CSS样式的操作也是极高的,所以需要重点掌握. CSS操作方法 ...
基础DOM和CSS操作(一)
DOM简介 DOM是一种文档对象模型,方便开发者对HTML结构元素内容进行展示和修改.在JavaScript中,DOM不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性.扩展性.在jQuery ...
#WEB安全基础：HTML/CSS | 0x0 我的第一个网页
#WEB安全基础:HTML/CSS系列,本系列采用第二人称以免你不知道我在对着你说话,以朋友的视角和你交流 HTML的中文名叫做超文本标记语言,CSS叫做层叠样式表用HTML设计你的第一个网页,你需 ...
任务五：零基础HTML及CSS编码练习加强版
任务目的针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法能够基于设计稿来合理规划HTML文档结构理解语义化,合理地使用HTML标签来构建页面掌握基本的 ...
任务二：零基础HTML及CSS编码练习
任务目的针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法能够基于设计稿来合理规划HTML文档结构理解语义化,合理地使用HTML标签来构建页面掌握基本的 ...
第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
任务五：零基础HTML及CSS编码（二）
面向人群: 零基础或初学者难度: 简单重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...
任务二：零基础HTML及CSS编码（一）
面向人群: 零基础或初学者难度: 简单重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...

随机推荐

Failed to start LSB: Bring up/down networking 另外一个偏方
之前网卡启动不了,会是配置不对,或者是移动了虚拟机导致hwaddr发生了变化. 但是今天没改动什么,突然用不了,一直报错Failed to start LSB: Bring up/down .... ...
如何同时在Isilon的所有网卡上抓取网络包？
命令行如下: cd /ifs/data/Isilon_Support/ mkdir $(date +%m%d%Y) isi_for_array 'for i in `ifconfig | grep - ...
Unsafe例子
Java和C++语言的一个重要区别就是Java中我们无法直接操作一块内存区域,不能像C++中那样可以自己申请内存和释放内存.Java中的Unsafe类为我们提供了类似C++手动管理内存的能力,不建议使 ...
基础知识---const、readonly、static
const:静态常量,也称编译时常量(compile-time constants),属于类型级,通过类名直接访问,被所有对象共享! a.叫编译时常量的原因是它编译时会将其替换为所对应的值: b.静态 ...
干货最新版 Spring Boot2.1.5 教程+案例合集
最近发了一系列的 Spring Boot 教程,但是发的时候没有顺序,有小伙伴反映不知道该从哪篇文章开始看起,刚好最近工作告一个小小段落,松哥就把这些资料按照学习顺序重新整理了一遍,给大家做一个索引, ...
react的模型：react是如何工作的？
1.jsx:语法模型,语句构建模型: 2.组件:集合模型,组件管理: 3.vdom:分层模型.渲染管理模型: 4.flux:管道模型.数据模型,状态管理模型: 整体上是一个UI系统从上到下的构建: f ...
python输入一个字符串，输出翻转后的字符串（翻转字符串）
题目:输出一个字符串,输出翻转后的字符串.例如:输入字符串a123,输出321a. 方法一:使用列表的reverse方法 string=input('请输入一个字符串:') lst=list(stri ...
js计算两经纬度之间的距离
js如下: // 方法定义 lat,lng function GetDistance( lat1, lng1, lat2, lng2){ var radLat1 = lat1*Math.PI / ...
Dapper学习(四)之Dapper Plus的大数据量的操作
这篇文章主要讲 Dapper Plus,它使用用来操作大数量的一些操作的.比如插入1000条,或者10000条的数据时,再使用Dapper的Execute方法,就会比较慢了.这时候,可以使用Dappe ...
Jquery ajax与asp.net MVC前后端各种交互
1.Jquery通过ajaxSubmit提交表单 if (jQuery("#Edit_from").validate().form()) { jQuery("#Edit_ ...

HTML基础一-html、CSS