HTML基本语法
<!-- <!DOCTYPE html> 声明告诉浏览器我们使用的是HTML5 --><!DOCTYPE html><!-- <html> 在标记语言中称为根标签，所有内容都在根标签中 --><html><!--<head> 头部标签 --><head><!-- <meta charset="utf-8">设置网页解析时使用的编码格式--><meta charset="utf-8"><!-- <title>设置网页的标题如<title>百度一下你就知道了</title>--><title></title><!-- 为标题处引入图标文件 --><link href="img/baidu.ico" rel="icon" /><!-- 抓关键字搜索 --><meta name="keywords" content="手机，家电" /></head><!--<body> 所有的内容都写在其中</body> --><body><h1>HTML的复习之旅</h1><!-- HTML基本语法标记==标签==记号 用标签来修饰网页中的内容(文字,图片,表格...)标签的分类<开始> 标签体(修饰的内容)<结束/> 称为不和标签,有称为双标签<标签名/> 自闭和标签,在标签内直接结束,完成某种功能 比如<br/>标签属性:通过属性可以进一步对标签内容进行修饰语法:属性必须写在开始标签中属性名 = "属性值"一个标签可以拥有多组标签-->你好<br />世界</body></html>
基本常用标签
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><!-- 基本常用标签 --><!-- 标题标签<h1></h1>...<h6></h6>align="center" left,center,right 设置内容在水平位置的对齐方式--><h1>一级标题</h1><h2 align="center"> 二级标题居中对齐</h1><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><!-- 段落标签 <p> </p> --><p>盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，像眼睛，像星星，还眨呀眨的。</p><p align="right">“吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响。雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。乡下去，小路上，石桥边，有撑起伞慢慢走着的人；还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的，在雨里静默着。</p><!-- 换行标签</br> -->你好<br />世界<hr /><!-- 特殊符号的转义符 -->空三格 后的效果大于号 >小于号 &li;<a >® 商标注册© 版权<!-- 列表无序列表<ul> <li> </li> </ul>type属性： circle,disc,square 改变默认图标,还可以通过css进行设置有序列表<ol> <li> </li> </ol>type属性：1,A,a,i,I--><ul type="square"><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li></ul><ol type="1"><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li></ol></body></html>
超链接_图像
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><!-- <a href="链接地址"(必须的) target="打开链接文档的位置"> 名称 </a>target="_self" 在当前窗口中打开文件target="_blank"在新窗口中打开该文件--><a href="" target="_blank">腾讯</a><a href="" target="_self">百度</a><!-- 在网页中插入图片<img src="图片地址"border = "1" 对图片设置表框alt="对图片进行描述,当图片不能正常显示时提示"title="鼠标悬浮到标签上时的提示信息" />--><img src="img/baidu.ico" width="300" height="300" border="1" alt="这是百度logo" title="点击进入" /></body></html>
超链接定义锚点
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><!-- 1.定义锚点<a name = "top"> 锚点位置</a>2.超链接找锚点<a href = "#top"返回顶部<a/>--><a name="top"></a><h1><a href="#p1">商品1</a><a href="#p2">商品2</a><a href="#p3">商品3</a><a href="#p4">商品4</a> <a href="#p5">商品5</a> </h1><hr /><h2>商品1<a name="p1"></a></h2><img src="img/nike/1.png" /><h2>商品2<a name="p2"></a></h2><img src="img/nike/2.png" /><h2>商品3<a name="p3"></a></h2><img src="img/nike/3.png" /><h2>商品4<a name="p4"></a></h2><img src="img/nike/4.png" /><h2>商品5<a name="p5"></a></h2><img src="img/nike/5.png" /><h2 align="right"><a href="#top">返回顶部</a></h2></body></html>
表格
个人简历
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body ><!-- 表格table>tr*行数>td*列数 Tab键 自动生成表格cellPadding 内边距cellspacing 外边距colspan 列合并,同行进行rowspan 行合并,删除对应行的对应单元格行高列宽bgcolor 背景颜色backgroungcolor背景图片--><h1 align="center">个人简历</h1><table border="1" cellpadding="5" cellspacing="5" align="center"><tr><td bgcolor="#CCEDFF">姓名</td><td width="100"></td><td bgcolor="#CCEDFF">性别</td><td></td><td rowspan="5" width="120">照片</td></tr><tr><td bgcolor="#CCEDFF">出生年月</td><td></td><td bgcolor="#CCEDFF">籍贯</td><td></td></tr><tr><td bgcolor="#CCEDFF">政治面貌</td><td></td><td bgcolor="#CCEDFF">名族</td><td></td></tr><tr><td bgcolor="#CCEDFF">健康状况</td><td></td><td bgcolor="#CCEDFF">婚姻状况</td><td></td></tr><tr><td bgcolor="#CCEDFF">联系电话</td><td></td><td bgcolor="#CCEDFF">电子邮箱</td><td>crraxx@</td></tr><tr><td bgcolor="#CCEDFF">求职意向</td><td colspan="4" height="40"></td></tr><tr><td bgcolor="#CCEDFF">工作经历</td><td colspan="4" height="350"></td></tr><tr><td bgcolor="#CCEDFF">计算机水平</td><td rowspan="1" colspan="4" height="40" ></td></tr><tr><td bgcolor="#CCEDFF">自我评价</td><td rowspan="1" colspan="4" height="40"></td></tr></table></body></html>
表单
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><!-- 表单中提供了许多可以输入和选择的组件,用户可以输入信息或者选择信息,最终通过表单将数据提交至服务器端程序表单在网页上是一块区域text 单行文本框 textarea多行文本框 passward密码输入框 radio单选框 checkbox多选框 file 文件选择框<select> <option> </option></select>下拉框reset 重置 submit提交 button普通按钮,后面用来触发js函数name 设置表单名字，值自定义，可重复，向服务器端提交数据的键，不可为数字id 设置表单编号，值自定义，不可重复size 设置表单的列宽readonly 只读性，只可查看不能修改disabled 禁用组件，不能向服务器提交placeholder ，输入前的提示信息，当输入信息后会被覆盖value 表单中的值单选框与多选框中默认类型的设置checked="checked"--><form action="" method=""><!-- 单行文本框 --><label for="userid"> 用户名:</label><input type="text" id="userid" name="username" value="" placeholder="请输入用户名"/><br /><!-- 密码输入框 -->密码:<input type="password" name="pwd" value="" placeholder="请输入密码"/><br /><!-- 单选框 -->性别:<input type="radio" name="sex" value="男" id="men" />男<input type="radio" name="sex" value="女" id="women" />女<br /><!-- 多行文本框 -->地址:<textarea name="address" cols=20 rows="5">a</textarea><br /><!-- 多选框 -->课程:<input type="checkbox" name="course" value="html" />html<input type="checkbox" name="course" value="java" />java<input type="checkbox" name="course" value="c++" />c++<input type="checkbox" name="course" value="c" />c<br /><!-- 下拉框 -->省份:<select name="private"><option value="陕西">陕西</option><option value="山西">山西</option><option value="四川" selected="selected">四川</option><option value="湖北">湖北</option></select><br /><!-- 文件选择框 -->文件:<input type="file" /><br /><!-- 按钮 --><input type="button" value="普通按钮" onclick="alert()" /><input type="submit" value="提交"/><input type="button" value="重置" /></form></body></html>
内联框架
eg1:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>iframe 内联框架</title></head><body><!--内联框架(窗口):在一个大的浏览器窗口内,嵌入一个小窗口,在窗口内引入一个页面target="指定的内联窗口名称" 在指定的窗口中打开-->父页面<iframe src=" " height="350" width="700" frameborder="1" name="rightFrame">浏览器不支持iframe</iframe><a href="" target="rightFrame"></a></body></html>
eg2:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body>1<iframe src="l2.html" name="newWindow" width="600" height="500" frameborder="1"></iframe></body></html>
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body>2<a href="" target="_parent">腾讯</a><a href="" target="_top">新浪</a><iframe src="l3.html"></iframe></body></html>
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><a href="" target="_parent">腾讯</a><a href="" target="_top">新浪</a>3</body></html>
如果觉得《HTML-基本语法 常用标签 列表 超链接 超链接定义锚点 表格 表单和内联框架》对你有帮助，请点赞、收藏，并留下你的观点哦！
