学习目标：
掌握html基础知识学习内容：
提示：这里可以添加要学的内容
例如：
1、 HTML概述
2、 HTML基础语法
3、 常用标签
4、 超链接
5、 表格
6、 表单
7、 内联窗口
学习时间：
2021年7月9日学习产出：
1、 技术笔记 1 遍 2、CSDN 技术博客 1 篇HTML概述
HTML：超文本标记语言
超文本：是指页面内科包含图片、链接、声音、视频等内容
标记：标签（通过标记符号来告诉浏览器网页内容该如何显示）
Web浏览器根据不同的HTML标签，解析成我们看到的网页
HTML基本语法
<!--
<!DOCTYPE html> 声明使用html语言版本 html5 告诉浏览器以html5的版本进行解析
-->
<!DOCTYPE html>
html 根标签 所有内容都必须写在根标签中,方便解析查询
head头标签 写一些对网页的设置
<head>
<meta charset="utf-8" />
<title>百度一下,你就知道</title>
<!-- 供搜索引擎 关键字 网站描述,作者-->
<meta name="keywords" content="手机,家电">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content="jim">
<!-- 标题处图标 -->
<link href="img/baidu.ico" rel="icon"/>
<!-- css javaScript -->
</head>
body 网页体, 网页内容写在body
标签可以有属性 通过属性可以对标签的显示进行修饰,设置
属性写在开始标签中
属性名=“属性值”
可以写多组
<body text="red" bgcolor="aqua">
标签-描述网页
结构分为:
闭合标签 <开始标签> 标签体 内容 </结束标签> 双标签
自闭合 完成某个特定功能,没有标签体 br link hr…
常用标签
<body>
<!-- 标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!-- p段落标签 段落与段落有间距-->
<p>
标签:HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
标签:HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
标签:HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
</p>
<p>
标签:HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
标签:HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
标签:HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
</p>
<!-- 有序列表 -->
<ol type="A">
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
</ol>
<ul type="square">
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
</ul>
<!--
href="资源位置"
target="打开文件的位置" _blank在新窗口打开 _self 在当前窗口打开
-->
<a href="http://www.baidu.com" target="_self">百度</a>
<!--
在网页上插入图片, 只是引用了图片的地址
-->
<img src="img/hao12.png" width="200" height="100" border="1" alt="hao123,上网从这里开始"/>
</body>
超链接
a标签:HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是通过连接来访问其他网页资源。
<a href="http://www.baidu.com" target="_top" >百度</a>
href (Hypertext Reference超文本引用) 规定链接指向的页面的URL(页面
地址)
URL(Uniform Resource Locator)统一资源定位符
锚点
两个超链接，一个跳转到另一个的name上
<a name="top"></a>
<a href="#top" style="position: fixed; right: 20px; bottom: 20px;">返回顶部</a>
特殊符号转义符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TWRgbiT2-1627105192701)(E:\Users\asus\AppData\Roaming\Typora\typora-user-images\1627104532857.png)]
表格
table标签：表格标签
tr标签：表格中的行
th标签:表格的表头
td标签：表格单元格
<body>
<!--
table 表格
border="1" 表格边框 width="宽" height="高"
bgcolor="aqua" background="img/1.png"
cellpadding="2" 设置表格内容距离边框的距离
cellspacing="10" 设置单元格与单元格之间的距离
tr 行
height
align 内容水平对齐
valign 垂直对齐
th 表头(单元格) 居中加粗
width
td 单元格 内容都写在th/td中
align valign
-->
<table border="1" width="400" height="400">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr align="center" valign="top">
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td align="right">1</td>
<td align="center" valign="bottom">张三</td>
<td>18</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
</table>
</body>
表格的跨行跨列合并
<body>
<!--
colspan="4" 跨多列合并 从哪个单元格开始 ,添加colspan="合并的列数"
rowspan="4" 跨多行合并 从哪个单元格开始 , 添加rowspan="合并的行数"
合并后删除多余的单元
-->
<table border="1" width="200" height="200">
<tr>
<td colspan="4">
asdsadasdsadsadsads
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
表单
<!--
表单中提供了许多可以输入,选择的组件,用户可以在表单中输入信息,
最终将信息提交至服务器端.
<form action="提交至服务器的地址" method="post/get">
input 输入框
type="text" 文本框
id="值唯一, 值自定义值"
name="值自定义,可以重复 向服务器端提交数据的键"
value="" 输入的内容 最终向服务器端提交
placeholder="请输入用户名" 提示信息,不属于值
readonly="readonly" 只读不能输入 值还可以向服务端发送
disabled="disabled" 禁用, 不能向服务器发送
type="password" 密码框
type="radio" 单选框 name相同为一组 会互斥只能选中一个, 选择性组件必须给定value
checked="checked" 默认选中
</form>
-->
<form action="" method="get">
<label for="userid">用户名:</label>
<input type="text" id="userid" name="userName" value="123" placeholder="请输入用户名"/><br/>
密码:<input type="password" name="password" placeholder="请输入密码"/><br/>
性别:<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" checked="checked"/>女 <br/>
课程:<input type="checkbox" name="course" value="java"/> java
<input type="checkbox" name="course" value="html"/> html
<input type="checkbox" name="course" value="c" checked="checked" /> c
<input type="checkbox" name="course" value="sql"/> sql <br/>
籍贯:<select name="jg">
<option value="北京1">北京1</option>
<option value="北京2">北京2</option>
<option value="北京3" selected="selected">北京3</option>
<option value="北京4">北京4</option>
</select>
<br/>
附件:<input type="file" name="userImg" accept=".jpg,.gif"/> <br/>
备注
<!-- 标签体中的内容就是value-->
<textarea cols="30" rows="5" name="mark" >123456</textarea>
<!-- 按钮
type="submit" 提交按钮 可以提交表单内容到服务器
type="reset" 重置表单为初始状态
type="button" 触发事件
-->
<input type="submit" value="保存" />
<input type="reset" />
<input type="button" value="普通按钮" onclick="alert()"/>
</form>
内联窗口
在当前窗口内出现的新窗口，可以打开网页等操作
<body>
<!--
target="_blank" 在心新窗口打开
target="_self" 在当前窗口打开 默认的
target="rightWindow" 在指定的内联窗口中打开一个页面
target="_top" 无论嵌套多少层窗口 ,都是在最顶级窗口打开
target="_parent" 只能在本窗口的上一级打开
-->
<a href="http://www.baidu.com" target="rightWindow">百度</a>
<a href="http://www.sina.com.cn" target="rightWindow">新浪</a>
<a href="demo.html" target="rightWindow">demo</a>
<iframe name="rightWindow" src="http://www.qq.com" width="500" height="400" frameborder="0"></iframe>
<iframe src="http://www.qq.com" width="500" height="400" frameborder="0"></iframe>
</body>
扫一扫
4150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
