WEB学习笔记(一)

一、web基本介绍
全称:world wide web(全球广域网),俗称:www。web 前端的工作:负责网站中前台网页里的内容,网页是由前端工程师使用HTML语言编写的一种语言,其中包括:文字、图片、超链接、声音、视频等内容。
二、web标准(w3c组织制定)
    web标准是用来衡量当前网页书写是否规范的一系列标准。
    web标准的具体要求:结构、样式、行为三者相分离
    结构是由HTML标签单肩的网页框架;样式是指通过CSS语言对HTML网页框架进行的美化工作;行为指的是通过JavaScript(js)语言让网页可以理解用户的一些操作,从而用户与网页之间产生交互。
三、HTML
1、全称:超文本标记语言(Hypertext markup language)
2、HTML学习思维导图
WEB学习笔记(一)_第1张图片
3、HTML基本语法骨架:


<html>
	<head>
		<meta charset="{CHARSET}">
		<title>title>
	head>
	<body>
	body>
html>

4、常见的HTML标签
    标签:HTML发明者定义好的一些“单词”,HTML代码块就是由标签组成。
(1)标题标签(双标签)

<hi>hi>

    在HTML中,认为定义了6种标签,h1~h6,均为双标签,但一个网页中只允许出现一个标题标签
(2)段落标签(双标签)

<p>p>

注意:不可手动换行
(3)换行标签(单标签)

<br/>

(4)图片标签(单标签)
    该标签的作用是:在网页中插入图片

<img src=""/>

其中,img为标签名,src为该标签的一个属性,(标签名与标签属性之间用空格隔开,当标签属性为数字时,引号可以省略)
图片标签常见属性:
<1>.src (见上句代码)
<2>.图片宽度

<img src="" width=""/>


<3>.图片高度

<img src="" height=""/>


<4>.带标题的图片

<img src="" title=""/>


<5>.alt属性

<img src="" alt="(自定义内容)"/>


(5)超链接标签(双标签)
    标签名称:a
    作用:实现从当前页面向其他页面的跳转

<a href="">a>

例如:

<a href="http:www.baidu.com">a>

当href属性值为#时,将存在一个空链接,目的是为将来要跳转的网页预留一个位置,此时不清楚将跳转的网页的网址。

<a href="#">a>

target属性
当target属性值为_blank时,实现目标网址在新窗口的打开

<a href="http:www.baidu.com" target="_blank">a>

四、form表单
    form表单也是一个html标签,标签名:form,为双标签。称form表单为表单域,用于声明当前结构是表单,若想收集用户信息,则必须准备一些供用户输入框,这些框被称为表单元素。

<form action="" method="">form>

   &ensp**;form标签的属性:**
属性1:action,属性值为当前表单数据将要提交到的位置(开发阶段一般不写属性值,或属性值为#)
属性2:method,定义当前表单中的数据将以何种方式提交到网站后台,两种最常见的方式:get/post。
**常见的表单标签名为input,通过type属性值对标签进行区分。**表单元素的数据通过写在form标签对中进行提交到后台。
01、文本输入框

<input type="text"/>

02、密码输入框

<input type="password"/>

03、提交按钮

<input type="submit"/>

04、单选框

<input type="radio"/>

通过为input标签添加属性checked,可以设置默认选中的元素。

<input type="radio" checked/><input type="radio" />

05、复选框

<input type="checkbox"/>

checked属性也适用于复选框。
06、文本域

<textarea name="" rows="" cols="">taxtarea>

name属性:用于为标签起名字;rows用于固定行数:cols用于固定列数。
07、下拉菜单

<select name="">
      <option value="">自定义内容option>
select>

08、重置按钮

<input type="reset"/>

作用:将当前表单中的所有状态还原为默认状态。
09、普通按钮(可用于跳转)

<input type="button" value="点击(自定义)"/>

你可能感兴趣的:(WEB学习笔记(一))