【无标题】

一.WED前端
应用软件:c/s架构 b/s架构 
web前端:html5 css3 javascript
html5:超文本标记语言----超链接,文字,标签
标签语法规范:<>开始,结束-----双标签
<标签名 属性名=“属性值“>标签体------可以嵌套
input img---------单标签
属性:定制元素的行为,属性是不通用的,每一个标签存在自身的属性,当属性名等于属性值时,只需要写属性名,不需要写属性值。
二.HTML
1.样式
    //文档声明:告诉浏览器这是一个html文件
       //html最外层标签,包裹着所有html标签代码  lang= “en”是用英文网站 lang=“zh-CN"表示中文的网站

       //元信息:编写网页中的一些赋值信息 charset="UTF-8”国际编码,让网页不出现乱码的情况
   
   
    Document   // 网页的标题;骨架


    //显示网络内容的区域

2.注释

示例:
文本修饰
3.题目
标题标签-----h1-h6------逐级减小, 独占一行 
划分区块
  ---无语义标签
 

---- 大盒子
4.换行
br:换行 

   
5.水平线
hr:水平线

    6.段落
p:段落

     

7.格式化
strong:加粗
      em:斜体 i:斜体
刀枪剑戟 斧钺钩叉
刀枪剑戟 斧钺钩叉sub:下标
 [4]sup:上标
 [4]ins:下划线 u:下划线
2018年9月28日del:删除线 s:删除线
国进行国事访问链接
8.路径
路径:
1、绝对路径 :在自己电脑上,从盘符开始的资源的路径
2、相对路径:相对于当前文件来说的路径 ../:表示上一级 ./:表示当前级
3、网络路径:搜索出来后的地址路径
9.图像
img:图像
src:图像地址
< img src="C:\Users\21195\Desktop\广州\前端\day3.16\素材\1.jpg" alt="这是一张未加载出来的法斗的照片" title="555" align="bottom" vspace="200px" hspace="20px">alt属性:图片出现问题时候,显示的文字
title属性:提示信息
align属性:
vspace属性
hspace属性
10.视频
不能直接使用该标签,需要使用超链接和视频标签文件地址
点击进入新的页面video:视频 src:视频地址
需要写属性,不然打开超链接也不能播放
controls属性: loop属性:
autoplay 属性: muted属性:
11.音频
不能直接使用该标签,需要使用超链接和音频标签文件地址
点击进入新的页面audio:音频 src:音频地址
需要写属性,不然打开超链接也不能播放
controls 属性: autoplay属性:
12.超链接
a:超链接----跳转链接
href:音频或者视频标签文件地址
点击进入新的页面target属性:在当前页面可以打开新窗口
13.特殊符号
列表
14.无序列表
ul:无序列表 li:列表项

    ul:无序列表 li:列表项


             
    • 螺蛳粉

    •        
    • 榴莲
    • ul的type=""属性默认是小圆点,type="square"属性是小方点
      15.有序列表
      主要用于排列式 ol:有序列表 li:列表项

               
      1. 螺蛳粉

      2.        
      3. 榴莲
      4. ul的type=""属性默认是数字,从1开始,type="I"属性是使用该样式去标明,start="10"是改变属性序号的默认值从几开始
        16.表格
        th标签:表格表头--表格最上面的那行 
        -------table:表格,width:宽度,border属性:表格边框的厚度,                                                              cellspacing属性:单元格之间的间隙  
                --------caption:表格题目
               
                    ------tr:行 ,align= "center"居中对齐,bgcolor:背景颜色
                        -----td:表格单元,rowspan属性:合并行,也可以说是占几行
                       
                       
                   
               
               
                    ----align= "center"居中对齐,height="50px"高度
                       
                       
                   
               
               
                    ------align属性:左右对齐方式  valign属性:上下对齐方式
                        -------colspan属性:合并列,也可以说是占几列
                   
               
           
        2022级逃课名单
        111111111
        222222
        222
        cellpadding属性:单元格内的空间 
        表单?
        form,input-----双标签,表单
        input的type属性:
        ------get、post区别 :1、get相对于post较为安全 2、http协议上规定不同 3、数据量
                昵称:--- 普通的输入框,内容在一行显示   readonly:只读
               
        ----换行
                密码:----type="password"密码框 ,required:设置为必填项
               

               
                性别:
                -----type="radio"单选框 
                女-----name属性一样,表明是同一组单选
               

                你喜欢吃的食物是:
                榴莲-----type="checkbox"多选框 
                香蕉-----name属性一样,

        表明是同一组单选
                莲雾
                

                ----type="file"上传文件,multiple可以多选
                -----type="email"邮件
                -----type="time"时间
                ----type="color"颜色

                ----type="submit"属性按钮,value="点击"默认提示语
                ------按钮标签
                ------type="submit"属性按钮,value="点击"默认提示语
           

        文本框?

        textarea:文本域,cols="300"定义几行,rows="10"定义几列,placeholder="请写下你的留言"默认提示语, 
        17.下拉框
        select,option---双标签,下拉框

        三.CSS




        选择器
        基本选择器
        标签选择器
        标签名{

        }类选择器
        类名{

        }id选择器
        id名{

        }通配符选择器
        *{

        }包含选择器
        子代选择器 ----找的是亲生的标签(儿子女儿)
         .a>li {
            color: pink;
         }后代选择器 ------找的是所有后代中满足的标签
        逗号选择器 ------同时选择多个标签,可以用,隔开
          .a li,
          .one {
            color: green;
         }属性选择
        /*  */
        input[属性名="password"] {
        }

        /* 具有某个属性的指定标签 */
        标签名[属性名] {
        }

        /* 属性的值中包含某个值 */
        标签名[属性名*="e"] {
        }

        /* 属性值以什么开头 */
        标签名[属性名^="p"] {
        }

        /* 属性值以什么结尾 */
        标签名[属性名$="t"] {
         }

        /* +表示的是下一个标签 */
        .标签名+p {
        }伪类选择器
        /需要按照上面的顺序从上往下书写 
        /* 访问前 */
        标签名:link {
        }

        /* 访问后 */
        标签名:visited {
        }

        /* 鼠标悬停时 */
        标签名:hover {
        }

        /* 鼠标点击时 */
        标签名:active {
        }

你可能感兴趣的:(笔记)