HTML学习

Dakemaster

已于 2022-03-10 10:16:46 修改

阅读量93

点赞数

分类专栏： HTML学习总结文章标签： html 学习 p2p

于 2022-03-10 10:14:04 首次发布

本文链接：https://blog.csdn.net/Dakemaster/article/details/123394031

版权

HTML学习总结专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.HTML介绍以及网页基本骨架

<!DOCTYPE html>              声明标签，告诉浏览器采用html第五代编译
<html>                             网页的开始
    <head>                 给网页提供信息
        <meta charset="utf-8">       规定网页的编码格式，防止页面出现中文乱码
        <title> <title>   标题标签
    </head>
    <body>

    </body>
</html>

2.HTML标题段落超链接

标题标签一共h1-h6 共六个级别      <h1></h1> 
作用：字号规定，字体加粗，独立成行。

段落标签: <P></P>
作用：独立成行

超链接标签：<a href="http://www.baidu.com"target="_blank">百度</a>
href属性：里面需要加入所需跳转到的网址
target="_blank" 作用：保持原网页不动，打开新的页面跳转

3.HTML相对路径和图片引入

1.相对路径问题：
	如果两个文件在同一级，直接打对应名称。
	更改了网页的文件路径，需要重新在编辑器里打开
	<a href="名称">文本</a>
	
	不在同一级，如果在其同级的文件夹，先进入文件夹，再找到文件
	<a href="文件夹名称/名称">文本</a>
	如果在其上一级，先打../打对应的文件名称
	<a href="../名称">文本</a>

2.图片标签：单标签结构 <img src="图片地址"title="提示文字"alt="">
  src：图片的来源路径                                必备属性
  title：鼠标放到图片上时提示的文字           必备属性
  alt：当图片路径出错时提示的文字	必备属性
  width:宽度属性 默认单位像素：px
  height:高度属性   默认单位像素：px
图片在网页中具有默认边距，需要将图片转化为块元素

3. 本地图片的显示：
  <img src="文件夹名称（images）/图片名称"title="图片"alt="错误">

4.  图片跳转网址：标签的嵌套
  <a href="http://www.baidu.com"><img src="文件夹名称（images）/图片名称"title="图片"alt="错误"></a>

4.HTML表格

表格标签：<table border="1"cellspacing="0">
	   <tr>
	         <td></td>
	         <td></td>
	  </tr>	
	</table>

tr:行
td:列    
border="1"表格的边框，数字表示边框的宽度。
cellspacing="0"取消边框之间的间距。
bgcolor="red"表格背景颜色。可以给任意表格或者单元格加。
colspan="3"跨列属性 数字表示占几列。
rowspan="2"跨行属性数字表示占几行。

5.HTML列表

列表标签：
  有序列表：<ol type="a">
  	  <li></li>
  	  <li></li>
  	</ol>
type="a"改变列表符号类型。
start="1":表示从多少开始。

 无序列表：
 	<ul>
	 <li></li>
	 <li></li>
	</ul>  
列表直接包裹的标签必须是<li>

6.HTML表单元素

<form action=""method="">  表单元素的容器
</form>                 所有表单元素在form里面统一提交。
表单元素可以使用p标签进行换行。

action=“”： 服务器地址
method="" : 通过什么方法发送到服务器上。

<label for="">文本框</label>：关联标签
作用：点击文字时让对应的input框获得焦点 for属性对应input id

文本框：
<input type="text"value=““name=""placeholder=“”>：  
type表示类型文本框对应类型text。
value=“”：文本框中实际所输入的值，也是服务器所收到的值。用于不可输入的选项。
name=""   ：和后台进行匹配的。
placeholder=“”：提示用户要输入的内容。

密码框：
<input type="password">
密码框对应类型 password。
与文本框的属性基本一致

单选框：对应标签后面跟文字， 一组单选框name属性必须相同
<input type="radio">
单选框对应类型radio。
checked：默认选中属性。

复选框：
<input type="checkbox">
复选框对应类型checkbox。

提交按钮：将填写好的数据发送到服务器上。
<input type="submit">
value 可以更改按钮实际显示的内容。

重置按钮：把form中所有的内容还原成默认。
<input type="reset">

自定义按钮：
<input type="button">

下拉列表：
<select name="city"id="">
	<option value="河南">河南</option>
</select>
option：表示下拉项。
selected：默认的选中状态。


文本域：
<textarea name=""id="" cols="" rows=""></textarea>
cols：表示具有多少列。
rows：表示具有多少行。

7.HTML定位

html 定位
        css中定位有一个属性 
	position: absolute; 绝对定位，随页面的滚动而滚动
	position: fixed;    绝对定位，但模块不随页面的滚动而滚动
	position: relative; 相对定位
	top:XXpx;           距离当前模块上面的距离
  	left：XXpx;         距离当前模块左边的距离
	z-index：数值；     当前模块所在的层级

vue  elementUI Antd Uni-app 数据类型

8.HTML总结以及元素分类

h1~h6  p  a  img  table  tr  td  ul  li  ol  form  input  label  div

独立成行(块元素)（可以设置大小）（宽度自适应其父级的宽度）：h1~h6  p table  tr  ul   li  ol   form  div
不独立成行（行元素）（不可以设置大小）（宽度由内容决定）：a  img  td  input  label

div：容器标签可以放多种标签。独立成行。