第一周预习：HTML+CSS入门-CSDN博客

<!DOCTYPE html>       
<html lang="en">       
<head>                        
    <meta charset="UTF-8">        
    <title>这里是标题</title>          
</head>
<body>
   这里写内容
</body>
</html>

<!DOCTYPE html>：文档类型：符合HTML5标准
<html></html>: 文档开始与结束标志。
<head></head>: HTML头部标签，不在浏览器窗口展示。
<body></body>: HYML主体标签，定义展示在浏览器文档窗口中的内容。
<title></title>: 定义网页标题，在浏览器标题栏展示。
<meta>: 元数据，为浏览器或其他机器提供有关页面的信息。这些信息可能包括字符集、页面描述、关键词、作者、日期等。
lang属性：搜索引擎（"en"英文，“zh”中文)。
charset属性：表示字符集编码方式。“UTF-8”是其中的一种国际编码，包含了所有语言。其他编码方式还有: "ASCII"——编码数字、英文字母、符号；"GB2312"——简体中文；“Unicode”——所有语言。

（二）HTML常用标签

1.<h1></h1>：标题标签，包括h1~h6，文字加粗且独占一行。

2.<p></p>：段落标签，两个段落之间有间隙.

3.<br/ >：段落内换行。

4.<hr>:水平线标签

5. &nbsp：空格，段落内的文字忽略连续的空格，只展示一个空格。

6.：注释，注释内容在省略号里，不会在浏览器中展示。（VS中快捷键ctrl+/）

7.<strong></strong>或者<b></b>：加粗标签。

8.<em></em>或<i></i>：倾斜标签。

9.<ins></ins>或<u></u>：下划线。

10.<del></del>或<s></s>：删除线。

11.<img src="图片的URL" alt="替换文本" title="悬停显示"/>：图片标签，alt内的内容图片加载不出来时的文本，title内的内容为鼠标悬停在图片上时显示的文字。

12.<a href = "跳转地址">文字或图片</a>:超链接标签

①<a href = "news.html">新闻</a> 链接到本站点其他网页

②<a href = "http://www.baidu.com">百度</a> 链接到其他站点

③<a href = "#">板块2</a> 虚拟超链接，未确定链接到什么位置时，"#"可为"javascript:;"

eg:这是一些标签

<p>
    这是一条水平线
    <hr><br/>
    插入一个超链接
    <a href="http://www.baidu.com">百度</a> <br/>
    <img src="./微信图片_20240321095519.jpg" width="100" height="100"/>
    <br/>
    <strong>加粗标签1</strong> <b>加粗标签2</b>
    <br/>
    <em>斜体1</em> <i>斜体2</i>
    <br/>
    <ins>下划线1</ins><u>下划线2</u>
    <br/>
    <del>删除线1</del><s>删除线2</s>
    </p>

13.<audio src="音频的URL" ></audio>：音频标签。属性还有 controls（显示音频控制面板）； loop（循环播放）。

14.<video src="视频的URL"></video>：视频标签。属性还有controls（显示视频控制面板）； loop(循环播放)；muted（静音播放）；autoplay（自动播放，必须在静音条件下）。

15.<ul></ul>：无序列表。<li>列表条目</li>,列表条目独占一行。

16.<ol></ol>：有序列表。<li>列表条目</li>,列表条目独占一行。

17.<dl></dl>：定义列表。<dt>列表标题</dt>,<dd>列表描述</dd>会自动缩进。

下面是三个列表

这是一个有序列表<br/>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ol>
    这是一个序列表<br/>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ul>
    这是一个定义列表<br/>
    <dl>
        <dt>前端</dt>
        <dd>HTML</dd>
        <dd>CSS</dd>
        <dd>JS</dd>
    </dl>

18.<table></table>：表格。<tr>行</tr>,<th>表头单元格</th>,<td>内容单元格</td>。boder="边框粗细"，可展示边框线。

这是一个表格

<table border="2" cellspacing="1" >
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
        <tr>
            <td>第二行内容1</td>
            <td>第二行内容2</td>
        </tr>
        <tr>
            <td>第三行内容1</td>
            <td>第三行内容2</td>
        </tr>
    </table>

