HTML基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/qq707548235/article/details/51761845

最近准备学一学web前端的东西，恩做一些笔记，先从html入手

结构

<!DOCTYPE HTML> 文档声明

<html>

<head></head> 页头

<body></body> 页身

</html>

head

head一般放6种标签

<title> 页面标题

 
 < 
 head 
 >     

 
      
 <!--网页关键字--> 

 
      
 < 
 meta  
  name 
 = 
 "keywords" 
  content 
 = 
 "绿叶学习网" 
 /> 

 
      
 <!--网页描述--> 

 
      
 < 
 meta  
  name 
 = 
 "description" 
  content 
 = 
 "绿叶学习网是一个富有活力的技术学习网站" 
 /> 

 
      
 <!--本页作者--> 

 
      
 < 
 meta  
  name 
 = 
 "author" 
  content 
 = 
 "helicopter" 
 > 

 
      
 <!--版权声明--> 

 
      
 < 
 meta  
  name 
 = 
 "copyright" 
  content 
 = 
 "本站所有教程均为原创，版权所有，禁止转载。否则将追究法律责任。" 
 /> 

 
      
 </ 
 head 
 > 

页面自动跳转 <meta http-equiv="refresh" content="3,url=http://www.baidu.com"/>3秒后页面自动跳转到百度

<base>定义页面所有链接的基础定位 <base href="http://aaa"/>

标题

<h1>一级标题</h1><h6>六级标题</h6>一级最大，依次减小

段落

<p>内容</p>段落标签会导致两文字段落之间有一定间隙

换行

<br/>

字体效果

粗体 <strong>

斜体 <em>

上标<sup>类似数学的n平方这种显示在右上角的这种

下标<sub>比如化学式显示在右下角的数

字体大小可用<big><small>，一般用css控制

删除线 <s>商场打折的那种价格删除线

下划线<u>

水平线

<hr/>

块标签

<div> division分区标签

特殊符号

空格 &nbsp

"	双引号（英文）	"
‘	左单引号	‘
’	右单引号	’
×	乘号	×
÷	除号	÷
<	小于号	<
>	大于号	>
&	与符号	&
—	长破折号	—
\|	竖线	\|

§	分节符	§
©	版权符	©
®	注册商标	®
™	商标	™
€	欧元	€
£	英镑	£
¥	日元	¥
°	度	°

块级元素和行内元素

有些元素单独占一行，其他元素不能与其同行，这种为块级元素，像<div><p><h1>等，有些可以和其他元素同行显示，则为行内元素，如<em><strong><span>等。块元素可以容纳其他块元素或行元素，而行元素只能容纳行元素。

列表

有序列表<ol><li>列表子项</li><li>列表子项</li></ol>

无序列表<ul><li></li></ul>

定义列表<dl>

</dl>

表格

<table summary="摘要"> 如果加<tbody>这个表格要等内容全部加载完才会显示，否则是下载一点显示一点

<tr>

<th></th> 表头，加粗居中

<td rowspan="2"></td> rowspan合并行 colspan合并列

</tr>

</table>

摘要的内容不会显示出来，用来增加可读性

链接 <a href="" title="" target="_blank">链接文字</a> href为链接的地址，设置title可以使鼠标滑过链接时显示的文本提示

target为_blank为点击链接后在新窗口打开_self默认方式，在当前窗口打开链接_top在顶层框架中打开,_parent在当前框架的上一层打开

网页链接Email(网站默认邮箱有人用？)

注意?和&的使用，参数分隔

mailto 邮箱地址，多个收件人可用分号分开

cc 抄送地址

bcc 密件抄送地址

subject 邮件主题

body 邮件内容

图片

图片地址可以是绝对路径C:/aaa/abc.jpg，也可以是相对路径../abc.jpg

表单

<form name="名字" action="处理表单地址" method="post/get"></form> enctype设置表单信息提交的编码方式

文本框

value 文本框默认值

size 文本框长度

maxlength 文本框最多可输入字符数

type 输入格式text 正常文本 password 密码 radio单选框

 
 < 
 input  
  type 
 = 
 "radio" 
  name 
 = 
 "Question1" 
  value 
 = 
 "boy" 
 />男 

 
          
 < 
 input  
  type 
 = 
 "radio" 
  name 
 = 
 "Question1" 
  value 
 = 
 "girl" 
 />女 

checkbox复选框

 
 < 
 input 
  id 
 = 
 "checkbox1" 
  type 
 = 
 "checkbox" 
  checked 
 = 
 "checked" 
 />< 
 label 
  for 
 = 
 "checkbox1" 
 >苹果</ 
 label 
 >< 
 br 
  /> 

 
          
 < 
 input 
  id 
 = 
 "checkbox2" 
  type 
 = 
 "checkbox" 
  />< 
 label 
  for 
 = 
 "checkbox2" 
 >香蕉</ 
 label 
 >< 
 br 
  /> 

button按钮

<input type="submit" value="提交按钮的取值"/>提交按钮

<input type="reset" value="重置按钮的取值"/>重置按钮

image图片域，可点击的图片按钮

<input type="image" src="images/登陆按钮.jpg"/>

hidden隐藏域<input type="hidden" value="10"/>

文件域 <input type="file"/>

多行文本

textarea

<textarea rows="行数" cols="列数">多行文本框内容</textarea>

下拉列表

<select>

 
      
 < 
 option 
 >选项显示的内容</ 
 option 
 > 

 
      
 …… 

 
      
 < 
 option 
 >选项显示的内容</ 
 option 
 > 

 
 </ 
 select 
 > 

select 属性 multiple 默认情况下拉只能选择一项，当设置multiple="multiple"时下拉可选择多项

size 下拉列表展开之后可见列表项的数目

option 属性 value 选项值 selected 是否选中

按钮

<button>文本或图像</button> 可以插入其他标签或文本，因此功能比表单的按钮更大

html标签简单总结