初始Html、CSS和JavaScript

学习前端需要掌握Html、CSS、JavaScript语言

1、Html是网页内容的载体。
网页内容是网页的制作者放在页面上想要让用户浏览的信息。包括文字、图片、视频等。

2、CSS样式是表现。
就像网页的外衣。如:文字的大小、颜色,背景图片等。所有这些用来改变网页内容外观的东西称作表现。

3、JavaScript是用来实现网页的特效效果的。
如:鼠标滑过弹出下拉菜单,鼠标滑过表格背景颜色改变,新闻图片的轮换。可以说,有动画的,有交互的是用JavaScript来实现的。

一、Html
1、标签:
html中的标签一般是成对出现的,分开始标签和结束标签。
如:< html> 内容</ html>

标签是可以嵌套出现的,但是要注意先后顺序。

html中标签是不区分大小写的。但是建议小写。

2、html的基本结构
在这里插入图片描述
< html> < /html>是根标签。所有的网页标签在根标签中。
< head>用于定义文档的头部,它是所有头部元素的容器。头部元素有< titlt>,< script>,< style>,< link>,< meta>等标签。
在< body> < /body>之间是网页的主要内容。如:< h1> ,< p>,< img>,< a>等网页内容标签,在这里的标签的内容都会在网页上显示出来。

3、< head> < /head>标签
文档的头部描述了文档的各种属性和信息,包括标题等。
在这里插入图片描述
< titlle> < /title>标签之间的内容是网页的标题信息,会出现在浏览器的标题栏。

4、html代码注释
< !- -文字注释- ->

5、段落标签 < p>内容< /p>
一个段落用一个< p>标签。

6、标题标签 < hx>
< hx>分为6个等级:< h1>、< h2>、< h3>、< h4>、< h5>、< h6>。其中,< h1>是最高等级标签。标签里的文本 字号逐个递减,默认加粗。

7、强调标签< em>和< strong>
< em> 需要强调的文本< /em> :默认斜体
< strong> 需要强调的文本< /strong> :默认加粗

< span>关键字< /span> :为文字设置单独样式,突出文字。

8、文本引用 < q>和 < blockquote>
当引用的文本比较短时,使用 < q>短文本< /q>。
当引用的文本比较长时,使用 < blockquote>长文本< /blockquote>

文本引用标签会自动给引用的文本添加双引号。

9、换行标签 < br>
在需要换行的位置加换行标签 < br />
在这里插入图片描述
10、空格 &nbsp

在html代码中输入空格回车是没有用的。空格应该用 &nbsp;代替(注意有分号)。

11、水平横线 < hr/>

换行标签< br/> 和 水平横线标签< hr/>都是空标签。都只有开始标签,没有结束标签。

12、地址信息标签 < address>
用< address>地址< /address>标签来定义地址信息。显示的文本默认是斜体。

13、代码标签 < code>和 < pre>
当需要在文本中加入一行代码时,可以使用 < code>代码< /code>。
如果是多行代码,可使用 < pre>< /pre>。

< pre>的作用:预格式化的文本。

< pre>标签不只是显示计算机代码时使用,在你需要在网页中预显示格式时可以使用它。只是常见的使用就是显示计算机源代码。

13、使用 ul-li 标签来添加无序列表
在这里插入图片描述在这里插入图片描述
14、使用 ol-li 来添加有序列表
在这里插入图片描述在这里插入图片描述

15、< div>标签划分独立的逻辑部分
< div> < /div>
可以使用 id属性给版块划分名称:< div id=“名称”>…< /div>

16、table标签,制作表格
在这里插入图片描述
可以为表格添加摘要(不会在网页上显示)和标题。
在这里插入图片描述
17、超链接标签 < a>
在这里插入图片描述
title属性:鼠标滑过链接文字时会显示这个属性的文本内容。

该链接打开时默认是在当前浏览器窗口打开的。
添加target属性可以在新窗口打开。 target=“_blank”

< a>标签可以链接email地址,使mailto能让访问者便携式的向网络管理者发送邮件。
在这里插入图片描述

注意:如果有多个参数,第一个参数应该以?开头,其余参数以&作分隔。

18、添加图片 < img>
在这里插入图片描述

注意:图像可以是GIF,PNG,JPEG格式的图像文件

19、表单标签< form>,与用户交互
表单可以将浏览者输入的信息送到服务端,服务端在返回处理的数据。

在这里插入图片描述
method :数据的传送方式(get / post)
action :浏览者输入的信息传送到的位置

例如:
在这里插入图片描述

注意:所有的表单控件(文本框、文本域、按钮、单选框、复选框等)都要放在< form> < /form>之间。

20、文本输入框、密码输入框
< form>< input type="test / password" name="名称" value="文本" />< /form>

type :当type是test时,是文本输入框 ;当type是password时,是密码输入框。
name :为文本框命名,以备后台程序 ASP、PHP使用。
value :为文本框设置默认值。(一般起到提示的作用)

21、文本域
支持多行文本输入。
在这里插入图片描述
在< textarea> < /textarea>之间可以输入默认文本

22、单选框、复选框
在这里插入图片描述
type :当type为radio时,为单选框;当type为checkbox时,为复选框。
value :提交数据到服务器的值。
name :为控件命名。
当设置check="checked"时,该选项默认选中。

注意:同一组单选按钮的name值一定要一致,这样才能起到单选的作用。

23、下拉列表框
在这里插入图片描述
value :向服务器提交的值。
设置selected=“selected” 属性,该选项默认选中。

注意:在select标签中添加 multiple=“multiple” 属性可实现多选。

24、html中有两种按钮:提交按钮和重置按钮
在这里插入图片描述在这里插入图片描述
value:value是按钮的名称。

当type为submit时,按钮为提交按钮;当type为reset时,按钮为重置按钮。

25、label标签
当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
在这里插入图片描述

注意:label中的for属性值一定要与其相关的控件的id值相同。

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值