博主从零开始学习HTML（入门基础）

目录

• 从零开始学习HTML（入门基础）
  • 互联网三大基石
  • HTML的Head标签中的常用元素
  • 字体格式化标签
  • 字符实体，以下写最常用的几个
  • html常用标签及解析
    • a标签
    • img标签
    • 媒体标签audio和video
    • 无序列表与有序列表
    • 定义列表 dl
    • table表格标签的基本使用
    • input输入标签的基本使用
    • form标签的基本使用
    • iframe标签
    • 行内元素与块级元素的区别
    • CSS的三种引入方式以及优先级
    • CSS的常用选择器
    • 一些常用CSS属性
    • 盒子模型、浮动、定位

从零开始学习HTML（入门基础）

互联网三大基石

• HTTP协议
• URL：统一资源定位符
• HTML: 超文本标记语言

HTML的Head标签中的常用元素

  <!-- 告知浏览器使用何种字符集解析 -->
  <meta charset="UTF-8" />
  <!-- 定义关键字，让搜索引擎能够通过关键字查询到该网站 -->
  <meta name="keywords" content:"小程序,小星星" />
  <!-- 作者 -->
  <meta name="author" content:"小星" />
  <!-- 当前网页的描述 -->
  <meta name="description" content:"小星星从零开始学HTML的描述" />

  <!-- 页面3秒后跳转到 https://cnblogs.com/ 页面，不常用 -->
  <meta http-equiv="refresh" content:"3:https://cnblogs.com/" />

字体格式化标签

  <b>加粗字体</b>
  <strong>加粗字体</strong>
  <i>斜体字体</i>
  <em>斜体字体</em>
  <big>加大字体</big>
  <small>缩小字体</small>
  <sub>下标</sub>
  <sup>上标</sup>
  <del>删除线字体</del>

字符实体，以下写最常用的几个

详情可以查看w3school的字符实体

  <  &lt;
  >  &gt;
 半角空格 &nbsp;
 全角空格 &emsp;

html常用标签及解析

a标签

  <!-- 第一种，链接访问外部链接 -->
  <a href="http://www.baidu.com">a标签访问外部链接，可以打开百度</a><br><br>
  <!-- 访问本地资源，可以是绝对路径，也可以是相对路径 -->
  <a href="index.html">a标签访问本地资源</a><br><br>
  <!-- 访问锚点，定位到锚点位置 -->
  <a href="#site1">访问锚点，定位到锚点位置</a><br><br>

  <!-- 定义锚点 -->
  <a name="site1">我是锚点1</>

  <!-- a标签的target属性 -->
  <a target="_blank">打开新的空白页显示</a>
  <a target="_self">在当前页打开</a>

img标签

  <!-- 使用网络上的图片 -->
  <img  alt="图片显示不出来就会显示这段文字" width="200px" src="http://1www.people.com.cn/NMediaFile/2021/0408/MAIN202104080934327952407170165.jpg" />
  <!-- 使用本地的图片，相对路径与绝对路径都行 -->
  <img title="鼠标移动到图片上会显示的文字" alt="图片显示不出来就会显示这段文字" width="20%" src="./img/1.jpg" />

媒体标签audio和video

  <!--
    src：音频文件的地址
    autoplay：是否打开网页自动播放
    loop：播放完第一次后重复播放
    controls:音频控制器
  -->
  <audio src="./media/BLUE.mp3" autoplay="autoplay" loop="loop" controls="controls"></audio>

  <!-- 设置属性时，如果属性名与属性值都一致，可以直接单写一个属性名代替 -->
  <video height="300px;" controls loop autoplay src="./media/1.mp4"></video>

  <!--  标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择 -->
  <audio controls>
     <source src="horse.ogg" type="audio/ogg">
     <source src="horse.mp3" type="audio/mpeg">
     Your browser does not support the audio element.
  </audio> 

