HTML基础
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了HTML基础,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含20898字,纯文字阅读大概需要30分钟。
内容图文
![HTML基础](/upload/InfoBanner/zyjiaocheng/1171/e04598144ff84b85b2c829b6068f268f.jpg)
1.h1~h6 p b i br
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>第一个html页面</title> </head> <body> <h1 align="right">这是h1</h1> <h2 align="center">这是h2</h2> <h3>这是h3</h3> <h4>这是h4</h4> <h5>这是h5</h5><h6>这是h6</h6> <p align="center">段落1</p> <p>段落2</p> <p>段落3</p> <!-- 字体加粗 和 斜体 br换行--> <b>abc</b><br><i>abc</i> </body> </html>
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title></head><body><h1 align="center">个人简历</h1><h2>基本信息</h2><p>姓名:苍老师</p><p>性别:男</p><p>爱好:男</p><h2>个人经历</h2><p>2019年最佳男演员<br>2019年男神评比底一名</p></body></html>
2.无须列表 有序列表 定义列表 列表嵌套
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title></head><body><h3>无序列表</h3><ul type="circle"><!-- unordered list --><li>刘备</li><!-- list item列表项 --><li>貂蝉</li><li>程咬金</li><li>孙尚香</li><li>苍老师</li></ul><h3>有序列表</h3><!-- type序号类型 start起始值 reversed降序 --><ol type="1" reversed="reversed" start="10"><!-- ordered list 有序列表 --><li>打开冰箱门</li><li>把大象装进去</li><li>关上冰箱门</li><li>啦啦啦</li></ol><h3>定义列表</h3><!-- 自带层级显示效果 --><dl><!-- 定义列表 --><dt>凉菜</dt><!-- 定义术语 --><dd>拍黄瓜</dd><!-- 定义描述 --><dd>果仁菠菜</dd><dd>芥末鸭掌</dd><dt>炒菜</dt><dd>鱼香肉丝</dd><dd>宫保鸡丁</dd><dd>猪肉炖粉条</dd></dl><h3>列表嵌套</h3><!-- 有序列表和无序列表可以任意无限嵌套 --><ul><li>凉菜 <ol><li>拍黄瓜</li><li>花毛一体</li></ol></li><li>炒菜 <ol><li>宫保鸡丁</li><li>鱼香肉丝</li></ol></li></ul></body></html>
3.图片 img
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title></head><body><!-- src路径 --><img width="50%" title="漂亮不?" src="abc/1.jpg"><!-- alt当图片不能正常显示时显示的文本 --><img alt="这是一张美女图片意淫一下吧" src="http://cdn.tmooc.cn/bsfile//courseImg///B9805366EB6914EC887629E182B3FB37B.png"><img src="../imgs/2.gif"></body></html>
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title></head><body><a href="demo01.html">本地页面链接</a><a href="http://www.tmooc.cn">TMOOC链接</a><a href="../imgs/a.jpg">美女图片</a><!-- 浏览器如果不支持浏览某文件则会触发下载 --><a href="day01.zip">文件</a><!-- 图片超链接 --><a href="../imgs/1.jpg"><img src="../imgs/2.gif"></a></body></html>
4.表格 table
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title></head><body><table border="1"><!-- border 边框粗细 --><!-- 表格标题 --><caption>学生表</caption><tr><!-- table head表头 --><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><!-- table row行 --><!-- table data表格数据 --><td>1-1</td><td>1-2</td><td>1-3</td></tr><tr><!-- table row行 --><!-- table data表格数据 --><td>2-1</td><td>2-2</td><td>2-3</td></tr></table><table border="1"><tr><td colspan="2" align="center">1-1</td><td>1-3</td><td rowspan="3">1-4</td></tr><tr><td>2-1</td><td rowspan="2">2-2</td><td>2-3</td></tr><tr><td>3-1</td><td>3-3</td></tr></table><table border="1"><tr><td colspan="2" align="center">1-1</td><td rowspan="2">1-3</td></tr><tr><td rowspan="2">2-1</td><td>2-2</td></tr><tr><td align="center" colspan="2">3-2</td></tr></table></body></html>
5.表单 form
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title></head><body><!-- action提交地址 --><!-- 表单中的任何控件必须有name属性 --><form action="http://www.tmooc.cn"> 用户名:<input type="text" placeholder="请输入用户名" name="username"><br> 密码:<input type="password" placeholder="请输入密码" name="password"><br> 性别:<input type="radio" value="nan" name="gender">男 <!-- checked默认选中 value提交的值--><input type="radio" value="nv" checked="checked" name="gender">女<br> 兴趣:<input type="checkbox" name="hobby" value="cy">抽烟 <input type="checkbox" checked="checked" name="hobby" value="hj">喝酒 <input type="checkbox" name="hobby" value="tt">烫头<br> 生日:<input type="date" name="birthday"><br> 靓照:<input type="file" name="pic"><br><!-- 下拉选 --> 城市:<select name="city"><option value="bj">北京</option><!-- 选项 --><!-- selected默认选中 --><option value="sh" selected="selected">上海</option><option value="gz">广州</option></select><br><input type="submit" value="注册"></form></body></html>
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title></head><body><form action="http://www.tmooc.cn"><!-- cellspacing单元格间距 --><table border="1" cellspacing="0" align="center"><caption>注册 表单<abc></caption><tr><td>用户名:</td><td><input type="text" name="username"></td></tr><tr><td>密码:</td><td><input type="password" name="pw1"></td></tr><tr><td>确认密码:</td><td><input type="password" name="pw2"></td></tr><tr><td>昵称:</td><td><input type="text" name="nick"></td></tr><tr><td>性别:</td><td><input type="radio" name="gender" value="m">男 <input type="radio" name="gender" checked="checked" value="f">女</td></tr><tr><td>爱好:</td><td><input type="checkbox" name="hobby" value="cy">抽烟 <input type="checkbox" name="hobby" value="hj">喝酒 <input type="checkbox" name="hobby" value="tt">烫头</td></tr><tr><td>生日:</td><td><input type="date" name="birthday"></td></tr><tr><td>靓照:</td><td><input type="file" name="pic"></td></tr><tr><td>城市:</td><td><select name="city"><option value="bj">北京</option><option value="sh">上海</option><option value="gz" selected="selected">广州</option></select></td></tr><tr><td>验证码:</td><td><input type="text" name="yzm"><img width="40" height="20" src="../imgs/2.gif"></td></tr><tr><td colspan="2" align="center"><input type="submit" value="注册"></td></tr></table></form></body></html>
6.div span
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title></head><body><div>div1</div><div>div2</div><div>div3</div><span>span1</span><span>span2</span><span>span3</span></body></html>
7.层叠样式表 CSS
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title><!-- 内部样式 --><style type="text/css">/* 标签名选择器:选择页面中所有同名的标签 */ h3{ background-color: yellow;}/* id选择器 */ #myh4{ color: purple;}/* 类选择器 */ .c1{ color: pink;}/* 分组选择器 将现有多个选择器通过逗号合并成一个选择器 */ .c1,#myh4,h5{/* 1个像素的实线边框 */ border: 1px solid red;}</style><!-- 引入外部css文件 --><link rel="stylesheet" href="first.css"></head><body><h3 style="color: red;">今天是星期一,真困!</h3><h5 style="background-color: green;"> 该吃中午饭了,真饿!</h5><h3 style="color: red;">吃点儿啥?</h3><h4 id="myh4">好好学习</h4><h4>天天向上</h4><div class="c1">div1</div><div>div2</div><div>div3</div><span class="c1">span1</span><span>span2</span><span>span3</span><h1 class="c1">快下课了!</h1></body></html>
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title><style type="text/css">/* 子孙后代选择器 div里面的div里面的所有span *//* div div span{ color: red; } *//* div里面的所有span *//* div span{ color: red; } *//* 子元素选择器 */ body>div>span{ color: red;}</style></head><body><span >span1</span><div><span>span2</span></div><div><div><span>span3</span></div><span>span4</span></div></body></html>
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title><style type="text/css">/* 属性选择器 */ input[type=‘text‘]{ background-color: green;}/* 伪类选择器 */ a:visited {/* 访问过 */ color: red;} a:link {/* 未访问 */ color: yellow;} a:hover {/* 悬停 */ color: purple;} a:active {/* 点击 */ color: green;}/* 任意元素选择器 */ *{ border:1px solid red;}</style></head><body><a href="../imgs/a.jpg">超链接1</a><a href="../imgs/b.jpg">超链接2</a><a href="../imgs/c.jpg">超链接3</a><a href="../imgs/d.jpg">超链接4</a><input type="text"><input type="password"></body></html>
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title><style type="text/css"> h3{ color: rgba(255,0,0,0.5);/* red #ff0000 #f00 rgb(255,0,0) */} #d1{ width: 200px; height: 200px; background-color: purple; background-image: url("../imgs/a.jpg");/* 修改背景图片尺寸 */ background-size: 100px 100px;/* 禁止重复 */ background-repeat: no-repeat;/* 控制位置 横向百分比 和 纵向百分比 */ background-position: 90% 90%;} #d2{ width: 611px; height: 376px; background-color: #e8e8e8; background-image: url("http://doc.tedu.cn/tstore_v1/images/itemCat/study_computer_img1.png"); background-repeat: no-repeat; background-size: 318px 319px; background-position: 93% 50%;} span{ border: 1px solid red; width: 1000px; height: 200px;}</style></head><body><span>span1</span><div id="d1"></div><div id="d2"></div><h3>颜色测试</h3></body></html>
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title><style type="text/css"> div{ border: 1px solid red; width: 100px; height: 100px; display: inline;/* 将块级元素改成行内元素 */} span{ border: 1px solid red; width: 100px; height: 100px;/* display: block */;/* 将行内元素改成块级元素 *//* 行内块:即能修改宽高也能共占一行 */ display: inline-block;}</style></head><body><div>div1</div><div>div2</div><div>div3</div><span>span1</span><span>span2</span><span>span3</span></body></html>
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title><style type="text/css"> #d1,#d2{ width: 100px; height: 100px; border: 1px solid red;} #d1{/* 某个方向添加外边距 *//* margin-left: 50px; margin-bottom: 30px; *//* 上下20px 左右40px *//* margin: 20px 40px; *//* 居中 *//* margin: 0 auto; *//* 上右下左顺时针 */ margin: 10px 20px 30px 40px;} #s1{ margin-left: 50px; margin-right: 30px;/* 行内元素上下外边距无效 */ margin-top: 50px;} #big{ width: 200px; height: 200px; background-color: red; overflow: hidden;/* 解决粘连问题 */} #small{ width: 50px; height: 50px; background-color: yellow; margin-left: 50px; margin-top: 50px;}</style></head><body><div id="big"><div id="small"></div></div><span id="s1">span1</span><span>span2</span><div id="d1"></div><div id="d2"></div></body></html>
外部css文件
@charset "UTF-8";
h5{
color: blue;
}
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title><style type="text/css"> div{ width: 200px; height: 200px; border: 1px solid red;/* 圆角 值越大越圆*/ border-radius: 5px;/* 内边距 */ padding-left: 130px; padding-top: 130px;} #s1{ border-right: 1px solid red;/* 内边距 */ padding-right: 20px;/* 外边距 */ margin-right: 20px;}</style></head><body><div>div1</div><div>div2</div><span id="s1">span1</span><span>span2</span></body></html>
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title><style type="text/css"> body>div{ width: 200px; height: 200px; background-color: red;/* 添加内边距宽度会受影响 */ padding-left: 50px;} div>div{ width: 50px; height: 50px; background-color: yellow;/* 添加外边距宽度不受影响 *//* margin-left: 50px; */} #s1{ border: 1px solid blue; padding-left: 20px; padding-right: 20px;/* 行内元素影响元素所占宽度,但不影响所占高度 */ padding-bottom: 20px;}</style></head><body><div><div></div></div><span id="s1">span1</span><span>span2</span><div></div></body></html>
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title><style type="text/css"> div{/* 文本修饰: overline上划线 underline下划线 line-through 删除线 none去掉文本修饰 */ text-decoration: line-through; width:200px; height:50px; border:1px solid red;/* 水平对齐方式 */ text-align: center;/* 文本颜色 */ color: blue;/* 行高 */ line-height: 50px;/* 字体大小 */ font-size: 20px;/* 字体加粗 */ font-weight: bold;} a{ text-decoration: none; background-color: purple; color: white;/* 修改显示方式 目的:为了修改宽高 */ display:inline-block; width: 100px; height: 30px; text-align: center; line-height: 30px; border-radius: 5px;} h1{/* 去掉加粗 */ font-weight: normal;/* 斜体 *//* font-style: italic; *//* 字体设置 *//* font-family: "黑体"; */ font: 20px "simhei", Arial, Helvetica, sans-serif;}</style></head><body><h1>我是加粗的</h1><a href="">超链接</a><div>今天是第三天</div></body></html>
8.案例 定位
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title><style type="text/css">/* 设置全局的字体样式 body里面所有标签都会继承 */ body{ font: 12px "simhei", Arial, Helvetica, sans-serif;} body>div{ width: 611px; height: 376px; background-color: #e8e8e8; background-image: url("http://xxx/study_computer_img1.png"); background-size: 318px 319px; background-repeat: no-repeat; background-position: 90% 50%; overflow: hidden;/* 解决粘连问题 */} div>div{ width:245px; height:232px; margin: 68px 0 0 36px;} .p1{ font-size: 32px; color: #333;/* 把自带的外边距值改小, 从而达到p1和p2之间的距离变小 */ margin-bottom: 12px;} .p2{ color: #666;/* 字体大小继承自body的12 */ margin-bottom: 24px;} .p3{ color: #0aa1ed; font-size: 24px; font-weight: bold; margin-bottom: 12px;} a{ width: 132px; height: 40px; background-color: #0aa1ed; border-radius: 3px;/* 圆角 */ color: white; text-decoration: none;/* 去掉下划线 */ text-align: center;/* 横向居中 */ line-height: 40px;/* 纵向居中 */ font-size: 20px; display: block;/* 为了能修改宽高 */}</style></head><body><div><div><p class="p1">灵越 燃7000系列 </p><p class="p2">酷睿双核i5处理器|256GB SSD| 8GB内存<br>英特尔HD显卡620含共享显卡内存</p><p class="p3">¥4999.00</p><a href="">查看详情</a></div></div></body></html>
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title><style type="text/css"> body{ font: 12px "simhei", Arial, Helvetica, sans-serif;} body>div{ width: 375px; height: 376px; background-color: #e8e8e8; background-image: url("http://xxx/study_computer_img2.png"); background-size: 292px 232px; background-repeat: no-repeat; background-position: 75% 80%; overflow: hidden;} div>div{ width: 253px; height: 232px; margin: 39px 0 0 25px;} .p1{ font-size: 32px; color: #333; margin-bottom: 12px;} .p2{ color: #666; margin-bottom: 24px;} .p3{ color: #0aa1ed; font-size: 24px; margin-bottom: 12px; font-weight: bold;} a{ display: block;/* 为了能修改宽高 */ width: 132px; height: 40px; text-align: center; line-height: 40px; color: white; font-size: 20px; text-decoration: none; background-color: #0aa1ed; border-radius: 3px;}</style></head><body><div><div><p class="p1">颜值 框不住</p><p class="p2"> 酷睿双核i5处理器|256GB SSD| 8GB内存<br>英特尔HD显卡620含共享显卡内存 </p><p class="p3">¥6888.00</p><a href="">查看详情</a></div></div></body></html>
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title><style type="text/css"> div{ width: 100px; height: 100px; border: 1px solid red;} div:hover { position: relative;/* 相对定位 *//* 从元素初始位置做偏移 */ top: 20px; left: 20px;}</style></head><body><div>div1</div><div>div2</div></body></html>
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title><style type="text/css"> div{ width: 100px; height: 100px; border: 1px solid red;} #d2{/* 绝对定位 */ position: absolute; bottom: 50px; right: 50px;}</style></head><body><div>div1</div><div id="d2">div2</div><div>div3</div></body></html>
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title><style type="text/css"> #big{ width: 200px; height: 200px; background-color: red; margin: 100px 0 0 100px; overflow: hidden;} #middle{ width: 100px; height: 100px; background-color: yellow; margin: 50px 0 0 50px; position: relative;/* 做位置参考 */} #small{ width: 50px; height: 50px; background-color: blue; position: absolute; top: 0; left: 0;}</style></head><body><div id="big"><div id="middle"><div id="small"></div></div></div></body></html>
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title><style type="text/css"> #d1{ width: 50px; height: 200px; background-color: red;/* 固定定位 */ position: fixed; right: 50px; bottom: 100px;}</style></head><body><div id="d1"></div><img src="../imgs/a.jpg"><img src="../imgs/a.jpg"><img src="../imgs/a.jpg"><img src="../imgs/a.jpg"><img src="../imgs/a.jpg"></body></html>
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title><style type="text/css"> body>div{ width: 200px; border: 1px solid red;/* 解决自动识别高度为0的问题 */ overflow: hidden;} #d1{ width: 50px; height: 50px; background-color: red; float: left;} #d2{ width: 50px; height: 50px; background-color: green;/* 禁止元素左右两侧出现浮动元素 (不顶上去) *//* clear: both; */ float: left;} #d3{ float: left; width: 50px; height: 50px; background-color: blue;}</style></head><body><div><div id="d1"></div><div id="d2"></div><div id="d3"></div></div></body></html>
<! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title >Insert title here</title><style type="text/css"> div{ width: 300px; height: 300px; border: 1px solid red;/* visible超出显示 hidden超出隐藏 scroll超出滚动显示 */ overflow: scroll;}</style></head><body><div><img src="../imgs/b.jpg"></div></body></html>
原文:https://www.cnblogs.com/hello4world/p/12174198.html
内容总结
以上是互联网集市为您收集整理的HTML基础全部内容,希望文章能够帮你解决HTML基础所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。