• 前端随堂笔录2


    5.28
    链接标签
    <a href>
    核心属性就是href 属性值可以是一个跳转的地址
    适用于任何带有路径的东西
    href;里面的内容就是路径
    绝对路径:从盘符开始,然后依次往下查找
    绝对路径分为本地和服务器
    本地:C:Users/Administrator/0527day01/07.html
    服务器:https://www.baidu.com/
    192.168.1.1 / 127.0.0.1
    www.baidu.com
    相对路径:从当前文件开始,如果下一级目录就直接写文件夹,上一级用...表示
    盘符根路径:可以直接跳转到当前文件所有的盘符根目录中 “/”
    服务器底下
    本地底下

    图像标签
    img 是我们接触的第一个行内块标签
    行内块标签可以设置一行内的宽和高 不能设置居中对齐 只能靠左或靠右。

    src 图片的路径
    alt 当图片显示不出来的时候才会显示
    图片正在下载的时候...加载中
    图片的路径错误的时候
    width 图片宽
    height 图片高
    align 设置对齐

    前端和后端之间的通信
    1.form提交方式
    2.ajax提交方式
    核心标签:只有提交的功能,没有任何的样式
    form属性:
    action 提交的地址,通常为服务端的地址,如果不写,默认往本地提交
    method 提交的方式,get/post 如果不写为get提交

    input button 都是行内块标签 只能设置一行的内容
    input是表单的核心标签,通过修改input标签中的type属性来改变展现的样式
    地址?后面的内容表示参数,我们最终的目的是要把必须的参数给发送到后端想要发送参数,input中必须含有name属
    性 name="username" name="userpwd"


    每一个组里都必须含有相同的name属性值
    input中的值有一个属性,value属性 可作优化
    checked 默认选项,当属性名等于属性值的时候,只需要写属性名即可 就是必须要选中一个
    type中checkbox 多选框
    radio 单选框
    select 下拉框
    textarea 文本区域

    css的学习
    html 结构,承载内容
    css 样式 层叠样式表
    JavaScript 行为

    css的使用方式()
    1.行内样式 (内联样式)
    2.页面嵌入(内部样式表)
    3.外部文件(外部样式表)
    4.外部导入样式
    css语法:(符号都是英文的)
    选择器{
    属性名1:属性值1;
    属性名2:属性值2;
    ...
    }

    1.行内样式(内联样式)
    <标签style="属性名1:属性值1;属性名2:属性值2;..."></标签>

    2.页面嵌入(内部样式表)
    在head标签里面增加一个子标签
    <style>
    选择器{
    属性名1:属性值1;
    属性名2:属性值2;
    ...
    }
    </style>

    3.外部文件(外部样式表)
    在head标签里面增加一个子标签
    <link rel="stylesheet" href="css文件的路径" />

    4.外部导入样式
    主要用在样式初始化。因为有一些标签有自己的样式,我们需要清空,方便自己计算

    css------选择器
    ID选择器
    使用id选择器:在元素上面增加一个id属性,id属性的属性值不用用数字开头
    一个页面中只能有一个id属性值
    css中id选择的表示方法用 # 表示
    class选择器
    使用class选择器:在元素上增加一个class属性,class属性的属性值不能用数字开头
    一个页面中可以有多个class属性值
    css中class选择器的表示方法用 . 表示
    标签选择器 直接写标签名
    组合选择器 选择器直接用,分隔开即可
    子代选择器 > 只针对子代
    后代选择器 用空格表示,包含着子代选择器
    通用选择器 * 针对于所有的标签

    <style type="text/css">
    规定文档是文本类型和CSS类型
    <div class="div02" id="div02" style=" 10px;height: 10px; background-color: #000;">今天天气很好
    </div>
    里面设置的宽和高就直接是内联样式

    选择器是有权重的
    内联样式 1000
    id 100
    class 10
    元素 1
    通用 0
    boss !important 只要出现,就以这个为主


    权重越高,冲突部分的样式就以权重高的为主,并不是说这个选择器没有用了,而是里面冲突的样式
    权重仅仅只能作为参考
    权重的计算
    不需要管子代和后代的
    如果权重相同,就近原则。以后定义的为准

    text-align: right; 文本对其方式
    text-decoration: underline; 文本下划线
    color: #f00; 设置字体的颜色
    line-height: 166.67px; 文本的行高
    一行文字所占的高度,让他上下居中

    font-family: "Microsoft YaHei"; 设置字体的样式:宋体,楷体... 去百度,翻译中英文
    font-family: "宋体"; 自己去百度找到宋体对应的英文,节约空间
    font-style: italic; 规定字体是否倾斜
    font-weight: bold;
    font-size: 16px ; 设置字体的大小
    在浏览器中,默认的字体大小16px
    谷歌浏览器中,字体大小最小可以为12px
    火狐没有限制

    .div01:hover{ /*10+10*/ hover 叫伪类选择器
    background-color: #ff0; 当你的鼠标放上去的时候,会变化成别的样子
    }
    权值 10


    cursor: none; /*设置鼠标的样式*/
    display: block; /*元素分为三大类,设置元素的显示方式
    行内 inline
    块级 block
    行内块 inline-block
    none 无

    有序列表和无序列表在实际开发中基本不用
    <ul></ul> <ol></ol> <li></li>
    都是块级标签

    opacity: 0.1; 取值的范围是0-1之间,可以为0和1
    background-color: rgba(255,0,0,0.1); 最后一个参数a表示透明度,取值的范围是0-1之间,可以为0和1

    border="n"属性:是对表格中的边框的粗糙进行设置,n代表的是粗细。
    witdth="700px" :表示单元格的宽度
    height="500" :表示单元格的高度
    align="center" :表示对齐方式,center表示居中对齐
    <table border="1px" width="700px" height="500px" align="center">
    这句话表示的是表格中的边框粗细为1 宽700 高500 居中对齐
    2.table中的标签
    <caption>我的标题</caption>:表示的是表格中的标题的标签
    <tr>:表示行标签
    <td>:表示列标签
    <p>:段落标签
    <ul>:列表标签
    <li>:列表标签


    JS跳转大概有以下几种方式:

    第一种:(跳转到b.html)
    <script language="javascript" type="text/javascript">
    window.location.href="b.html";
    </script>
    第二种:(返回上一页面)
    <script language="javascript">
    window.history.back(-1);
    </script>
    第三种:
    <script language="javascript">
    window.navigate("b.html");
    </script>
    第四种:
    <script language="JavaScript">
    self.location=’b.html’;
    </script>
    第五种:
    <script language="javascript">
    top.location=’b.html’;
    </script>

  • 相关阅读:
    jquery 图片播放器插件(支持自己设定时间,自己设定是否自动播放)
    ie6下bug集合(二)li之间空隙bug
    大小不固定的图片和多行文字的垂直水平居中
    解决IE6下 position的fixed定位问题
    C# 编写不安全代码
    委托和事件的使用
    如何删除win7桌面的库和家庭组图标
    gcc g++ 区别
    Java 访问注册表
    C# 通过反射类动态调用DLL方法
  • 原文地址:https://www.cnblogs.com/htmlhu/p/10938935.html
Copyright © 2020-2023  润新知