阅读模式:

博主从零开始学习HTML(入门基础)

阅读量:15  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:目录从零开始学习HTML(入门基础)互联网三大基石HTML的Head标签中的常用元素字体格式化标签字符实体,以下写最常用的几个html常用标签及解析a标签img标签媒体标签audio和video无序列表与有序列表定义列表 dltable表格......

博主从零开始学习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: 会相对于浏览器窗口进行定位,不会因为浏览器上下滑动而改变位置。通常用于首部、尾部、或者侧边广告
分享到:
相关阅读:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: