HTML个人学习笔记

一、什么是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">$50del>	
//显示效果如上,#999代表灰色,del代表加横线删掉

2.建立区域块

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

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

  1. 橘子
  2. 苹果
  3. 草莓
<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.可用本地的相对路径;
HTML个人学习笔记_第1张图片

<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.coma>
<a href="javascript:while(1){alter(‘让你手欠’)}">你点我试试呀!come on!a>

7.表单标签form

username:

password:

<form method="get" action="">	//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>Provinceh1>
		<select name="province">
			<option value="beijing">beijingoption>
			<option value="beijing">shanghaioption>
			<option value="beijing">tianjinoption>
		select>

五、引入CSS
1.行间样式

<body>
	<div style="
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: red;">div>
	
body> //在html界面写

2.页面级CSS

//CSS代码
div {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: red;  //对html里的所有div进行作用
}

3.导入外部CSS文件

<link rel="stylesheet" type="text/css" href="CSS.css">

4.CSS选择器
4.1 id的用法(只能一对一)
4.2 class的用法(可以一对多,也可以多对一)

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Documenttitle>
	<style type="text/css">style>
	<link rel="stylesheet" type="text/css" href="lesson3.css">
head>
<body>
	<div id="only">haskdndiv>
	<div class="demo">2141453div>
	<div class="demo demo1">1235425div>
body>
html>
//CSS代码
#only{
	background-color: red;
}
.demo {
	background-color: yellow;
}
.demo1 {
	color:#f40;
}

4.3 标签选择器
4.4 通配符

* {
	background-color: green;
}

4.5 属性选择器

[class] {
	background-color: green;
}

4.6 优先顺序关系(也叫CSS权重):!important > 行间样式 > id > class | 属性选择器 > 标签选择器 > 通配符

4.7 选择器部分

<body>
	<div>
		<span>123span>
	div>
	<span>234span>

	<div class="wrapper">
		<strong class="box">
			<em>234em>
		strong>
	div>
	<em>123em>

	<div>
		<em>1em>
		<strong>
			<em>2em>
		strong>
	div>

	<div>1div>
	<div class="demo">2div>
	<p class="demo">3p>

	<em>1em>
	<strong>2strong>
	<span>3span>
body>
html>


CSS代码:
div span{		//父子选择器,又叫派生选择器;中间隔一个空格;
	back-ground-color: red;
}

.wrapper .box em{		//直接子元素选择器;
	background-color: red;	
}

div>em{		//直接子元素选择器
	background-color: green;
}

div.demo{		//并列选择器;不加空格,精准选择
	background-color: blue;
	font-size: 12px;	//字体大小  浏览器默认为16;
}

em,strong,span{		//分组选择器
	background-color: red;
}



六、模型
1、设置颜色的三种方式
1.1 土鳖式(纯英文单词) color: green;
1.2 颜色代码 color:#ff4400;
1.3 颜色函数 color:rgb(0,255,255);

2、字体样式设置

div {
	font-size: 30px;	//字体大小
	font-weight: bold;	//加粗
	font-style: normal;	//样式
	font-family: cursive;	//字体设置:草书
	border: 1px solid black;	//复合属性:粗细 样式 颜色;(边框)
	color: rgb(0,255,255);	//文本颜色
	width: 50px;		//文本框宽度
	height: 50px;		//文本框高度
	border: 100px solid black;		//边界
	border-left-color: transparent;	//左:透明;
	border-top-color: transparent;	//上:透明;
}

运行结果如下:
HTML个人学习笔记_第2张图片七、伪类选择器
以下代码实现鼠标移动到网址上,网址背景色及边框发生变化

<a href="www.baidu.com">www.baidu.coma>
a:hover{
	background-color: orange;
	color: #fff;
	font-family: arial;
	border-radius: 10px;
}

八、盒模型
1、元素简介
1.1 行级元素
feature:内容决定元素所占位置,不可以通过CSS改变宽高
example:span strong em a del

1.2 块级元素
feature:独占一行,可以通过CSS来改变宽高
example:div p ul li ol form address

1.3 行级块元素 inline-block
feature:内容决定大小,可以改变宽高
example:插入图片

2、盒子三大部分
盒子壁、内边距、盒子内容

3、

你可能感兴趣的:(HTML个人学习笔记)