超文本标记语言HTML (入门基础）

最新推荐文章于 2023-03-06 09:51:43 发布

thy的博客

最新推荐文章于 2023-03-06 09:51:43 发布

阅读量316

点赞数

分类专栏： HTML 文章标签： HTML基础

本文链接：https://blog.csdn.net/weixin_44161678/article/details/86681926

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.HTML

1.1 HTML Hypertext Markup language 超文本标记语言

	HTML是最基本的网页语言。代码全部由标签组成。

1.2HTML的基本格式

<html>
    <head>
        //存放属性信息，辅助性信息，以及外部文件（重要）。会优先加载。
    </head>
    <body>
        //存放数据
    </body>
</html>

1.3字体格式及属性

<html>
    <head>
        
    </head>
    <body>
        <font size = "7" color="red" face="字体的格式（宋体,微软雅黑。。。。)">字体的格式</font>
        //size（字体大小:最小的是：1 ，最大的是: 7  ;默认大小是：3 ).
        <h1>最大 </h1> .... <h6>最小 </h6>//标题标签：逐渐缩小
        <b>字体加粗标签</b>    
        <i>字体倾斜标签</i>
        <u>下划线标签</u>
    </body>
</html>

1.4排版标签及属性

<html>
    <head>
        <!--注释 -->//html注释标签
        
    </head>
    <body>
        <br/>//html换行标签
        
        <hr color = "red" width = "200px(50%)" />//html水平线标签
        
        <p  align = "center(居中)"> 段落标签：在开始和结束的位置留一行空格</p>
        
        &nbsp;//代表空格
        
        <div> div标签：css+div在网页上进行布局、美工。div为块级元素（换行的符合 </div>
        
        <span> span 标签不会换行行内元素</span>
        
    </body>
</html>

1.5列表标签级属性

<html>
    <head>
        
    </head>
    <body>
        <dl>//数据格式化列表。  特点：自动对齐
            <dt>上</dt>
            <dt>下</dt>
            <dt>下</dt>
        </dl>
        //有序列表及属性
        <ol type="a(1,i)" start="（开始的地方）">
            <li>数据1</li>
            <li>数据2</li>
            <li>数据3</li>
        </ol>
        //无序列表及属性
        <ul type="disc（实心圆）"（square：实心方块，circle：空心圆）>
            <li>数据1</li>
            <li>数据2</li>
            <li>数据3</li>
            <li>数据n</li>
        </ul>
        
    </body>
</html>

1.6 图片标签及属性

<html>
    <head>
        
    </head>
    <body>
        <img alt = "图片的说明文字（给图片起的名字)" scr="图片的地址" width="图片宽度" height="图片的高度"/>//图片标签
        //图片的地址：相对路径 -文件跟使用者在同一个目录下，直接使用文件名
	    			- 文件在使用者目录的下层目录
						E:\work\webWorkspace\day09_1\WebRoot\ 图片.html
						E:\work\webWorkspace\day09_1\WebRoot\ img\林志玲.jpg

					-文件在使用者目录的上层目录
						E:\work\webWorkspace\day09_1\  WebRoot\图片.html
						E:\work\webWorkspace\day09_1\   林志玲.jpg
        //           绝对路径 E:\work\webWorkspace\day09_1\WebRoot\林志玲.jpg
				
    </body>
</html>

1.7 超链接的标签及属性

<a href="需要链接的地址"> </a>//超链接标签
//定位资源（锚点）
<a name="top">顶部</a>
<a target="_blank" href="#top">回顶部</a>
	target="_blank" 在新窗口中打开连接地址
	target="_self"	在当前窗口中打开

必须要指定属性：href=“链接的地址”

需要编写协议
- HTTP
- 默认file文件的协议
- 如果浏览器可以解析文件，默认会打开文件。
- 如果浏览器不可以解析文件，弹出下载窗口。
- 支持自定义协议
- 浏览器解析不了的协议，默认找操作系统的引用程序。

1.8 表格、表单标签及属性
表格：

<table>
	<caption>用户列表</caption>
	<tr>
		<th>数据（表头）</th>//特点：加粗居中
    	<th>数据（表头）</th>
	</tr>
	<tr>
		<td>数据</td>
    	<td>数据</td>
	</tr>
</table>

table的属性
			 border:	    边框
			 width:	        宽度
			 height:	    高度
			 cellspacing:   单元格边框的距离
			 align		    整个表格的方位
         行合并	rowspan="（合并多少个单元格就写几）"	rows
		列合并	   colspan="（合并多少个单元格就写几）"	column

表单：

<form action = "提交表单的路径" method = "提交表单的方式（get/post）">//提交表单  
        
    <input type="text" name="接收这个文本的名字"/>//普通的文本框type="text"  name必须指定
        
	<input type="password" name="接收这个文本的名字"/>			
				* type="password"		密码框
					 * name必须指定
	<input type="rodio" name=""  value=""/>			
				* type="radio"			单选按钮
					* name必须指定	value必须指定
					* name的属性，值要相同
					* 默认值：checked=checked或者true
	<input type="checkbox" name=""  value=""/>				
				* type="checkbox"		多选按钮
					* name必须指定	value必须指定
					* 默认值：checked=checked或者true
	<input type="reset" value=""/>					
				* type="reset"			重置：恢复到最初的状态	
    <input type="submit" value=""/>	
				* type="submit" 		提交表单
					* 点击提交后，地址栏发生了变化（?sex=on）
					* 在普通的文本框上添加name属性 name="username"之后，点击提交，地址栏发生了变化                        （username=haha&sex=on）
						String str = "username=haha&sex=on";
					* username=zhangsan&password=123&sex=nan&love=zq；	
	 <input type="file" name=""/>						
				* type="file"			选择文件		
					* name属性指定
	 <input type="hidden" name="" value=""/>					
				* type="hidden"			隐藏组件
					* name指定 value指定	
	 <input type="button"  value=""/>					
				* type="button"			按钮
					* value="显示的文字"
					* 和js（javascript）	绑定事件
	 <input type="image" name="ds" src="b.gif" />			
				* type="image"			图片
					* 提交	引入外部的一个文件（图片）
				
				* 声明选择框	
					<select name="city">
						<option value="bj"></option>
						<option value="sh"></option>
					</select>	
	<textarea rows="" cols=""></textarea>		
				* <textarea>文本域
					* rows="行"
					* clos="列"	
					* name属性指定
					* selected="selected"	代表默认值
        
	</form>

form表单的提交方式有哪些？（get和post的区别）

答：form表单提交方式有很多，常用的有两种post和get
- post和get提交方式的区别：
- get方式会把参数列表显示在地址栏上，post方式不会（请求体）。
- get方式说明网站安全级别较低，post安全级别较高。
- get方式不支持大数据，post支持大数据。
  推荐大家使用post方式。

thy的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
超文本标记语言HTML (入门基础）

1.HTML1.1 HTML Hypertext Markup language 超文本标记语言 HTML是最基本的网页语言。代码全部由标签组成。1.2HTML的基本格式&lt;html&gt; &lt;head&gt; //存放属性信息，辅助性信息，以及外部文件（重要）。会优先加载。 &lt;/head&gt; &lt;bod...
复制链接

扫一扫

专栏目录