B站黑马程序员课程 HTML demo
请各位大佬不要浪费时间看下面的内容啦,这是菜鸡自己复习用的
1.段落/图片标签
1.1 锚点标签
通过目录点击跳到目标位置
1.2内部网页跳转
通过连接,跳到另一个内部网络
<!DOCTYPE html> <!DOCTYPE><!-- 告诉浏览器使用的HTML5版本 -->
<html lang="en"> <!-- lang="当前文档的显示的语言" 中文"zh-CN",英语"en" -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端开发的代码 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>案例1</title>
</head>
<body>
<h1 >圣诞节的那些事</h1>
<a href="#p1">1.圣诞节的由来</a><br><!-- 这里一定要有# -->
<a href="#p2">2.圣诞老人的由来</a><br>
<a href="#p3">3.圣诞树的由来</a><br>
<h3 id="p1">圣诞的由来</h3>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<img src="E:/images/answer/1.jpg">
<h3 id="p2">圣诞树的由来</h3>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<img src="E:/images/answer/2.jpg">
<h3 id="p3">圣诞老人的由来</h3>
<p>啊啊啊啊啊<a href="oldman.html">圣诞老人</a>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p><!-- oldman.html就是文件名 -->
<img src="E:/images/answer/3.jpg">
<p>更多内容可以<a href="http://www.baidu.com">百度</a>一下</p>
</body>
</html>
内连接的网页源码:
<!DOCTYPE html> <!DOCTYPE><!-- 告诉浏览器使用的HTML5版本 -->
<html lang="en"> <!-- lang="当前文档的显示的语言" 中文"zh-CN",英语"en" -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端开发的代码 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>案例1</title>
</head>
<body>
<h1>圣诞老人(西方文化的传说人)</h1>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<img src="E:/images/answer/4.jpg">
</body>
</html>
2.table标签
demo1
align/border/weight/height
cellpadding:框里文字的内容与框的距离;
cellspacing:单元格间的距离
以上一定要放在table里面
<body>
<!-- cellpadding:框里文字的内容与框的距离;cellspacing:单元格间的距离 -->
<table align="center" border="solid" cellpadding="10px" cellspacing="0" weight="" height = "">
<tr><th>排名</th> <th>关键词</th> <th>趋势</th> <th>今日搜索</th> <th>最近七日</th> <th>相关链接</th></tr>
<tr><td>1</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td><td><a href="http://www.baidu.com">百度</a> <a href="http://www.baidu.com">百度</a> </td></tr>
<tr><td>2</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td><td>123</td></tr>
<tr><td>3</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td> <td>123</td></tr>
<tr><td>4</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td> <td>123</td></tr>
<tr><td>5</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td> <td>123</td></tr>
<tr><td>6</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td> <td>123</td></tr>
<tr><td>7</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td> <td>123</td></tr>
</table>
</body>
合并单元格
- 跨行合并:rowspan=“n”
- 跨列合并:colspan=“n”
2.2 列表标签
列表分为:有序列表、无序列表、自定义列表
< ul >无序列表< /ul >:里面只能包含li,li里面可以包含任何标签
<ul>
<li></li>
<li></li>
</ul>
< ol >有序列表< /ol >:里面只能包含li,li里面可以包含任何标签
列表前面自动加上序号
<ol>
<li></li>
</ol>
< dl >自定义列表< /dl >:里面只能包含dl和dt,dl和dt里面可以包含任何标签
<dl>
<dt></dt>
</dl>
2.3 表单标签
在HTML中,一个完整的表单通常由表单域、表单控件(元素)和提示信息3部分组成
2.3.1 表单域< form >:实现把它范围内的表单元素信息收集和传递(给服务器)
<form action="url" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
2.3.2 表单元素:
1.< input >输入表单元素:用来收集用户信息,包含一个type属性
想要网页一打开表单元素里就显示默认的值:
<form>
<input type="" value="请输入密码">
</form>
如何区别不同的表单元素:通过name属性,后台通过name属性找到这个表单
用户名:<input type="text" value="请输入用户名" name="username">
radio或checkbox是一组的就要给他们相同的名字
页面一打开,单选按钮或复选框是默认选项:
男:<input type="radio" name="sex" value="男" checked="checked"/>
女:<input type="radio" name="sex" value="女" />
2.< select >下拉表单标签
<form>
<select>
<option></option>
<option></option><!-- option的selected="selected"默认为选中 -->
</select>
</form>
3.< textarea >多行文本域
<textarea cols="3" rows="2"> <!-- cols为每行中显示的字符数,rows列数 -->
文本内容
</textarea>
demo2
<!DOCTYPE html> <!DOCTYPE><!-- 告诉浏览器使用的HTML5版本 -->
<html lang="en"> <!-- lang="当前文档的显示的语言" 中文"zh-CN",英语"en" -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端开发的代码 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>案例1</title>
</head>
<body>
<h4>青春不常在,抓紧谈恋爱</h4>
<table>
<!-- 第一行 -->
<tr>
<td>性别</td>
<td>
<label for="sex">男</label><input type="radio" name="sex" id="sex">
<label for="sex">女</label><input type="radio" name="sex" id="sex">
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日</td>
<td>
<select name="年" id="年"><option >---请选择年份---</option><option >2021</option></select>
<select name="月" id="月"><option >---请选择月份---</option><option >1</option></select>
<select name="日" id="日"><option >---请选择日---</option><option >1</option></select>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>所在地区</td><td><input type="text"></td>
</tr>
<!-- 第四行 -->
<tr>
<td>婚姻状况</td>
<td>
<!-- selected=""是复选框 -->
<input type="radio" checked="checked">未婚
<input type="radio" >已婚
<input type="radio" >离婚
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>学历</td>
<td><input type="text"></td>
</tr>
<!-- 第六行 -->
<tr>
<td>喜欢的类型</td>
<td><input type="checkbox">妩媚的
<input type="checkbox">可爱的
<input type="checkbox">小鲜肉
<input type="checkbox">老腊肉
<input type="checkbox">都喜欢
</td>
</tr>
<!-- 第七行 -->
<tr>
<td>自我介绍</td>
<td><textarea></textarea></td>
</tr>
<tr>
<td></td><td><input type="submit" value="免费注册"></td><br>
</tr>
<tr><td></td><td><input type="checkbox" checked="checked">我同意注册条款和会员加入标准</td></tr>
<tr>
<td></td><td><a href="">我是会员,立即登录</a></td>
</tr>
<tr>
<td></td>
<td>
<h5>我承诺</h5>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
>
</tr>
</table>
</body>
</html>