html学习2

最新推荐文章于 2024-07-12 20:49:16 发布

winkyGe

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量237

点赞数 1

分类专栏： web学习文章标签： html

本文链接：https://blog.csdn.net/weixin_43174700/article/details/105981259

版权

web学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Web 标准

结构标准 : .html
样式标准 : .css
行为标准 : .js

: 是所有html标签中的根节点 : 头标签, 用于存放 `title`, meta, base, style, script, link 注: head 标签中必须包括 `title` 标签 : 让网页有标签 : 主体标签

标签分类

/ 称为关闭符号

双标签

<> something </>

单标签

</> something

标签关系

嵌套关系

如 :

<head>
  <title></title>
</head>

并列关系

如 :

<head></head>
<body></body>

文档类型

<!DOCTYPE html>
指明HTML版本 5

字符集

<meta charset="UTF-8">
GBK 包含全部中文字符
UTF-8 几乎包含全球所有语言

标签	效果
`<b></b>` `<strong></strong>`	加粗
`<i></i>` `<em></em>`	斜体
`<s></s>` `<del></del>`	加删除线
`<u></u>` `<ins></ins>`	加下划线

标签属性

$\color{green}{<标签名 }$ $\color{blue}{属性1 = }$ $\color{red}{"属性值1" }$ $\color{blue}{属性2 = }$ $\color{red}{"属性值2" }$ $\color{green}{> }$ something $\color{green}{</标签名> }$

<hr width= "500" color="red" />

以空格分开
不分先后

图片标签

属性	属性值	描述
src	URL	图片路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素	图宽
height	像素	图高
border	数字	设置图片边框宽度

width 和 height 一般只需改变一个,另一个会等比缩放

链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

外部链接地址必须以http://开头
内部链接 href = “文件名”

空链接

<a href = "#">空页面 </a>

图片链接

<a href = "http://baidu.com"> <img src= ".."/></a>

target 打开网页方式

self 默认
_blank 在新建窗口中打开

锚点定位

适用于较长的页面, 可以通过某个关键词, 从而迅速达到页面中的这个位置

< a href = “#id名” > 链接文本创建链接文本
使用相应的 id 名标注跳转目标的位置
例

<h2>目录</h2>
<hr/>
1 目录一 <br/>
< a href = "#M2" >2 目录二 </a> <br/>
3 目录三 <br/>
<h3> 目录一 </h3>
<p>...</p>
<h3 id="M2"> 目录二 </h3>
<p>...</p>
<h3> 目录三 </h3>
<p>...</p>

注释

$\color{blue}{< !-- 这是注释-->}$
在sublime中 Ctrl + ? 可以直接将该行注释

网页文件路径规划

相对路径

路径分类

同一级
下一级 /
上一级 ../ (上2级 ../ ../)

base标签

设置整体链接的打开状态
base写在中间
eg

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>整体连接跳转方式选择</title>
	<base target="_blank">
</head>
<body>
	<a href="http://baidu.com">百度</a>
	<a href="https://www.jianshu.com/u/1e48811cbaed">我的主页</a>
</body>  
</html>

预格式化文本pre标签

保留空格和换行符
文本也会成等宽字体

<body>
  归来应有故人候
  故人弯眸
  盈盈笑意恰如幼

  归来应有故人守
  故人邂逅
  悠悠岁月不曾偷

  归来应有故人叩
  故人抬首
  冽冽清酒醇满喉
</body>

<body>
	<pre>
	归来应有故人候
	故人弯眸
	盈盈笑意恰如幼

	归来应有故人守
	故人邂逅
	悠悠岁月不曾偷

	归来应有故人叩
	故人抬首
	冽冽清酒醇满喉
	</pre>
</body>

特殊字符

用转义字符表示

表

表格

<table></table> 定义表格标签
<tr></tr>定义表格中的行,嵌套于table中
<td></td> 表示单元格, 嵌套于中

表格属性

属性名	含义	常用属性值
border	边框	像素(默认0)
cellspacing	单元格边框之间的空白距离	像素(默认2)
cellpsdding	单元格内容与单元格边框之间的空白间距	像素(默认1)
width	表格宽度	像素
height	表格高度	像素
align	表格在网页中的水平对齐方式	left. center. right

表头单元格

通常位于表格的第一行或第一列, 使文本加粗居中

代替

表格标题标签 caption

