HTML5基础练习

HTML(Hypertext Markup Language 超文本标记语言)。网页大致可以分为结构(HTML)表现(CSS)行为 (JS)。元素和标签是一样的,元素就是标签,标签就是元素。




<html>
	
	<head>
		
		<meta charset="utf-8" /> 
		
		<title>这是一个网页title>
	head>
	
	<body>这是我的第一个网页body>
html>

HTML5基础练习_第1张图片

对网页的相关信息进行完善,但是不在网页中显示,这些内容全部在head标签里面



<html>
	
		<head>
		
		<meta charset="utf-8" /> 
		
		<meta name="keywords" content="HTML5,Java,前端"/>
		
		<meta name="description" content="发布HTML5等相关信息"/>
		
		<meta http-equiv="refresh" content="5;url=http://www.baidu.com"  />
		
		<title>这是一个好的网页title>
		head>
	<body>
		<h1>这是我的第一个网页h1>
	body>
html>

HTML5基础练习_第2张图片

元素、标签

h1元素:一级标题,重要性仅次于title标签,将文字以较大的形式输出(还有h2—h6,字体逐渐变小)

p标签:表示一个段落,一个标签独占一行,自动换行

b标签:粗体

em元素:斜体 (强调语气)

sup标签(表示上标)

sub标签(表示下标)

s元素:文字中间有一道线

u元素:下划线



<html>
	<head>
		<meta charset="utf-8" /> 
		<title>这是一个网页title>
	head>
	<body>
		<h1>这是我的第一个网页h1>
		<h2>这是我的第一个网页h2>
		<h3>这是我的第一个网页h3>
		
		<p>我是一个P标签,我用来表示一个段落p>
		
		<p>锄禾日当午,<br />汗滴禾下土。<hr />谁知盘中餐,<br />粒粒皆辛苦。p>
		
		<p><b>这是网页b>p>
		
		<p><em>这是网页em>p>
		
		<p>H<sub>2sub>p>
		<p>2<sup>2sub>p>
		
		<p><s>这是网页s>p>
		
		<p><u>这是网页u>p>
	body>
html>

HTML5基础练习_第3张图片

以上只是一些常用的元素,可以再w3cschool网站上进行查询相关标签的使用:https://www.w3school.com.cn/tags/index.asp

HTML5基础练习_第4张图片

实体

一些特殊元素不能使用,例如大于号之类的,因为与标签冲突,所以一般用一些特殊符号表示,这些特殊符号称为实体,又叫转义字符串



<html>
	<head>
		<meta charset="utf-8" /> 
		<title>这是一个网页title>
	head>
	<body>
		
		<p>a<b>cp>
		<p>          p>
		<p>©今天心情好p>
	body>
html>

HTML5基础练习_第5张图片

图片



<html>
	<head>
		<meta charset="utf-8" /> 
		<title>这是一个网页title>
	head>
	<body>
		
		<img src="/Users/***/Desktop/123.jpeg" alt="这是一个图片" />
	body>
html>

超链接

