web前端第一次笔记

计科2 黄和平

已于 2023-07-11 09:00:55 修改

阅读量71

点赞数

文章标签：前端

于 2023-07-06 19:28:58 首次发布

本文链接：https://blog.csdn.net/huangheping0803/article/details/131583754

版权

b/s架构
c/s架构
b-浏览器 c-客户端 s-服务器

前端通过浏览器将代码转化为网页

大纲： 1.html（超文本标记语言。超：超链接，能从一个网页跳转到另一个网页；）   结构
   2.css                           表现
   3.Js                           行为

网站：通过一定规则，用html等制作的用于展示特定内容相关的网站集合
网页：构成网站的基本元素

<开始标签> 标签体 <结束标签>
标签可以嵌套

html的骨架：
<!DOCTYPE html>
<html lang="en"> //lang表示对语言的选择，en表示英文
<head>
<meta charset="UTF-8"> //UTF-8表示编译
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>

标签忘记了，去网站查看（MDN）(w3school)(html elements)

标签：标签名(空格)属性
属性：属性名=“属性值”
属性名与属性值相同，只写属性名

<input>输入框

标签：标题标签，表格标签，超链接，段落标签，换行标签，水平线标签，视频标签，图像标签，文本格式化标签，无语意标签，音频标签，详情标签，注释标签

标题标签：<h1>标题</h1>   独占一行
   <h2>标题</h2>
   .....逐渐变小..........
   <h6>标题</h6>

表格标签：<table></table>详情下面有

超链接标签<a href="地址" target="_blank"></a> （target打开方式，默认不开窗口。_blank另一个窗口）

锚链接标签<a href="#id"></a>------------跳转到----> <div id=""></div>

段落标签：<p></p>

换行标签<br/>

水平线标签：<hr/>

视频标签:<video src="地址" controls autoplay muted loop></video> (controls控键) (autoplay muted 静音并自动播放) poster（等待加载时的显示图片）（loop循环播放）

图像标签：src：指向图片位置（相对路径，绝对路径）
   alt：图片地址发生错误时用来提示
   title：鼠标经过时显示的文字
   width：设置图像的宽度
   height：设置图像的高度
   border：设置图像的边框粗细
例如：<img src="./images/cat.gif" alt="我是一只猫" title="猫" width="500px" height="500px" border="20px">

文本格式化标签：
加粗   <strong></strong>       或者   <b></b>
倾斜   <em></em>           <i></i>
删除线   <del></del>           <s></s>
下划线   <ins></ins>           <u></u>

无语义标签（用于布局）：<div></div> 独占一行
<span><span> 一行可多用

音频标签<audio src="地址" controls 其他属性参考视频标签></audio>

详情标签：<details></details>

注释标签： 快捷键;Ctrl+/ 不会再网页中显示，会在网页源代码中显示，供自己理解

有序列表(前面会自动生成序号)：

喜欢的食物
<ol type="以什么来排序">         （type="A" or "a" 不写的话它默认用阿拉伯数字排序）
   <li>榴莲</li>
   <li>臭豆腐</li>
   <li>罐头</li>
</ol>

无序列表：

你喜欢的明星是
<ul >
   <li>蔡徐坤</li>
   <li>罗翔</li>
   <li>法外狂徒</li>
</ul>

自定义列表：

<dl>
   <dt>
   你喜欢的明星
   </dt>
   张三
   <dd>
   李四
   </dd>
</dl>

框架：
<iframe src="https://www.taobao.com" width="900px" height="600px"></iframe>

特殊字符
空格    
小于号   <
大于号   &gl;
和号   &
人民币   ¥
版权   ©
注册商标   ®
摄氏度   °
正负号   ±
乘号   ×
除号   ÷
二次方   ²
三次方   &sup3

元素显示模式：块元素，行内元素

块元素：独占一行 <div> 可以设置宽，高，内边距的属性
行内元素：一行可以存在多个 <span> 不能设置上面·的属性

表单：网页交互区，收集用户信息