用于定义表格标题, 通常居中显示于表格之上
必须紧随table之后
该标签只在table中才有意义

	<table border="1" cellspacing="0" >
		<caption>小说排行榜</caption>
		<tr>
			<th>排名</th>
			<th>关键词</th>
			<th>趋势</th>
			<th>今日搜索</th>
			<th>最近7日</th>
			<th>相关链接</th>
		</tr>
		<tr>
			<td>1</td>
			<td>鬼吹灯</td>
			<td><img src="up.jpg"></td>
			<td>345</td>
			<td>123</td>
			<td><a href="http://baidu.com">百度</a></td>
		</tr>
	</table>

合并单元格

跨行合并: rowspan = “合并单元格数”
跨列合并 : colspan = “合并单元格数”

按照先上后下, 先左后有的顺序, 找到需要写标签的单元格
删去对应被合并的单元格

表格结构划分

题头 thead, 正文tbody, 脚注tfoot
按F12 可查看对应结构
<thead></thead>定义表格头部, 放标题之类内容, thead 内部必须包含
<tbody></tbody> 表格主体
<tfoot></tfoot> 表格柱脚等

	<table border="1" cellspacing="0" >
		<caption>小说排行榜</caption>
		<thead>
			<tr>
				<th>排名</th>
				<th>关键词</th>
				<th>趋势</th>
				<th>今日搜索</th>
				<th>最近7日</th>
				<th>相关链接</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>鬼吹灯</td>
				<td><img src="up.jpg"></td>
				<td>345</td>
				<td>123</td>
				<td><a href="http://baidu.com">百度</a></td>
		</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>注脚</td>
				<td colspan="5">这是注脚</td>
			</tr>
		</tfoot>
	</table>

列表标签

无序列表`<ul>`

各列表之间没有顺序级别之分,是并列的

<ul>
  <li>列表一</li>
  <li>列表二</li>
  <li>列表三</li>
</ul>

<ul>中只能使用<li>标签
<li></li> 中能存放各种标签

有序列表`<ol>`

有排列顺序的列表

<ol>
  <li>列表一</li>
  <li>列表二</li>
  <li>列表三</li>
</ol>

自定义列表 `<dl>`

	<dl>
		<dt>名词1</dt>
		<dd>解释1</dd>
		<dd>解释2</dd>
		<dd>解释3</dd>
		<dt>名词2</dt>
		<dd>解释1</dd>
		<dd>解释2</dd>
	</dl>

表单

最常用的注册类菜单
收集用户信息,与用户进行交互
一个完整的表单通常由 表单控件 , 提示信息, 和 表单域 构成

input控件

语法：
```
<input type="属性值" value="你好">
```
- <input />标签为单标签
- type指定不同的控件类型
- 除了type属性还有别的属性

1. type 属性

决定input表单属性
比如 type = ‘text’ 就表示文本框可以做用户名，昵称等
比如 type = ‘password’ 就是表示密码框用户输入的内容不可见

用户名: <input type="text" /> 
密  码：<input type="password" />

2. value属性值

用户名:<input type="text"  name="username" value="请输入用户名">

value 默认的文本值。有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。

3. name属性

用户名:<input type="text"  name=“username” />

name表单的名字
后台可通过name属性找到这个表单。
name主要作用 : 区别不同的表单。

name 属性后面的值，自己定义的。
radio 如果是一组，给他们命相同的名字, 这样就可多个选其中的一个

<input type="radio" name="sex"  />男
<input type="radio" name="sex" />女

4. checked属性

表示默认选中状态
较常见于单选按钮和复选按钮。

性    别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

上面这个，表示就默认选中了男这个单选按钮

5. input 属性小结

属性	说明	作用
type	表单类型	用来指定不同的控件类型
value	表单值	表单里面默认显示的文本
name	表单名字	页面中的表单很多，name主要作用就是用于区别不同的表单。
checked	默认选中	表示那个单选或者复选按钮一开始就被选中了

2.2 label标签(理解)

label标签为了提高用户体验
label 标签为 input 元素定义标注（标签）。
作用：
绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
绑定元素

用label直接包括input表单。

<label> 用户名： <input type="radio" name="usename" value="请输入用户名">   </label>

适合单个表单选择

for 属性规定 label 与哪个表单元素绑定。

<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">

当我们鼠标点击 label标签里面的文字时，光标会定位到指定的表单里面

2.3 textarea控件(文本域)

语法：

<textarea >
  文本内容
</textarea>

作用：
通过textarea控件可以轻松地创建多行文本输入框.
cols=“每行中的字符数” rows=“显示的行数” 我们实际开发不用

文本框和文本域区别

表单	名称	区别	默认值显示	用于场景
input type=“text”	文本框	只能显示一行文本	单标签，通过value显示默认值	用户名、昵称、密码等
textarea	文本域	可以显示多行文本	双标签，默认值写到标签中间	留言板

