我们日常浏览网页看到的页面效果就是利用前端知识制作出来. 学习前端我们需要了解HTML+CSS+JS (前端三大基石)

HTML:主要管理页面的内容

CSS:美化页面内容样式

JS:页面中的内容动态效果

1.HTML

1.基本标签

1.定义:超文本标记语言,由标签组成

学习HTML就是学习不同的标签,标签的作用,标签的使用,标签的特点.所以我们需要熟练掌握标签.

我们现在主要学习HTML5 因为它的优势体现在可持终端上.跨平台,跨分辨率

接下来我们来介绍一下HTML的结构

< !DOCTYPE html> html文档类型声明,告诉浏览器当前的html文档的版本

<html>...</html> 用来标识HTML的开始与结束

<!--html注释-->

<meta charset="UTF-8">保证不乱码 默认

<head>...</head>标签对中的内容是给浏览器看的

<body>...</body>标签对中的内容是给用户看的

<title>...</title> head中唯一一个能被用户看到的内容

接下来我们来学习标签:

标签上可以添加属性,属性可以帮助更完善的设置标签,属性,属性值.

标签分类:

1.单标签--自闭合标签

2.双标签--闭合标签

属性的添加:

1.空格后添加属性

2.属性名="属性值" .属性值放在一对引号中

3.标签:

  <1>.行内元素:宽度有自身的内容撑起来,可以和其他行内元素元素同行显示
  <2>.块元素:本身独占一行,前后换行

常用标签:

1.a--超链接标签:

href属性:连接地址

1.网络上的地址--绝对地址

2.本地地址--相对地址
target属性:打开方式,有两种打开方式

1._self--本页面打开

2._blank--新页面打开
title属性:当鼠标悬停在页面的时候显示的提示字

<a href="www.baidu.com" target="_bank" title="百度">baidu</a>

2.a--锚点链接(行内元素)

在页面中的任意位置定点,当点击某个a标签的时候,跳转到页面中的某个位置
定位:在标签中添加一个属性--id
a锚点链接的herf属性值设为#+定义的id属性值

<a href="#buttom">去底部</a>
<div id="buttom">我在底部</div>

3.p--段落标签(块元素):内容正常显示,前后换行

<p>.....</p>

4.div--块:内容正常显示,前后换行

5.h1~h6--标题标签

按照权重不同,字体大小依次减小
特点:独占一行,字体加粗

<h1>我和你<h1>
<h2>我和你<h2>
<h3>我和你<h3>

6.span--行内元素,本身没有作用,帮助显示不同的样式

7.img--图像标签

scr属性--图像地址

8.列表

ol--有序列表
ul--无序列表
li--列表项标记
列表中直接标记只能是li标签,li中可以嵌套任意标签
列表标签可添加type属性

9.table--表格标签

先有行,再有列.内容要放在单元格中.
tr--行
th--表格头单元格,居中加粗
td--表格体单元格
属性:

1.border--边框宽度

2.width--表格width

3.hight--表格高度

4.bordercolor--边框颜色

5.rowspan--跨行

6.colspan--跨列

2.表单--from标签

1. from的属性

action--表单中数据发送的位置
method--提交方式 get|post
enctype--一般不用修改,如果表单中有文件上传,需要修改的multipart/from-data

2.表单元素|表单域

大部分的表单元素都是通过一个标签定义的input的type属性值的不同,决定表单元素不同的作用

3.input标签--用在from标签内

type属性:以下为type属性的属性值,根据属性值的不同,决定表单元素不同的作用

<1>.text--普通文本框

<2>.password--密码框加密

<3>.radio--单选框--一组的单选框只能选择一个name的属性相同

<4>.checkbox--多选框--默认选中checked

<5>.file--文件上传修改enctype的值 multipart/from-data

<6>.submit--提交

<7>.button--按钮结合js使用

<8>.reset--重置

4.textarea--多行文本框

placeholder属性:文本框中的提示字

5.select--下拉列表

下拉列表选项--option
默认选中--selected

6.button--标签

type属性:

<1>.button

<2>.submit

<3>.reset
属性:

<1>.name--一个想要收集元素的,并具有提交能力的表单元素,必须定义name属性,后台用来区分前台的唯一

<2>.disabled--禁用不能修改不能提交

<3>.readonly--只读不能修改能提交

浅谈前端三基石--HTML