liubulong 发表于 2019-12-3 10:10:44

HTML格式与语法

HTML格式与语法
1、html的标签
<html>定义整个文档
<h1-6>定义标题
<body>定义主体
<a href=" " target="_blank">link   
</a>定义链接,target定义在新窗口打开
<p>定义段落
<img>图像
<hr>创建水平线
<br />换行
<!--this-->创建注释
<big>大字体
<i>斜体
<sub> or <sup> 下标或上标
<q>引号
<blockquote>缩进
<abbr title="World
Health Organization"> 定义缩写
<dfn>定义斜体标题缩写
<address>地址
<cite>斜体显示标题
<bdo dir="rtl">反向输出字符
<var>定义数学变量
<code>定义计算机代码文本

2、html格式:
Style="backgroud-color:yellow margin-left: 20px"(背景色,外左边距)
Style="font-family:arial;color:red;font-size:20px;text-decoration:none"(字体,颜色,字体大小,下划线)
Style="text-align:center"

3、html属性:


4、html<input>标签的type属性
<form action="http://www.example.com/test.asp"
method="post/get"> #规定跳转的网页
<select> <option>Apples <option selected>Bananas</select>#定义下拉选择框
<textarea name="Comment" rows="6" cols="2"></textarea>#定义文本框大小

#文本行:<input
   type="text" name="lastname" value="Nixon"
   size="30" maxlength="50">

#密码:<input
   type="password">

#复选框:<input
   type="checkbox"
   checked="checked">是否注册   

#单选按钮(多选一):
<input
type="radio" name="sex" value="male" /> Male
<input
type="radio" name="sex" value="female" />
Female

#提交:<input
   type="submit" value="提交">

#重置:<input
   type="reset" value="重置">

#文件上传:<input
   type="file">

#图片按钮<input
   type="image" src="" alt="">

#按钮:<input
   type="button" value="按钮">

#隐藏字段:<input
   type="hidden" />

5、html链接:
创建链接:<a href="
   " target="_blank">
   link    </a> # 其中target定义在新窗口打开

创建书签(关键字跳转):
<a name="tips">提示</a>#定义书签
接下来两种方式使用书签:
<a href="#tips">提示</a> #本文档书签跳转链接
<a href="http:xxx#tips">提示</a>#其他网页书签跳转链接

6、html图片
基础属性
<img
src="url" alt="xxx" align="" width=" " height="
">
Src:url         alt:替代文本    align:位置
bottom/middle/top/left/right

使图像可点击:map和area属性
<img
src="planets.jpg" border="0" usemap="#planetmap"
alt="Planets" />
<map
name="planetmap" id="planetmap">
<area
shape="circle" coords="180,139,14" href
="venus.html" alt="Venus" />
<area
shape="circle" coords="129,161,10" href
="mercur.html" alt="Mercury" />
<area
shape="rect" coords="0,0,110,260" href
="sun.html" alt="Sun" />
</map>

背景图片属性
与css结合使用:
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
    <style
type="text/css">
      body{      
background-image:url('./xiaowangzi.jpg');
background-repeat:no-repeat;
background-position:50% 50%;
background-size:90% 90%;
background-color:pink;
   }
</style>
</head>

7、html表格
<caption>我的标题</caption>
<table
border="1" cellspacing="10" cellpadding="10">
<tr><th>heading</th></tr>
<tr><td>&nbsp;</td></tr>
<tr><td align="left">100</td>
</tr>
</table>
*th:表头;tr:设置行; td:设置列及内容;
captipn标题;&nbsp空单元;align设置对齐方式
border设置边框粗细;cellspacing设置单元格间距;cellpadding单元格边距

8、html列表
无序列表:
<ul>
<li>Coffee</li>
</ul>

有序列表
<ol>
<li>Coffee</li>
</ol>
定义列表:自定义列表以
   <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>Black
hot drink</dd>
</dl>

9、html框架frame
<frameset
cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

内联框架:
<iframe
src="" width="40%"
height="80%"></iframe>
<iframe
src="" width="50%" height="50%"
frameborder="0"></iframe>

10、html头部
<head>
<title></title>#定义标题
<base
href="" target=""/>#定义页面上链接默认的地址
    target有几个选项:_blank(新窗口)/_self(本身)/_parent(父框架)/_top(整个窗口)/framename(自定义)
<style
type="text/css"></style> #定义样式
<meta
name="" content=""/>
#定义meta元素的与http-eqiuv或name相关的content属性,http-eiuv或name与content成键值对
<script
type="text/javascript"></script>#定义脚本
</head>

11、其他定义字符:
&lt = <
&gt = >
&#169 = ©

<!DOCTYPE>声明了文档类型

页: [1]
查看完整版本: HTML格式与语法