【无标题】

一.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”国际编码，让网页不出现乱码的情况
   
   
      // 网页的标题；骨架


    //显示网络内容的区域

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：列表项


       
10. 螺蛳粉

       
11. 榴莲
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级逃课名单

111	111	111
	222	222
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---双标签，下拉框
------multiple：使其可以多选
    上海
    北京
    广州-------selected将其设为拉选框的默认值

三.CSS

​


选择器
基本选择器
标签选择器
标签名{
​
}类选择器
类名{
​
}id选择器
id名{
​
}通配符选择器
*{
​
}包含选择器
子代选择器 ----找的是亲生的标签（儿子女儿）
 .a>li {
    color: pink;
 }后代选择器 ------找的是所有后代中满足的标签
逗号选择器 ------同时选择多个标签，可以用，隔开
  .a li,
  .one {
    color: green;
 }属性选择
/*  */
input[属性名="password"] {
}
​
/* 具有某个属性的指定标签 */
标签名[属性名] {
}
​
/* 属性的值中包含某个值 */
标签名[属性名*="e"] {
}
​
/* 属性值以什么开头 */
标签名[属性名^="p"] {
}
​
/* 属性值以什么结尾 */
标签名[属性名$="t"] {
 }
​
/* +表示的是下一个标签 */
.标签名+p {
}伪类选择器
/需要按照上面的顺序从上往下书写 
/* 访问前 */
标签名:link {
}
​
/* 访问后 */
标签名:visited {
}
​
/* 鼠标悬停时 */
标签名:hover {
}
​
/* 鼠标点击时 */
标签名:active {
}