2.4 select下拉列表

目的：

如果有多个选项让用户选择

语法：

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

注意：

<select> 中至少包含一对 option
在option 中定义selected =" selected "时，当前项即为默认选中项。
但是我们实际开发会用的比较少

3. form表单域

收集的用户信息怎么传递给服务器？
通过form表单域
目的：
在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递
form中的所有内容都会被提交给服务器。

**语法: **

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单。

注意:

每个表单都应该有自己表单域。
在做页面，后面学 ajax 后台交互的时候，必须需要 form表单域。

4.综合案例（注册页面）

<table width="600" align="center">
		<caption><h5>这是标题</h5></caption>
		<tr>
			<td>性别</td>
			<td>
				
				<label >
					<input type="radio" name="sex" />男<img src="img/man.jpg">
				</label>
				<label>
					<input type="radio" name="sex" />女<img src="img/women.jpg">
				</label>
			</td>
		</tr>

		<tr>
			<td>生日</td>
			<td>
					<select name="born_year" >
						<option>请选择出生年份</option>
						<option>1995</option>
					</select>
					<select name="born_month" >
						<option>请选择出生月份</option>
						<option>1</option>
						<option>2</option>
						<option>3</option>
					</select>
					<select name="born_day" >
						<option>请选择出生日</option>
						<option>1</option>
						<option>2</option>
					</select>
			</td>
		</tr>
		<tr>
				<td ><label for="local">所在地区</label></td>
				<td>
					<input type="text" name="locatrion" id="local" >
				</td>
		</tr>
		<tr>
			<td>理想定居城市</td>
			<td>
				<input type="radio" name="ideal_loacl" id="city1"> <label for="city1">一线城市</label>
				<input type="radio" name="ideal_loacl" id="city2"> <label for="city2">二线城市</label>
				<input type="radio" name="ideal_loacl" id="city3"> <label for="city3">三线城市</label>
				<input type="radio" name="ideal_loacl" id="city4"> <label for="city4">城镇乡村</label>
			</td>
		</tr>
		<tr>
			<td><label for="edu_level">学历</label></td>
			<td>
				<input type="text" name="edu_level" id="edu_level" >
			</td>
		</tr>
		<tr>
			<td>兴趣</td>
			<td>
				<input type="checkbox" name="intrest"> 养宠物 
				<input type="checkbox" name="intrest"> 户外
			</td>
		</tr>
		<tr>
			<td><label for="person_intro">个人简介</label></td>
			<td>
				<textarea id="person_intro">我是...</textarea>
			</td>
		</tr>
		<tr>
			<td></td>
			<td><input type="image" src="img/btn.png"></td>
		</tr>
		<tr>
			<td></td>
			<td><label><input type="checkbox" checked="checked" name="agree_law">我同意条款</label></td>
		</tr>
		<tr>
			<td></td>
			<td><a href="login.html" target="_blank">我是会员,立刻登录</td>
		</tr>
		<tr>
			<td></td>
			<td>我承诺
				<ul>
					<li>好好学习</li>
					<li>天天向上</li>
				</ul>

			</td>
		</tr>
	</table>

	<table align="center">
		<caption>登录页面</caption>
		<tr>
			<td><label for="login_num">登录账号</label></td>
			<td><input type="text" name="login_num" id="login_num"></td>
		</tr>
		<tr>
			<td><label for="pwd">密码</label></td>
			<td><input type="password" id="pwd" name="pwd"></td>
		</tr>
		<tr>
			<td></td>
			<td><label><input type="checkbox" name="auto_login" checked="checked">2周内自动登录</label></td>
		</tr>
		<t>
			<td></td>
			<td>
				<input type="image" name="logining" src="img/login.png">
				<a href="#"></a>
			</td>
		</tr>
		<tr>
			<td></td>
			<td>
				<a href="#" ><img src="img/ico1.png">QQ登录</a>
				<a href="#" ><img src="img/ico2.png">新浪登录</a>
				<a href="#" ><img src="img/ico3.png">百度登录</a>
			</td>
		</tr>
		<tr>
			<td></td>
			<td><a href="table_test.html" >还不是会员,立刻注册</a></dr>
		</tr>
	</table>

5. 查文档

W3C : http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/

winkyGe

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
html学习2

Web 标准结构标准 : .html样式标准 : .css行为标准 : .js : 是所有html标签中的根节点 : 头标签, 用于存放 `title`, meta, base, style, script, link 注: head 标签中必须包括 `title` 标签 : 让网页有标签 : 主体标签标签分类/ 称为关闭符号双标签<> something ...
复制链接

扫一扫