表格结构：<table>
       <caption>学生信息</caption>            //表格头
       <thead>
           <tr>
               <th>姓名</th>
               <th>性别</th>
               <th>民族</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>黄和平</td>
               <td>男</td>
               <td>汉</td>
           </tr>
           <tr>
               <td>张三</td>
               <td>男</td>
               <td>汉</td>
           </tr>
           ................
       </tbody>
       <tfoot>
           <td></td>
           <td></td>
           <td>共计四人</td>
       </tfoot>
   </table>
table的属性: 加表格并控制外围的宽度border="1px"   宽width=""   高height=""   表格线间隙cellspacing="0"
caption的属性：   通过css更改
tr的属性：       水平对齐方式align="left/center/right"    垂直对齐方式valign="top/middle/bottom"
td的属性:       跨行设置 rowspan 属性 | 跨列设置 colspan 属性

表单的结构：
   <form action="#" method="get">                   //提交的位置例如:action="https://www.baidu.com/s"   ，#提交到当前页面       method:提交方式
       用户名：<input type="text" name="">            //百度要求name="wd"(表单必有属性)，其他属性：默认文本内容value=""
       密码：<input type="password" name="">            //当type="password"输入加密

       <input type="radio" name="与下面保持相同" value="男">男   //当type="radio"是变成单选选项时必须加上value
       <input type="radio" name="与上面保持相同" value="女">女

       多选; <input type="checkbox" name="相同" value="豆腐">豆腐   //当type="checkbox"是变成多选
       <input type="checkbox" name="相同" value="茄子">茄子
       <input type="checkbox" name="相同" value="榴莲">榴莲

       <label></label>的用法----
       (1)<input type="checkbox" name="相同" value="豆腐"><label>豆腐</lable>
       (2)<lable><input type="checkbox" name="相同" value="豆腐">豆腐</lable>

       隐藏域：<input type="hidden" name="hid" value="黄和平才能查看">

       确认按钮:<input type="submit"> ====<button type="submit">确认</button>
       重置按钮:<input type="reset">
       普通按钮:<input type="button">

       文本域:<textarea cols="高度" rows="宽度"></textarea>

       下拉菜单:   <select name="jiguan" >
               <option value="南京">南京</option>
               <option value="西安">西安</option>
               <option value="成都">成都</option>
           </select>

   </form>

（选项）默认选中属性：checked
（文本）最大长度属性：maxlength
下拉菜单默认属性:selected

html的全局属性：

id----------------在一个页面不能出现相同的id
class-------------一类
accesskey-------设置快捷键
style-------------给元素加样式
date-*----------自定义属性

css的三种引入方式

1.内部样式
2.外部样式link lel="stylesheet" href="另一个已经写好了的html"
3.内行样式

<head>

</head>

1.基本选择器

标签选择器：                标签{...}
id选择器（id="box1"）：   #box1{...}
类选择器（class="box2"）：   .box2{...}
通配符选择器：*{}

2.包含选择器：

子代选择器   .a>li{...}
后代选择器   .a li{...}
<ul class="a">
   <li>1</li>
   <li>1</li>
   <li>1</li>
   <li>1</li>
   <li>1</li>
   <ul >
       <li>1</li>
       <li>1</li>
       <li>1</li>
       <li>1</li>
       <li>1</li>
   </ul>
</ul>

复合选择器：
例如; div,
p,
   span{
   color：red;
   }       //将三个（div,p,span）公用

属性选择器：
标签[属性="属性值"]{......}   //如果省略属性值，将包括所有含有属性的此标签
标签[属性^"te"]{...}       //属性值以te开头
标签[属性$="te"]{..}       //属性值以te结尾
标签[属性*="te"]{...}       //属性中包含有te

结构选择器

字体样式

字体大小： font-size: 20px; //不设置默认16px 冒号后面有空格
字体粗细： font-weight: bold; //加粗也可以写数字但是没有单位，加粗相当于700，最开始是400
字体风格：
是否倾斜：font-style: italic/normal;
字体样式：font-family: "微软雅黑";

复合写 font: italic 900 70px "微软雅黑";（其中前两个属性可以不写，但后面两个必须写，必须按照顺序写）

文本外观：

在选择器中{   text-indent:
       2px;/2em;       //2px在不知名字体大小下缩进两格   //2em在当前字体下缩进两格
   }