|
|
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> </td></tr>
<tr> <td align="left">100</td>
</tr>
</table>
*th:表头；tr：设置行； td：设置列及内容；
captipn标题； 空单元；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、其他定义字符：
< = <
> = >
© = ©
<!DOCTYPE>声明了文档类型
|
|
|
QQ群⑧：
窥视卡
雷达卡
发表于 2019-12-3 10:10:44
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