zoukankan      html  css  js  c++  java
  • Web阶段:第一章:HTML语言

    font标签是字体标签

    color是颜色属性
    size是大小属性。值是1-7,1最小,7最大
    face属性设置文本的字体
    

    需求1:在网页上显示 我是字体标签 ,并修改字体为 宋体,颜色为红色。
    举例:

    <font color="red" face="楷体" size="7">我是字体标签</font>
    

    特殊字符

    		<		特殊字符			&lt;
    		>		特殊字符			&gt;
    		空格		特殊字符			&nbsp;
    		html会把多个连续的空白字符,都会转换成为一个空格来处理。
    

    需求1:把<br> 换行标签 变成文本 转换成字符显示在页面上
    举例:

    我很&lt;br&gt;帅!<br/>
    我很&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;帅!
    

    标题标签

    	h1 - h6 都是标题标签
    	h1 最大
    	h6 最小
    	align 对齐属性
    		left	左对齐(默认值)
    		center	居中
    		right	右对齐
    

    需求1:演示标题1到 标题6的
    举例:

    <h1 align="left">标题1</h1>
    <h2 align="center">标题2</h2>
    <h3 align="right">标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    

    a标签

    超链接标签
    href 属性是连接跳转的地址
    target 属性 设置哪个窗口进行跳转
    _self	表示当前窗口(默认值)
    _blank	打开一个新窗口去跳转
    

    举例:

    <a href="http://www.baidu.com">百度</a><br/>
    <a href="http://www.baidu.com" target="_self">百度_self</a><br/>
    <a href="http://www.baidu.com" target="_blank">百度_blank</a><br/>
    

    列表标签

    ul 是无序列表
    type属性是每个列表项前面的符号
    li 是列表项
    

    需求1:使用无序,列表方式,把东北F4,刘能、赵四、宋小宝、小沈阳 ,展示出来
    举例:

    	<h1>东北F4</h1>
    	<ul type="none">
    		<li>刘能</li>
    		<li>赵四</li>
    		<li>宋小宝</li>
    		<li>小沈阳</li>
    	</ul>
    

    img 标签

    可以用来显示图片
    			src	设置你要显示的图片路径
    			alt 当设置的路径找不到图片的时候,用来代替显示的文本
    			height 	设置图片的高度
    			width	设置图片的宽度
    			border	设置图片的边框大小			
    		JavaSE的路径也分为相对路径和绝对路径两种:
    			绝对路径是:	盘符:目录文件名
    			相对路径:	从工程名开始算			
    		web中的路径:分为相对路径和绝对路径
    			相对路径
    				.				表示当前目录
    				..				表示上一级目录
    				资源名			相当于./资源名		(./ 可以省略)			
    			绝对路径
    				http://localhost:8080/imgs/10.jpg
    				http://ip:port/工程名/资源名
    				JavaSE的绝对路径不能在html页面中使用。
    

    需求1:使用img标签显示一张美女的照片。并修改宽高,和边框属性
    举例:

    <img alt="美女找不到" src="../imgs/1.jpg" height="120" width="100" border="1"/>
    <img alt="美女找不到" src="2.jpg" height="120" width="100" border="1"/>
    <img alt="美女找不到" src="../3.jpg" height="120" width="100" border="1"/>
    <img alt="美女找不到" src="../imgs/4.jpg" height="120" width="100" border="1"/>
    <img alt="美女找不到" src="../imgs/5.jpg" height="120" width="100" border="1"/>
    <img alt="美女找不到" src="http://localhost:8080/imgs/10.jpg" height="120" width="100" border="1"/>
    

    table表格

    border是设置表格的边框
    width是设置表格的宽度 
    height是设置表格的高度
    tr 是表格的行
    td 是表格的单元格
    align 是对齐 属性
    th 是表格的表头(第一行标题。默认是居中,并加粗)
    b 标签是加粗标签
    center 让被包含的内容居中显示
    

    需求1:做一个 带表头的 ,三行,三列的表格,并显示边框
    需求2:修改表格的宽度,高度,表格的对齐方式,单元格间距。
    举例:

    <center>
    			<table border="1" width="200" height="200" cellspacing="0">
    				<tr>
    					<th>1.1</th>
    					<th>1.2</th>
    					<th>1.3</th>
    				</tr>
    				<tr>
    					<td>2.1</td>
    					<td>2.2</td>
    					<td>2.3</td>
    				</tr>
    				<tr>
    					<td>3.1</td>
    					<td>3.2</td>
    					<td>3.3</td>
    				</tr>
    			</table>
    		</center>
    

    跨行跨列表格

    colspan属性设置单元格所占的列数
    rowspan属性设置单元格所占的行数
    

    需求1:新建一个五行,五列的表格,第一行,第一列的单元格要跨两列,第二行第一列的单元格跨两行,第四行第四列的单元格跨两行两列。
    举例:

    <table border="1" cellspacing="0" height="500" width="500">
    			<tr>
    				<td colspan="2">1.1</td>
    				<td>1.3</td>
    				<td>1.4</td>
    				<td>1.5</td>
    			</tr>
    			<tr>
    				<td rowspan="2">2.1</td>
    				<td>2.2</td>
    				<td>2.3</td>
    				<td>2.4</td>
    				<td>2.5</td>
    			</tr>
    			<tr>
    				<td>3.2</td>
    				<td>3.3</td>
    				<td>3.4</td>
    				<td>3.5</td>
    			</tr>
    			<tr>
    				<td>4.1</td>
    				<td>4.2</td>
    				<td>4.3</td>
    				<td colspan="2" rowspan="2">4.4</td>
    			</tr>
    			<tr>
    				<td>5.1</td>
    				<td>5.2</td>
    				<td>5.3</td>
    			</tr>
    		</table>
    

    iframe框架标签 (内嵌窗口)

    iframe 标签 可以在一个页面上,开一个窗口,单独加载(显示)一个页面内容
    src 	属性设置 需要单独显示的哪个页面的 地址(可以相对路径,也可以是绝对路径)
    width	设置宽度 
    height	设置高度		
    iframe和a标签组合使用步骤:
    			1、给iframe标签设置name属性。设置一个名称
    			2、给a标签的target属性设置需要跳转的iframe的name属性值
    

    举例:

    <iframe src="./6.表格标签.html" width="500" height="300" name="bbj"></iframe>
    	<ul>
    		<li><a href="1.font标签.html" target="bbj">1.font标签.html</a></li>
    		<li><a href="2.特殊字符.html" target="bbj">2.特殊字符.html</a></li>
    		<li><a href="3.标题标签.html" target="bbj">3.标题标签.html</a></li>
    		<li><a href="5.img标签.html" target="bbj">5.img标签.html</a></li>
    	</ul>
    

    表单标签

    input type=text 	表示一个普通文本输入框		value属性是文本框的默认值
    input type=password 表示一个密码输入框		value属性是文本框的默认值
    input type=radio	表示一个单选框	name属性可以对其进行分组 checked="checked"  表示默认选中
    input type=checkbox	表单一个筛选框 checked="checked" 表示默认选中
    input type=submit	是提交按钮	value属性可以修改按钮的文本
    input type=reset 	是重置按钮	value属性可以修改按钮的文本		让所有表单项都恢复默认值
    input type=button	是按钮	value属性可以设置按钮的文本
    input type=file		是文件上传域
    input type=hidden	是隐藏域。当我们需要给服务器发送一些信息,而这些信息,不希望用户看到。这个时候就可以使用隐藏域。	
    select 是下拉列表框
    option	是下拉列表中的选项	 selected="selected"表示默认选中
    textarea 表示多行文本输入框		起始标签和结束标签中的内容就是默认值
    rows 设置显示几行
    cols 设置每行几个字
    

    举例:

    <form action="">
    			用户名:<input type="text"><br/>
    			密码:<input type="password" /><br/>
    			确认密码:<input type="password" /><br/>
    			选择性别:<input name="sex" type="radio" />男<input name="sex" type="radio" />女<br/>
    			选择兴趣爱好:
    				<input type="checkbox" />喝酒
    				<input type="checkbox" />抽烟
    				<input type="checkbox" />烫头<br/>
    			选择国籍:
    				<select>
    					<option>中国</option>	
    					<option>美国</option>	
    					<option>日本</option>	
    				</select><br/>
    			自我评价:<textarea rows="10" cols="20"></textarea><br/>
    			<input type="submit" value="注册"/>
    			<input type="reset"/>
    		</form>
    

    表单格式化
    在表单里加上table表格
    举例:

    <center>
    			<h1>注册用户</h1>
    			<form action="">
    				<table>
    					<tr>
    						<td>用户名:</td>
    						<td><input type="text"></td>
    					</tr>
    					<tr>
    						<td>密码:</td>
    						<td><input type="password" /></td>
    					</tr>
    					<tr>
    						<td>确认密码:</td>
    						<td><input type="password" /></td>
    					</tr>
    					<tr>
    						<td>选择性别:</td>
    						<td>
    							<input name="sex" type="radio" />男
    							<input name="sex" type="radio" />女
    						</td>
    					</tr>
    					<tr>
    						<td>兴趣爱好:</td>
    						<td>
    							<input type="checkbox" />喝酒
    							<input type="checkbox" />抽烟
    							<input type="checkbox" />烫头
    						</td>
    					</tr>
    					<tr>
    						<td>选择国籍:</td>
    						<td>
    							<select>
    								<option>中国</option>	
    								<option>美国</option>	
    								<option>小日本</option>	
    							</select>
    						</td>
    					</tr>
    					<tr>
    						<td>自我评价:</td>
    						<td>
    							<textarea rows="10" cols="20"></textarea>
    						</td>
    					</tr>
    					<tr>
    						<td><input type="submit" value="注册"/></td>
    						<td><input type="reset"/></td>
    					</tr>
    				</table>
    			</form>
    		</center>
    

    表单提交的细节
    form 是表单
    action 表单提交的服务器地址
    method 请求的方式 GET或POST

    当我们提交表单的时候。如果表单项的数据没有发送给服务器
    1、表单项必须要有name属性,没有name属性在提交表单的时候。数据不会发给服务器。
    2、单选、复选框、(下拉列表项可选)。都要添加value属性。否则只会提交给服务器on值
    3、表单提交的时候。如果表单项不在提交的表单内,也不会把数据发给服务器。
    GET请求和POST请求的区别

    GET请求的特点:
    1、浏览器地址栏中是action属性值+?+请求参数(表单信息)例如: http://localhost:8080/?action=add&username=wzg168&password=123456&sex=boy&hobby=hj&country=cn&desc=1234
    2、不安全
    3、请求数据的长度限制					
    POST请求的特点:
    1、浏览器地址栏只有action的属性值
    2、相对安全
    3、数据没有长度限制
    

    div、span、p标签

    div :div标签(块标签)		默认独占一行
    span :是内联标签				默认宽度就是封装的数据的长度
    p :是段落标签				默认会在段落的上方或下方各空出一行来	
    

    需求1:div、span、p标签的演示

    <div>这是div块标签1</div>
    <div>这是div块标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
    <p>段落1</p>
    <p>段落2</p>
    
  • 相关阅读:
    0.1+0.2==0.3?
    Tomcat 初探(三)多项目部署
    Tomcat 初探(二) server.xml 配置
    Tomcat 初探(一) 简介
    如何使用 Idea 远程调试 Java 代码
    js-将时间戳转为正常的日期
    VUE-基本的写法
    HTML-列表无缝滚动效果2(显示一个暂停3秒,滚走显示下一个)
    JS-判断用户使用的终端是安卓还是IOS
    JS-在本页面监听是否用户是点击了返回进入的(IOS返回页面时,页面未初始化)
  • 原文地址:https://www.cnblogs.com/javawxid/p/12812131.html
Copyright © 2011-2022 走看看