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

时间  2021-04-11
标签 css html 小程序 浏览器 安全 服务器 网络 ide oop post 栏目 HTML 繁體版
原文   原文链接

目录

从零开始学习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的字符实体css

<  &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的三种引入方式以及优先级

一、行内式，指样式卸载标签内
  <a href="" style="color: #FF0000;"></a>
  二、内嵌式，写一堆style标签在head标签内，而后使用选择器对页面样式进行修改
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    </style>
  </head>
  三、外链式，写在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： 会相对于浏览器窗口进行定位，不会由于浏览器上下滑动而改变位置。一般用于首部、尾部、或者侧边广告
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程