首页 > 其他分享> > HTML个人学习笔记

HTML个人学习笔记

2020-03-02 14:05:36 作者：互联网

一、什么是HTML
HTML：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
二、HTML的一些标签

<strong>加粗</strong>
<em>斜体</em>
<br>换行符
<div>分块</div>
<a>a标签</a>	//4个作用：超链接、锚点、打电话、协议限定符
<form>表单标签</form>
<p>p标签</p>	//段落标签，用来换行

三、HTML的基本框架

<html lang="en">
<head>
	<meta charset="utf-8">		//相当于加载文字库，这样你的网页才能显示出中文
	<title>网页名-显示在导航栏</title>
	<meta content="游戏" name="keywords">	//网页搜索的关键字
	<meta content="这是一个你点开就上瘾的游戏" name="description">		//网页的描述
</head>
<body>
	
</body>
</html>

四、一些具体的实例
1.~~$50~~

<del style="color:#999">$50</del>	
//显示效果如上，#999代表灰色，del代表加横线删掉

2.建立区域块

<div style="width:100px;height:100px;background-color:red;"></div>	//表示建立一个宽高为100像素点、背景为红色的区域块

3.在选项前用数字排序，ol符并不常用

橘子
苹果
草莓

<ol type="1" reversed="reversed">	//type表示从1开始
	<li>橘子</li>
	<li>苹果</li>
	<li>草莓</li>
</ol>

4.在选项前加小圆圈

橘子
苹果
草莓

<ul type="circle">
		<li>橘子</li>
		<li>苹果</li>
		<li>草莓</li>
</ul>

5.在网页中插入图片
三种形式：a.可用网上的url；b.可用本地的绝对路径；c.可用本地的相对路径；
这是颖宝

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583136752198&di=b54c0b972cf604e51b4945882a13d9c2&imgtype=0&src=http%3A%2F%2Fimage001.ytexpress.cn%2F20170703%2Fed142a0bc5a877be4bf2e99ee0b3ee07.jpg" style="width:50px;" alt="这是颖宝" title="this is yin bao">
//alt（图片占位符）防止图片加载不出；title（图片提示符）在光标移至图片区域时显示。

6.a标签的4个作用
a.超链接；b.锚点；c.打电话；d.协议限定符
www.4399.com
你点我试试呀！come on!
锚点和协议限定忘记了。。。

<a href="https://www.baidu.com" target="_blank">www.4399.com</a>
<a href="javascript:while(1){alter(‘让你手欠’)}">你点我试试呀！come on!</a>

7.表单标签form

username:

password:

<form method="get" action="">	
		<p>			
		  username:<input type="text" name="username">
		</p>	
		<p>
		  password:<input type="password" name="password">	
		</p>
		<input type="submit" name="123" value="登录">
</form>

8.单选题

你们所喜欢的男星：
1、贝克汉姆 2、布莱恩特 3、姬成

<form method="get" action="">	//form是表单标签
		你们所喜欢的男星：
		1、贝克汉姆<input type="radio" name="star">		//radio表示单选题，star是问题变量，用来存储答案
		2、布莱恩特<input type="radio" name="star">
		3、姬成<input type="radio" name="star" checked="checked">	//表示选中默认状态
		<input type="submit">
</form>

9.登录设置

username:<input type="text" name="username" style="color:#999" value="请输入用户名" onfocus="if(this.value=='请输入用户名'){this.value==' ';this.style.color='#424242'}" 
onblur="if(this.value==' '){this.value='请输入用户名';this.style.color='#999'}">	
//实现鼠标移到输入框上，框中提示文字消失

10.多选题

<form method="get" action="">	//form是表单标签		
		选择你喜欢的水果：
		1、苹果<input type="checkbox" name="fruit" value="apple">		//checkbox表示多选题
		2、栗子<input type="checkbox" name="fruit" value="orange">
		3、草莓<input type="checkbox" name="fruit" value="strawberry">
		<input type="submit">
</form>

11.下拉列表

<h1>Province</h1>
		<select name="province">
			<option value="beijing">beijing</option>
			<option value="beijing">shanghai</option>
			<option value="beijing">tianjin</option>
		</select>

sakura_war 发布了1 篇原创文章 · 获赞 1 · 访问量 5 私信关注

标签：网页,标签,草莓,笔记,表单,学习,HTML,橘子
来源： https://blog.csdn.net/sakura_war/article/details/104605567