【前端】HTML基础总结

概要

html基本结构

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>html标签title>
head>
<body>
body>
html>
  空格
 空字符
html标签
<h1>h1> 标题标签1-6之间字体大小逐渐减小
<p>p> 段落标签
<b>b> 加粗
<strong>strong> 加粗优化搜索
<i>i> 斜体
<div>div> 块级元素
<span>span> 内联元素
<img src=”” alt=””> 图片标签
<a href=”” target=”_self(在原有网页上打开)/_blank(打开空白页)” title=”鼠标移动链接上显示的内容”> 链接标签
<textarea>产生文本区
<body background="xxxx.gif">插入背景


列表
<ol><li>li>ol> 有序列表
<ul><li>li>ul> 无序列表 消除列表圆点list-style:none;
<dl><dt><dd><dd>dt>dl> 自定义列表
表格
<table><tr><td rowspan=”列数” colspan=”行数”><td>tr>table>
th和td的区别:th自动加粗自身表格里的内容
表单
<form action="url" method='POST'>form>
POST与GET的区别,GET是把输入的内容拼接到URL上,
POST是把输入的内容保存到数据库中
产生下拉列表:<select>
<label>标签与<input>标签连用,如果您在 label 元素内点击文本,就会触发此控件。<label> 标签的 for 属性应当与相关元素的 id 属性相同
文 本 框<input type="text" value="" maxlength"可输入的最大长度" size="" />
提交按钮<input type="submit" value="提交" />
普通按钮<input type="button" value="普通按钮" />
密 码 框<input type="password" />
重置按钮<input type="reset" value="重置" />
单选按钮
文件上传按钮<input type="file"/>
多选按钮<input type="checkbox" />name
下拉框<select><option>option>optgroup>select>
多行文本域<textarea  rows="" cols="">textarea>
隐藏域<input type="hidden" />
图片按钮

易错知识点

  • 不属于HTML标签,它用于指定文档的类型
  • 标签用于预定义格式处理,文本在浏览器中显示时遵循HTML文档规范
  • 在HTML表格里面如果我们的表格很复杂,那么表格要完全加载下来再显示,它的加载时间太长影响用户体验,所以我们可以使用表格结构划分标签,让它加载一部分就显示一部分。
  • HTML里面导入CSS样式时,使用link与@inport的区别:link除了可以加载CSS样式外还可以做很多事情,比如设置rel(文档与样式的关系)等等,link加载CSS时与页面同时加载,而@import加载时会先把页面下载下来,再加载

HTML链接



<html>
<head>
	<title>HTML图像与超链接title>
	<meta charset="utf-8">
head>
<body>
	<img src="F:\360MoveData\Users\acer\Desktop\捕获.PNG" alt="微信截图">  
	
	<img src="捕获.PNG" alt="微信截图">  
	
	
	<img src="捕获.PNG" height="100px" width="50px" >    
	<img src="捕获.PNG" height="20%" width="30%" >    
body>
html>

HTML列表


<html>
<head>
    <title>列表title>
    <meta charset="utf-8">    
head>
<body>
<ol type="i" > 
    <li>白日依山尽li>
    <li>黄河入海流li>
ol>
<ol type="a">
    <li>黄河入海流li>
ol>
<ol type='I'>
    <li>html是超文本标记语言li>
ol>
<ol type='A'>
    <li>html是超文本标记语言li>
ol>
<dl>
    <dt>列表项标题信息dt>    
    <dd>列表项描述信息dd>
    <dd>列表项描述信息dd>
    <dt>列表项标题信息dt>
dl>
body>
html>

HTML自定义链表

<html>

<body>

<h2>一个定义列表:h2>

<dl>
   <dt>计算机dt>
   <dd>用来计算的仪器 ... ...dd>
   <dt>显示器dt>
   <dd>以视觉方式显示信息的装置 ... ...dd>
dl>

body>
html>

显示结果
【前端】HTML基础总结_第1张图片

HTML表格


<html>
<head>
	<title>HTML表格title>
	<meta charset="utf-8">
head>
<body>
	
	<table border="1">  
		<thead>
			<caption>定义列表标题caption>
			<tr>
			<th>加粗th>
			<td>定义列表块td>
			tr>
		thead>
		<tbody>
			<tr>
			<th>加粗th>
			<td>定义列表块td>
			tr>
		tbody>
		<tfoot>
			<tr>
			<th>加粗th>
			<td>定义列表块td>
			tr>			
		tfoot>
	table>
body>
html>

效果:
【前端】HTML基础总结_第2张图片

你可能感兴趣的:(web前端,html,html5)