HTML

最新推荐文章于 2022-08-24 01:17:56 发布

weixin_43905026

最新推荐文章于 2022-08-24 01:17:56 发布

阅读量238

点赞数

文章标签：设置锚点 HTML框架 colspan rowspan HTML样式

本文链接：https://blog.csdn.net/weixin_43905026/article/details/88830953

版权

HTML
1.概念：
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。

HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。

2.格式：

!DOCTYPE html>
<html>                                        
      <head>
            <meta charset="UTF-8">            
            <title></title>
      </head>
      <body>
      </body>
</html>

标题：

<h1>--从大到小--</h6>

段落：

<p></p>      &nbsp;空格   <span></span>

插入图片及控制宽和高： alt - 图片显示有误时的提示

<img src="kebi.jpg" width="100" height="100" alt="test"/>

换行 <br/>

无序号实心黑点列表：

  <ul>
                  <li>内容</li>
                   <li>内容</li>
  </ul>

<ul type="circle"> 空心圆点。

<ul type="square">空心正方形圆点。

有数字序号列表：

 <ol> 
                    <li>内容</li>
                    <li>内容</li>
        </ol>

<ol type="A">大写ABC排序。
<ol type="a">小写abc排序。
<ol type="I">小写abc排序。

有序列表:

自定义列表以 <dl> 标签开始。

每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
            <dt>Coffee</dt>
            <dd>Black hot drink</dd>
            <dt>Milk</dt>
            <dd>White cold drink</dd>
</dl>

效果:

Coffee
              Black hot drink
    Milk
               White cold drink

超链接：可以链接到外面网站，也可以链接到内部其他页面。
target=_self 默认到本页，target=_blank 新的一页。
掌握 1.使用<a></a>标签创建。
          2. 使用图像做链接。
<a href="https://www.hao123.com/"><img src="img/李白.bmp"/></a>
          3.跳转到内部链接。
<a href="http://www.baidu.com/" target="_blank">跳转标题!</a>
<a href="html/list.html" target="_blank">跳转标题!</a>
    4.   "../" 代表回跳到上一级页面。

设置图片的链接：用<a>标签将图片链接包裹，然后使用在<a> 标签里写跳转到的链接。

4.设置锚点。
锚链接：<a href=”#abc”></a>  跳到锚点的位置    “#” 锚链接
 锚点<a name =”abc”></a>  
  <a href=”#”></a>默认到达顶部。
抛锚到同一个项目中另一个文件。

<a href="html/list.html#xx">定位到另一个页面的尾部</a>
在尾部设置一个a标签并写上名字 name=xx。



表格： th 是头部  tr表示行 td表示列 建表快捷方式ta 
border 单元格的边框
 cellspacing 单元格间距
 cellpadding 单元格内边距 内容与单元格的间距
<table border="1" cellspacing="" cellpadding="">
<caption>用户信息表格</caption>     
<thead>
                <tr><th>Header</th></tr>          
            </thead>
            <tbody>
                        <tr><td>Data</td></tr>       
            </tbody>                               
            <tfoot>
                        <tr><td>Data</td></tr>
            </tfoot>
</table>

colspan是横向合并；rowspan是纵向合并。

表单案例：

<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			表单：form
			子标签： input 通过type属性表示不同的表单控件 type= text  password checkbox radio
			注意： type可以为button，submit，reset  button与form无关      
			      submit与form有关，会提交到后台（讲后台再说）  reset：清除表单内容
			      
			块级标签与行级标签：
			块级标签：带换行的标签： h1~h6,p,ol,ul,dl 
			行级标签: 不带换行的标签: img,span,a,input
			      
		-->
		<form action="StudentServlet" method="post" >
			 用户名：<input type="text" /><br/>
			 密码：<input type="password" /><br/>
			 <!--默认radio各自为一组，要自定义性别为同一组: name="sex"（同名）-->
			 性别：<input type="radio" name="sex" value="man"/>男 
			      <input type="radio" name="sex" value="woman"/>女<br/>
			 爱好：<input type="checkbox"/>吃 
			      <input type="checkbox"/>喝
			      <input type="checkbox"/>玩<br/>
			 省份：<select>
			 	    <option>湖南</option>
			 	    <option>湖北</option>
			 	    <option>广东</option>
			 	    <option>广西</option>
			      </select><br />   
			 基本信息：<textarea rows="10" cols="30"></textarea><br />    
			 <input type="button" value="普通按钮" />
			 <input type="submit" value="提交按钮" />
			 <input type="reset"  value="重置" />
		</form>
	</body>