19.<form></form>：表单。input：<input type="text/password"/>——用户可输入的文本框/密码框。<label></label>：增大点击范围。可同时包裹表单控件和文字。

type表示类型，有以下几种：

text---文本框，password---密码框

radio---单选框：加name=""属性才具有单选功能,引号内名字自己选。

checkbox---复选框

checked---默认选中该项，value=""表示按钮上的文字

reset---重置，submit---提交

placeholder---提示字

file---上传文件，加multiple---可选择多个文件

20.<select></select>：下拉菜单。<option>选项</option>，每个选项用一个option，添加selected表示默认选中。

21.<textarea></textarea>：文本域标签。

这是一个表单

<form>
        文本框：<input type="text" placeholder="请输入文本"><br/>
        密码框：<input type="password"><br/>
        单选框：<label><input type="radio" name="gender" value="man" checked>男</label>
        <label><input type="radio" name="gender" value="woman">女</label><br/>
        复选框：<input type="checkbox"checked>选项1
        <input type="checkbox">选项2 <input type="checkbox">选项2<br/>
        下拉菜单：
        <select>
            <option>黑龙江</option>
            <option>吉林</option>
            <option selected>辽宁</option>
        </select><br/><br/>
        <textarea>请输入可换行的文本</textarea><br/>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>

22.<pre></pre>：预留文字，可保留空格空行等。

23.<span></span>：不换行。

24.<div></div>：独占一行。

二、CSS入门（层叠样式表）

（一）CSS引入方式

1.内部样式表：初步学习使用

①放置位置：head里面，title标签下方

②书写规则：在style标签里，选择器{属性名:属性值；}，如下：

<style>
         p { 
            color:red;
          }
</style>

2.外部样式表：开发使用

放置位置：写在单独的CSS文件中(.css)，在html中用link标签引入(link标签在head里，title下)

3.行内样式：配合js使用

书写规则：<div style"css属性"></div>

（二）CSS选择器

选择器作用：查找标签，设置样式。

1.标签选择器

注：使用标签名作为选择器-->选中同名标签设置相同样式。(无法差异化同名标签)

eg:p,h1,div,a,img...

2.类选择器

注：查找标签，差异化设置标签的显示效果。

使用步骤：定义（.类名）+ 使用（在标签中添加class="类名1 类名2"）

eg：<p class="类名">内容</p>

3. id选择器

注:一般配合js使用。同一个id选择器在一个页面只能使用一次。

使用步骤：定义（#id名）+ 使用（id="id名"）。

eg：<p class="id名">内容</p>

4.通配符选择器

查找页面所有标签，设置相同样式。（一般用于清除标签默认样式）

使用：*，不需要调用，浏览器自动查找页面所有标签。

* { 
    color:red;
  }

(三) CSS简单样式

1.CSS单位

2.CSS颜色

3.CSS文本属性

3.CSS字体font

3.CSS背景

（四）CSS简单定位方法

1.文档流定位

元素分类：

block：独占一行，元素的height、width、margin、padding都可设置。<div>、<p>、<h1>...<h6>、<ol>、<ul>、<table>、<form>
Inline：不单独占用一行，width，height不可设置。<span><a>
inline-block:同时具备inline元素、block元素的特点,不单独占用一行 ,元素的height、width、margin、padding都可设置。<img>

2.浮动定位

Float属性：定义元素在哪个方向浮动，常用于div实现横向多列布局。取值：left，right，none

Clear属性：规定元素的哪一侧不允许其他浮动元素。
both，清除左右两边的浮动。
left 和 right 只能清除一个方向的浮动。
none 是默认值，只在需要移除已指定的清除值时用到。

例如，输入以下代码

<img src="./微信图片_20240321095519.jpg" width="100" height="100"/>
<div>Clear属性：规定元素的哪一侧不允许其他浮动元素。
      both，清除左右两边的浮动。
</div>
<!-- 下面加入css成分 -->
img {
    float:left;
}