无序列表与有序列表

  <!-- 有序列表 type: 1 阿拉伯数字 a小写字母 A大写字母 i小写罗马数字 I大写罗马数字 -->
 <ol type="i">
  <li>第1个li标签</li>
  <li>第2个li标签</li>
    <ul>
      <li>我是嵌套的无序列表的第1个li标签</li>
      <li>我是嵌套的无序列表的第2个li标签</li>
    </ul>
  <li>第3个li标签</li>
 </ol>
  <!-- 无序列表 type：circle空心圆 disc实心圆 square实心小矩形 -->
 <ul type="square">
  <li>第1个li标签</li>
  <li>第2个li标签</li>
  <li>第3个li标签</li>
 </ul>

定义列表 dl

<!-- 定义列表，dt一般用于放图片，dd一般用于放文字 -->
  <dl>
    <dt>
      <a  target="_blank" href="http://www.baidu.com">
        <img width="300px" src="./img/1.jpg" />
      </a>
    </dt>

    <dd>
      <font color="red">&yen;1000</font>
      <p>
        <a href="http://www.baidu.com">
          <font>快来买啊，很便宜，非常便宜</font>
        </a>
      </p>
    </dd>
</dl>

table表格标签的基本使用

		<!-- border定义边框 cellspacing：规定单元格之间的空白 cellpadding定义单元格与边框的距离 -->
		<table width="50%" align="center"  border="3px" cellpadding="5px" cellspacing="0px">
			<!-- <thead>表示表格的头部 <tbody>表示表格的内容，如果没写浏览器会自动生成 <tfoot>表示表格的尾部 -->
			<thead bgcolor="beige">
				<tr>
					<!-- rowspan：占用1列几个单元格，colspan：占用1行的几个单元格 -->
					<th colspan="4">学生成绩单</th>
				</tr>
				<tr>
					<!-- th标签默认会有 text-align: center;以及font-weight: bold; 属性 -->
					<th>姓名</th>
					<th>年龄</th>
					<th>班级</th>
					<th>成绩</th>
				</tr>
			</thead>
			<tbody style="text-align: center;">
				<tr>
					<td rowspan="2">张三</td>
					<td>5</td>
					<td>明月1班</td>
					<td>20分</td>
				</tr>
				<tr>
					<td>5</td>
					<td>明月1班</td>
					<td>20分</td>
				</tr>
			</tbody>
			<tfoot bgcolor="aqua">
				<tr>
					<th>总人数</th>
					<th>2</th>
					<th>总分数</th>
					<th>40分</th>
				</tr>
			</tfoot>
		</table>

input输入标签的基本使用

  <!--  -->
 <table border="1px" cellspacing="0px" align="center" width="35%">
			<thead bgcolor="aqua">
				<tr>
					<th colspan="2">基本信息表</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<label for="username">账号：</label>
					</td>
					<td>
						<input id="username" type="text" placeholder="请输入账号">
					</td>
				</tr>
				<tr>
					<td><label for="password">密码：</label></td>
					<td><input id="password" type="password" placeholder="请输入密码"></td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						<!-- 如果要让radio单选框拥有互斥效果，需要设置相同的name属性 -->
						<input type="radio" name="gender" checked="checked">男</input>
						<input type="radio" name="gender">女</input>
					</td>
				</tr>
				<tr>
					<td>爱好：</td>
					<td>
						<input type="checkbox" id="checkbox1" name="hobbys"><label for="checkbox1">足球</label></input>
						<input type="checkbox" id="checkbox2" name="hobbys"><label for="checkbox2">篮球</label></input>
						<input type="checkbox" id="checkbox3" name="hobbys"><label for="checkbox3">兵乓球</label></input>
						<input type="checkbox" id="checkbox4" name="hobbys"><label for="checkbox4">羽毛球</label></input>
					</td>
				</tr>
				<tr>
					<td>请选择照片：</td>
					<td><input type="file"></td>
				</tr>
				<tr>
					<td>个人简介：</td>
					<td><textarea name="personal" style="height: 50px;" placeholder="请介绍以下你自己"></textarea></td>
				</tr>
				<tr>
					<td>籍贯</td>
					<td>
						<!-- multiple属性：一次性显示所有的option选项 -->
						<select name="myFrom">
							<option>深圳</option>
							<option>上海</option>
							<option>北京</option>
							<option selected="selected">-请选择省份-</option>
						</select>
					</td>
				</tr>
			</tbody>
		</table>

