第一周学习总结

最新推荐文章于 2024-10-20 18:23:51 发布

xuezhewuya

最新推荐文章于 2024-10-20 18:23:51 发布

阅读量211

点赞数

文章标签：学习前端

本文链接：https://blog.csdn.net/xuezhewuya/article/details/126687261

版权

一、前端的基础要求

1.HTML（超文本标记语言）：网页的结构，页面的元素和内容。

2.CSS（层叠样式表）：网页的表现，页面元素的样式（如：颜色、大小等）。

3.JavaScript（脚本语言）：网页的行为，网页模型定义和页面交互。

二、HTML的相关内容

1.网页的结构组成：文字、图片、音频、视频和超链接。

2.HTML的骨架和常用标签及对应的常用属性和属性值：段落标签-p，图片标签-img，音频标签-audio，视屏标签-video，超链接标签-a。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>快速写入骨架的方法：输入“！”后按回车或者TAB键。</br>
       快速运行HTML文件的方法：右键选择默认浏览器打开"open in default browser"或者快捷键“AIT+B”</p>
    <hr>
    <b>加粗</b> <strong>加粗</strong> <br>
    <u>下划线</u> <ins>倾斜</ins><br>
    <i>倾斜</i> <em>倾斜</em><br>
    <s>删除</s> <del>删除</del>
    <hr>
    <img src="图片标签.png" alt="替换文本" title="这是title文本" width="500px" height="300px">
    <img src="./下级/相对路径.png" alt="">
    <img src="../imge/相对路径.png" alt="图片在上一级的文件夹里">
    <!-- 在上级文件夹里用“../”,上上级用“../../”，在下级用“./”或者直接写文件夹名称 -->
    <img src="图片标签.png" alt="">   <img src="./图片标签.png" alt="">
    <!-- 两种写法都是相同的效果,网页和图片在同个文件夹里时，地址属性值可以直接为图片名称或者"./"。 -->
    <hr>
    <audio src="音频.mp3" controls autoplay loop></audio>
    <audio src="../20220831/音频.mp3" controls autoplay loop></audio>
    <!-- controls：显示播放控件，autoplay：自动播放（部分浏览器不支持），loop：循环播放 -->
    <!-- ALT属性值是：在图片不显示的时候显示的内容 -->
    <!-- title属性值是：鼠标悬停的时候显示的内容，不仅是图片标签可以，其他标签也可以-->
    <!-- 宽度和高度只设置一个的话，另外一个值会等比例变化，图片不会变形。-->
    <hr>
    <video src="./相对路径.mp4" controls autoplay loop muted></video>
    <!-- muted实现静音自动播放  多属性可以用空格隔开连写-->
    
    <hr>
    <a href="./链接标签.html" target="_blank">重新打开一个页面</a>
    <!-- 重新打开一个页面 -->
    <a href="./音频标签.html" target="_self">在当前页面打开链接</a>
    <!-- 在当前页面打开链接，可以点击返回重新回到链接前的页面 -->
</body>
</html>

3.HTML表格、列表和表单的标签和属性及属性值：

<body>
  <h3>水果无序列表</h3>
  <ul><li>苹果</li><li>香蕉</li><li>梨子</li></ul>
  <h3>水果有序列表</h3>
  <ol><li>苹果</li><li>香蕉</li><li>梨子</li></ol>
  <!-- ol和ul标签只能包裹li标签，li标签可以包裹任意内容。 -->
  <h3>自定义列表</h3>
  <dl>
    <dt>水果自定义列表</dt><dd>苹果</dd><dd>梨子</dd><dd>香蕉</dd>   
       <!-- dl是列表整体，dt是列表标题，dd是列表内容，dl里面只能放dt和dd，dt和dd里面可以放任意内容。 -->
  </dl>
  <table border="1"  width="800" height="700">
    <caption><h2>表格标题</h2></caption>
    <!-- border属性为表格的边框，caption属性为表格的标题 -->
    <!-- table表格整体包含多个tr（表格其他行）和一个th（表格第一行），一个tr里面包含多个td（内容）。 -->
   <thead>
    <tr><th>第一行</th><th>第一行</th><th>第一行</th></tr>
   </thead>
   <tbody>
    <tr><td>小哥哥</td><td>100分</td><td>帅气</td></tr>
    <tr><td>小姐姐</td><td>100分</td><td>漂亮</td></tr>
    <!-- <td rowspan="2">100分</td>，跨行合并的写法，合并上下。需要删掉被合并的部分代码 -->
   </tbody>
   <tfoot>
    <tr><td>总结</td><td>郎才女貌</td><td>郎才女貌</td></tr>
    <!-- <td colspan="2">郎才女貌</td>，跨列合并的写法，合并左右。需要删掉被合并的部分代码 -->
   </tfoot>
   <!-- 表格分为头部thead，身体tbody，底部tfoot，结构清晰便于浏览器的识别效率 -->
  </table>
  <form action="">
    <input type="submit" value="提交按钮">
    <input type="password" placeholder="请输入">
    <input type="button" value="普通按钮">
    <input type="reset" value="重置按钮">
    <input type="text" placeholder="请输入">
    <input type="radio" >一个单选框
    <input type="checkbox" >一个复选框
    <input type="file" multiple value="文件上传">
    <!-- 按钮可以用value可以给按钮赋值内容,multiple属性可以设置上传多个属性。text文本的占位符用placeholder赋值。单选框和复选框不能有框内内容。-->
  </form>   
  <!-- form为表单域标签，里面可以放入多个表单input标签，放在一起重置时可以所有的一起重置，action为提交地址。 -->
  <button type="submit">提交按钮</button>
  <button type="reset">重置按钮</button>
  <button type="button">普通按钮</button>
  <button type="menu">菜单</button>
  <!-- 普通button按钮在赋值不同时的功能也不同，可以替代直接使用特殊按钮，使用最广泛。 -->
  <select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option selected>深圳</option>
    <!-- select只能包裹option标签，selected为默认选中项 -->
  </select>
  <textarea cols="30" rows="10"></textarea>
  <!-- cols为设置文本域的宽度，rows为设置文本域的高度。一般不用这两个设置，而是使用css设置 -->
  <input type="radio" name="sex" id="nan"> 
    <label for="nan">男</label>
    <label><input type="radio" name="sex" checked>女</label>
    <!-- 实现点击图片也可以选中，方法一：用lable包裹文本“男”字，给一个for属性，值与表单标签中的id属性一致 -->
    <!-- 方法二：用lable包裹住整个表单标签，去掉for属性 ，checked为默认选中项-->
