前端day1

前端三大利器

html+css+javascript

裸体的人+衣服+动作

HTML+CSS静态网页的基础

HTML需要掌握不到20个标签

CSS-颜色、位置

HTTP连接是一种软连接，可以理解为socket连一次传输完数据就断开。

所有的web服务器本质上就是socket服务端

服务端本质上都是返回字符串，返回的字符串如果有很多格式的话，浏览器就可以解析出来了。

HTML：本质上就是一套规则，浏览器认识的规则。.html后缀名不是必须得，只是为了规范。

开发者：学习html规则

　　　　开发后台规则

　　　　　　-写html文件（充当模板的作用）

　　　　　　-数据库获取数据，然后替换到html文件的指定位置（web框架）

本地测试：-找到文件路径，直接浏览器方式打开

　　　　　-pycharm打开测试

编写html文件

类似html这种格式，html标签 <html>fadfasfadsf</html>

标签内部的属性:lang 、name

<html lang="en" name="yanzhuang"></html>

html文件注释

1、doctype对应关系

2、html标签，标签内部可以写属性，html标签只能有一个

3、注释

Head里面的标签

先来看一下头部head，除了title可以看见，其他的标签都看不见，主要是一些内部的设置

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

为什么meta标签没有结束的标签？

标签分为两类，一种是自闭合标签（meta）建议都加上/>，一种是需要主动闭合的标签，一般情况下自闭合的非常少。

meta的属性：

1.页面编码（告诉浏览器是什么编码）

2.自动刷新

<meta http-equiv="Refresh" Content="3">

3.跳转网页

<meta http-equiv="Refresh" Content="3;Url=http://www.baidu.com" />

4.关键字/描述

<meta name="Keywords" content="星际2，星际老男孩，专访" />
<meta name="description" content="我是一米八大高个" />

5.X-UA-Compatible

专门为ie设置的，兼容ie浏览器，下面的标签表示兼容IE9,IE8

<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />

title标签

<link rel="shortcut icon" href="image/1.img"/>

Body里的标签,需要记忆

1、各种符号 www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

-空格  

-大于号 >

-小于号 <

2、p和br

p表示段落，特性就是段落和段落之间有间距

br的作用是在段落中间换行用，换行后还是在该段落中。

3、h标签-标题标签,特点是加大加粗

1-6从大到小

<h1>yanzhuang<h1/>

4、span

所有的标签都分为两类：一种是块级标签(h标签、p标签);一种是行内标签（内联标签），例如span，它就是个白板，什么特性都没有，如果非要有个特性的吧，只能说它是个行内标签。如果学了css后，拿到一个白板标签，可以让它变成任意的标签。

5、div标签-使用频率最高的标签（块级标签）

也是一个白板，但是它默认是个块级标签，通过CSS几乎能够构造出所有的标签。有一句话，学前端要学会div+css。

标签之间可以嵌套。

标签存在的意义：方便定位，容易操作，有利于js、css操作

补充：chrom审查元素的使用--可以快速定位查找标签内容，方便copy别人的网站css样式

登录页面

input标签，必须要写属性name，没有name的话后台拿不到数据；type属性中button没有什么实际作用，需要提交数据的话需要使用submit，并且要和form标签配合使用才能提交数据到指定url。

form标签，要想往后台提交数据，必须要使用form表单，action属性是需要提交数据的url，method是提交方式，有get和post两种。get和post提交数据的方式不一致，get方式是把需要提交的数据放在请求头中提交，而post是把数据放在请求体中提交，但是两种方式不存在安全好坏之分，服务器后台只要能够区分数据提交方式就能够解析提交的数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="http://localhost:8888/index" method="POST">
        <input type="text" name="user"/>
        <input type="password" name="pwd"/>
        <input type="button" value="登录1"/>
        <input type="submit" value="登录2"/>
    </form>
</body>
</html>

input系列

input type= 'text' - name属性,也可以有value属性，就是默认值

input type = 'password' - name属性，也可以有value属性，就是默认值

input type = 'submit' - value='提交' 提交按钮，表单

input type = 'button' - value='登录' 按钮

input type = 'radio' name属性如果相同就可以互斥了，实现了单选效果，需要增加value属性加以区别，如果需要默认被选中，需要增加checked属性，checked="checked"

input type = 'checkbox' 可以实现复选框的功能，name属性用来批量获取数据（比如爱好，技能），同样需要增加value属性加以区别，后台拿到的时候是个列表.如果需要默认被选中，需要增加checked属性，checked="checked"

input type='file' name='fname'上传文件,需要依赖form表单中的一个属性才能完成上传文件功能enctype="multipart/form-data"

input="reset" value="重置" --重置所有用户选择的数据。

多行文本输入

<textarea>afafasdf<textarea/>

-name属性

-不是自闭合

-默认值在中间

下拉框

<select>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">南京</option>
        <option value="4">苏州</option>   
</select>


下拉框也可以提交到后台（在select定义name属性，在option定义value属性），默认选中的话添加属性selected="selected"
属性multiple="multiple"可以设置多选
想显示多个，需要在select增加size属性

下拉框分组显示---<option>外面再包一层<optgroup>标签

能够把数据发到后台的标签是比较重要的，其他的都是点缀。

a标签

posted @ 2020-08-18 20:10 s0cket 阅读(96) 评论(0) 收藏举报

刷新页面返回顶部

前端day1

前端三大利器

Head里面的标签

Body里的标签,需要记忆

input系列

公告