a标签:构成超链接,后面href属性代表所链接的url;有target属性,又分为blank属性和self属性;blank属性:构成的url点击后以新的窗口打开。self属性即默认属性,就是在当前网页中进行打开url。(超链接可以用#做占位符,可以跳转到顶部 )




	
		 
		这是一个网页
	
	
		选这个
	




	
		 
		这是一个网页
	
	
		选这个
	

HTML5基础练习_第6张图片

表格

table 元素 (表格元素)

tr元素 :代表着表格中的一行;可以嵌套着td元素,代表着一个单元格

th元素:标题,字体加粗,且居中

border属性:边框属性,但是不推荐使用,后面可以跟1px,代表着1像素。



<html>
	<head>
		<meta charset="utf-8" /> 
		<title>这是一个网页title>
	head>
	<body>
		<table border="1px">
    <tr>
        <td>AAAtd>
        <td>BBBtd>
        <td>CCCtd>
    tr>
    <tr>
        <th>AAAth>
        <th>BBBth>
        <th>CCCth>
    tr>
table>
	body>
html>

HTML5基础练习_第7张图片

colspan用来合并行;

rowspan用来合并列



<html>
	<head>
		<meta charset="utf-8" /> 
		<title>这是一个网页title>
	head>
	<body>
		<table border="1px">
    <tr>
    	
        <td rowspan="2">AAAtd>
        <td>BBBtd>
        <td>CCCtd>
    tr>
    <tr>
    	
        <td colspan="2">CCCtd>
    tr>
table>
	body>
html>

HTML5基础练习_第8张图片

表单

表单元素 form元素(用户可以自己输入东西进去,就相当于填写账号密码的那种)

input元素(单行文本框,有29种属性)

text属性(默认就是text属性)

value属性(占位符,自动填充上所写的字)

placeholder属性(不占文本框位置的,就相当于那个密码账号的提示,没点进去之前是暗的,点进去会没)

maxlength属性(最大字符数,超过就输不进去)

size属性(拓宽单行文本框,文本框显示所规定的字符数)

readonly属性(只读)

type中password属性 (placholder)实现以黑点形式出现



<html>
	<head>
		<meta charset="utf-8" /> 
		<title>这是一个网页title>
	head>
	<body>
		<form>
  			<p><h1><input type="text">h1>p>
  			
  			<p><h1><input type="text" value="今天天气不错">h1>p>
  			
  			<p><h1><input type="text" placeholder="密码">h1>p>
  			
  			<p><h1><input type="text" maxlength="8">h1>p>
  			
  			<p><h1><input type="password" placeholder="密码">h1>p>
		form>
	body>
html>

HTML5基础练习_第9张图片

button属性

1、默认形式

2、button按钮(和js合作,用来绑定事件的)

3、提交按钮



<html>
	<head>
		<meta charset="utf-8" /> 
		<title>这是一个网页title>
	head>
	<body>
		<form>
			
  			<p><input type="button">p>
			
  			<p><button>button>p>
			
  			<p><input type="submit">p>
		form>
	body>
html>

HTML5基础练习_第10张图片

type中range属性(数字滑动块 )

max:滑块最大值

min:滑块最小值

step:每次滑动的距离

value:起始的位置,默认为0,在滑表的中间



<html>
	<head>
		<meta charset="utf-8" /> 
		<title>这是一个网页title>
	head>
	<body>
		<form>
			<input type="range" step="10" max="100" min="-100" value="0">
		form>
	body>
html>

HTML5基础练习_第11张图片

type中number属性

其他属性与range相同



<html>
	<head>
		<meta charset="utf-8" /> 
		<title>这是一个网页title>
	head>
	<body>
		<form>
			 <input type="number" step="10" min="-10" max="100" value="0">
		form>
	body>
html>

HTML5基础练习_第12张图片

type中checkbox属性

相当于打对勾的功能,只有选择才能传输到服务器中去,传送到服务器上是布尔型



<html>
	<head>
		<meta charset="utf-8" /> 
		<title>这是一个网页title>
	head>
	<body>
		<form>
			  <input  type="checkbox" > 选择
		form>
	body>
html>

HTML5基础练习_第13张图片

type中radio属性

和checkbox功能一样,但是这个选择后就不能取消了,生成一组固定选项

name属性,当多个选项出现时,由name选项可以实现多选一的效果

checked属性,默认一个选项



<html>
	<head>
		<meta charset="utf-8" /> 
		<title>这是一个网页title>
	head>
	<body>
		<form>
			<b>你最喜欢的水果b>
    		<br />
    		
    		<input type="radio" name="a" checked>苹果
   			<input type="radio" name="a">香蕉
    		<input type="radio" name="a">橘子
    		<br />
    		<b>你喜欢的颜色b>
    		<br />
    		
    		<input type="radio" name="x">红色
   			<input type="radio" name="y">绿色
    		<input type="radio" name="z">紫色
		form>
	body>
html>

HTML5基础练习_第14张图片

select元素

可以进行选择,但是不可以自己输入

option元素

可供选择的项



<html>
	<head>
		<meta charset="utf-8" /> 
		<title>这是一个网页title>
	head>
	<body>
		<form>
			<b>你最喜欢的颜色b>
			
    		<select>
       			<option>红色option>
       			<option>绿色option>
       			<option>紫色option>
       			<option>白色option>
   			select>
		form>
	body>
html>

HTML5基础练习_第15张图片

datalist元素

实现选择,类似是select,但是这个可以自己输入,不过要用id引导,用id引导后,用input元素中的list属性来进行引导



<html>
	<head>
		<meta charset="utf-8" /> 
		<title>这是一个网页title>
	head>
	<body>
		<form>
			<b>你最喜欢的颜色b>
			<input type="text" list="1">
    		<datalist id="1">
        		<option>红色option>
       			<option>绿色option>
       			<option>紫色option>
       			<option>白色option>
    		datalist>
		form>
	body>
html>

HTML5基础练习_第16张图片

你可能感兴趣的:(HTML5基础练习)