</body>

4.没有语义的标签span和div（主要的布局标签），比如p表示段落语义的标签。字符实体：空格字符的实体（&nbsp）有语义的手机端布局标签header（网页头部），nav（网页导航），footer（网页底部），aside（网页侧边栏），section（网页区块），article（网页文章）。三、CSS的

三、部分内容

1.CSS选择器：找到指定的标签，分为：标签选择器、类选择器、id选择器和通配符选择器。

<!-- 标签选择器：以标签名命名的选择器，会影响所有的同样标签名的元素效果。 -->
    <style>
        p{color: blue;}
    </style>
<body>
    <p>使用标签选择器</p>
    <p>这是另一个p标签，颜色同样会受p选择器的效果影响</p>
</body>

<!-- 类选择器（.）：命名一个类名，在指定的class类名的标签中使用这个样式。 -->
    <style>
        .leiming{color: blue;}
        .daxiao{font-size: 50px;}
    </style>
<body>
    <p class="leiming">这是一个类名为“leiming”的p标签</p>
    <p>这是另一个p标签，颜色和大小不会改变。</p>
    <div class="daxiao">这是一个类名为“daxiao”的div标签</div>
    <!-- 所有标签都有类class属性，同个标签可以拥有多个类名，以控分隔开，同一个class属性也可以被多个标签使用。 -->
</body>

<!-- id选择器（#）：命名一个id属性值，然后使用它。 -->
    <!-- 一个id选择器只能被一个标签使用，一个标签只能有一个id属性值。 -->
    <style>
        #co{color: aqua;}
    </style>
<body>
    <div id="co">这是一个div标签</div>
    <div id="co">这是另一个div标签，虽然效果也有，但是规范是不允许使用的，会影响后期js的使用。</div>
    <!-- 虽然效果也有，但是规范是不允许使用的。 -->
</body>

 <!-- 通配符选择器（*）：可以选择所有的标签，属性值可以赋给所有的标签，一般不用。 -->
    <style>
        *{color: brown;}
    </style>
<body>
    <p>p标签</p>
    <div>div标签</div>
    <p>p标签</p>
    <span>span标签</span>
</body>

2.字体样式的种类：字体样式（font-style）（是否倾斜）、字体粗细（fongt-weight）、字体大小（font-size）和字体类型（font-family）。字体默认大小为16px。粗细分为两种：normal（400）和bold（700），粗细范围是整数100-900之间。倾斜：font-style属性，分为normal（正常）和italic（倾斜）。微软电脑默认字体是微软雅黑，字体有很多种，每种字体以逗号分开如：{font-family：雅黑，宋体，楷体，sans-serif；}。但字体分为三大类：

3.文本样式：文本缩进（text-indent），文本水平对齐（text-align），文本修饰（text- decoration）。缩进属性值：数字+px或者数字+em（1em=16px）。对齐属性值：左对齐（left），右对齐（right），左右居中（center）。修饰属性值：无修饰（none），下划线（underline），上划线（overline），删除线（line-throuth）。

4.文本行高及利用行高设置文本垂直居中：行高（line-height），行高=上间距+字体大小+下间距，行高可以方放入font复合属性中与size属性放一起以/隔开，利用行高设置垂直居中的方法：把行高设置成标签的高度。

    <style>
        p{background-color:red;width:400;height:400;text-align：center;line-height：400px；}
        .fuhe{
            font: italic 700 66px/2 宋体;}
    /* 行高可以放入复合属性里面与字体大小放一起，以“/”隔开 */
    </style>
<body>
    <p>文本</p>
    <!-- 垂直居中设置，行高=标签高度，且文字只能是一行。 -->
    <div class="fuhe">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div>
</body>