form标签的基本使用

  <!--
    form表单，用于提交用户数据到服务端
    表单提交的数据必须拥有name属性，否则不会被提交。提交的数据是该标签的value属性。
    action：提交的服务器地址
    method：指定提交方式，分别有get与post。
    get：通过地址栏提交数据，数据不安全。提交的数据大小有限制。只能提交文本数据。
    post：通过请求体提交数据，数据相对安全。理论上无数据大小限制（服务端可限制）。可以提交任意类型的数据。
  -->
  <form action="http://www.baidu.com" method="post">
    <input name="username" type="text" />
    <button type="submit">提交按钮</button>
    <button type="reset">重置，点我可清空所有输入框</button>
  </form>

iframe标签

  <!-- 如果需要通过页面上的a标签让iframe中的内容切换，则需要为iframe定义一个name属性，并且a标签的target写入该name属性 -->
  <a target="iframe1" href="http://www.baidu.com">百度</a>
  <!-- iframe标签，在当前页面中再打开另一个页面 -->
  <iframe name="iframe1" src="这里可以放本地html路径，也可以放网络上的html路径" width="500px" height="400px"></iframe>

行内元素与块级元素的区别

  行内元素：显示在页面一行，不能使用盒子模型，不一定能设置宽高
  块级元素：单独占用一整行，可以使用盒子模型

  行内元素 转换为 块级元素：display: block；
  块级元素 转换为 行内元素：display: inline;

CSS的三种引入方式以及优先级

  1、行内式，指样式卸载标签内
  <a href="" style="color: #FF0000;"></a>
  2、内嵌式，写一堆style标签在head标签内，然后使用选择器对页面样式进行修改
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    </style>
  </head>
  3、外链式，写在head标签中，引入外部css样式
  <link rel="stylesheet" href="css/font.css">

CSS的常用选择器

  id选择器：#idname{}
  class选择器： .classname{}
  标签选择器：  例如选择所有span标签：span{}
  属性选择器，例如选择input中type为text的： input[type=text]{}
  层级选择器，选择id为myid的子元素中的div： #myid div{}
  分组选择器，选择多个标签，例如： #id1,#id2,.class1 {}
  伪类选择器：
    /* 未访问的链接 */
    a:link {
      color: #FF0000;
    }

    /* 已访问的链接 */
    a:visited {
      color: #00FF00;
    }

    /* 鼠标悬停链接 */
    a:hover {
      color: #FF00FF;
    }

    /* 已选择的链接 */
    a:active {
      color: #0000FF;
    }
  注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！

一些常用CSS属性

  line-height: 文字行高（作用于块级元素）
  text-decoration：文本装饰
  font-size：字体大小
  float：浮动
  postion：定位
  color：文字颜色
  background：背景
  background-color：背景颜色
  text-align：当前元素的子元素文本对齐方式
  width：宽度（多数时候作用于块级元素）
  height：高度（多数时候作用于块级元素）
  padding：内边距（盒子模型）
  margin：外边距（盒子模型）
  list-style：li标签样式
  cursor: 鼠标滑过时的手势;

盒子模型、浮动、定位

  盒子模型：指的是块级元素之间存在包含关系，调整其位置。padding内边距，margin外边距等...
  浮动：块级元素之间想要存在于同一行而不切换为行内样式的清空下，使用float:left or right 调整左右浮动，相对于父标签进行浮动
  定位：
    绝对定位 absolute：绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对body元素，定位后会释放原点的位置。
    相对定位 relative：相对位置的坐标参考是以自己上一次的位置（x，y）作为原点进行定位。定位后不会释放原点的位置。
    相对窗口定位fixed： 会相对于浏览器窗口进行定位，不会因为浏览器上下滑动而改变位置。通常用于首部、尾部、或者侧边广告