</html>

HTML 表单用于收集用户输入。
<form> 元素定义 HTML 表单：
<form> .
form elements
</form>

HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

HTML框架
frameset 被div取代 使用frameset必须要去掉body标签  cols 左右分
frameset 不能包在body中
<frameset rows="*,50%">
<frameset cols="25%,*">
<frame src="Itemc.html" noresize="noresize"/>//避免边框移动。
<frame src="Itemb.html" noresize="noresize"/>
</frameset>              
<frame src="Itema.html" noresize="noresize"/>

<浏览器无法展示时提示。

<noframes>
<body>浏览器无法处理框架</body>
<noframes>

<frameset rows="*,25%">
		<frameset cols="25%,*">
			<frame src="a.html" />
			<frame src="b.html" />
		</frameset>
		<frame src="c.html" />
	</frameset>

制作导航框架：
在需要展示的页面定义“name”,菜单栏目指向展示画面，”target=展示页面name”。
HTML内联框架：
例子：

   <iframe src="b1.html" width="500" height="500" name="Iteme"></iframe>
             <a href="http://www.baidu.com" target="Iteme">跳转到百度</a>



 target ="   "

正规的表格：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--正规表格-->
		<table border="1" cellspacing="" cellpadding="" width="50%" height="600px">
			<!--表格名字-->
			<caption>宿舍电费表</caption>
			<!--表头-->
			<thead>
				<tr>
					<th>宿舍号</th>
					<th>电费</th>
				</tr>
			</thead>
			<!--主体-->
			<tbody>
				<tr>
					<td>601</td>
					<td>800</td>
				</tr>
				<tr>
					<td>602</td>
					<td>1000</td>
				</tr>
				<tr>
					<td>603</td>
					<td>1200</td>
				</tr>
			</tbody>
			<!--表尾-->
			<tfoot>
				<tr>
					<th>总计：</th>
					<th>3000</th>
				</tr>
			</tfoot>
		</table>
	</body>
</html>
rows
<frameset cols="30%,40%,*">
		<frame src="Item1.html" noresize="noresize" frameborder="0"/>
		<frame src="Item2.html" noresize="noresize" frameborder="0"/>
		<frame src="Item3.html" frameborder="0"/>
	</frameset>

内联框架在页面里显示小窗口
例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<iframe src="index.html" width="300px" height="250px" name="head" ></iframe>	
		<!--需求： 在小窗口中显示百度页面，类似frameset操作即可 -->
		<a href="http://www.baidu.com" target="head">链接到百度</a>
	</body>
</html>

<html>
<body>
<iframe src="/i/eg_landscape.jpg"></iframe>
<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>
</body>
</html>

iframe src=""
 
&lt  img/  &gt

范围标签

<div></div>
<span></span>
ToCharArray

指定的链接 href=“” target = “xxx” 指定到页面打开的位置以name接收
例子：然后再加上内容

<frameset rows="25%,*,25%">
		<frame src="head.html" />
		<frameset cols="20%,*">
			<frame src="menu.html" />
			<!--类似锚点的设置，其他链接通过target属性连接到此处-->
			<frame src="content.html" name="content" />
		</frameset>
		<frame src="foot.html" />
	</frameset>

weixin_43905026

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML

HTML1.概念：HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。2.格式：!DOCTYPE html><html> ...
复制链接

扫一扫