2019前端「HTML+CSS」零基础入门之 HTML学习笔记

最新推荐文章于 2024-03-31 19:45:30 发布

芋圆西米露

最新推荐文章于 2024-03-31 19:45:30 发布

阅读量785

点赞数 2

分类专栏：理论前端

本文链接：https://blog.csdn.net/qq_41117236/article/details/103769719

版权

理论同时被 2 个专栏收录

28 篇文章 6 订阅

订阅专栏

前端

3 篇文章 2 订阅

订阅专栏

2019前端「HTML+CSS」零基础入门

课时1 课程向导

课时2 html 初级篇 - 基础标签

课时3 html 进阶篇 - 高级标签

2019前端「HTML+CSS」零基础入门之 CSS学习笔记

2019前端「HTML+CSS」零基础入门

课时1 课程向导

前端三大基础语言：HTML CSS JavaScript
其次要学习：jQuery 网络 CSS3 H5 es6 webpack4.0 git 小程序设计模式 VUE VUEX VUE源码 React Node.js Mongo DB数据库等等

课时2 html 初级篇 - 基础标签

HTML（hyperText markup language 超文本标记语言）
<html>根标签</html>

<html>
	<head>编辑浏览器的特性</head>
	<body>展现给用户看</body>
</html>

中文-乱码时使用 <meta charset="utf-8"> 即可解决

编码常用字符集：
gb2312(亚裔字符集不包括繁体)-->gbk(亚裔字符集包括繁体)
unicode(万国码)-->升级码-->utf-8

<html lang="en,zh">language=English:告诉搜索引擎爬虫我们的网站是关于什么内容的</html>

SEO：搜索引擎优化技术，符合爬虫喜好
<meta content="服装" name="keywords">
<meta content="这是一个你穿了就不想脱的衣服" name="description">
<title>网页标题标签</title>
<p>this is a paragraph 段落标签</p>

<h1>标题</h1>
<h2>标题</h2>
.逐
.次
.小
<h6>标题</h6>

<strong>加粗</strong>
<em>斜体</em>
<del style="color: #CCCCCC;">~~¥50~~(添加中划线)</del>
<address>地址标签(成段落展示+斜体)</address>
规格化容器：<div>独占一行</div> <span>无作用</span>(分块明确、结构化)

<html>
    <head>
        <meta charset="utf-8">
        <title>document</title>
    </head>
    <body>
        <p></p>
        <h1-6>依次减小，加粗段落展示</h1-6>
        <strong><em>标签嵌套</em></strong>
        容器(绑定化操作)：<div></div><span></span>
    </body>
</html>

课时3 html 进阶篇 - 高级标签

<div style="width: 100px;height: 100px;background-color: red;">kjbvjbxASDBcsd bnxcbvnxbvcnxvzvbhjvsadfv</div>
显示：不会自动换行，会越出红色矩形，因为一个单词无法分割空格->英文单词分隔符
html编码：  代表空格
接下来我要给大家讲解一个标签，叫<div> (<div>)
<br>换行标签
标签正常来说成对出现，为了修饰包裹的内容；不需要修饰的标签->单标签
<hr>代表水平线

有序列表：
<ol>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
</ol>
默认阿拉伯数字作为序号；
<ol type="1"/"a"/"A"/"i"/"I"(排序标号类型) start="117(从第几个开始)">
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
</ol>
<ol reversed="reversed"(倒着排序)>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
</ol>

无序列表：
<ul type="disc(默认)/square/circle">
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
</ul>

一个大功能有很多个功能子项组成，例如信息导航栏。追求可维护性、通用性。

<html>
    <head>
        <meta charset="utf-8">
        <title>document</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
            }
            li{
                margin: 0 10px;
                float: left;
                color: #FF4400;
                font-weight: bold;
                font-size: 14px;
                height: 25px;
                line-height: 25px;
                padding: 0 5px;
            }
            li:hover{
                border-radius: 15px;
                background-color: #FF4400;
                color: #FFFFFF;
            }
        </style>
    </head>
    <body>
        <ul type="circle">
            <li>天猫</li>
            <li>聚划算</li>
            <li>天猫超市</li>
        </ul>
    </body> 
</html>

img标签

<img src="images/icon.png" style="width: 200px;" >
alt="图片占位符：这是出错后图片的位置上显示的内容"
title="图片提示符"

实现方式：
1.网上url
2.本地的绝对路径
3.本地的相对路径

a标签
<a href="hyperText reference：超文本引用" style="...">a标签</a>
在新标签页中打开：
<a href="hyperText reference：超文本引用" style="... target="_blank" ">a标签</a>
anchor -- 锚(原始作用：作为锚点记录位置)

<div id="demo1" style="" >demo1</div>
<div id="demo1" style="" >demo2</div>
<a href="#demo1">find demo1</a>
<a href="#demo2">find demo2</a>

固定导航：

<html>
    <head>
        <title>document</title>
		<meta charset="utf-8">
    </head>
    <body>
        <div id="demo1" style="" >demo1</div>
		<br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br>
		<div id="demo2" style="" >demo2</div>
		<br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br>
		<a style="display: block;position: fixed;bottom: 100px;right: 100px; border: 1px solid 
		black;height: 50px;width: 200px;background-color: #fcc;" href="#demo1" >find demo1</a>
		<a style="display: block;position: fixed;bottom: 150px;right: 100px; border: 1px solid 
		black;height: 50px;width: 200px;background-color: #ffc;" href="#demo2" >find demo2</a>
    </body>
</html>

<a href=""></a>
1.超链接
2.锚点
3.打电话(href="tel:138XXXXXXXX")、发邮件(href="mailto:邮箱地址")
4.协议限定符(<a href="javascript:while(1){alert('让你手欠')}">点我试试呀</a>)

<form>占html的重要性的50%</form>
form表单：从前端往后端发送数据
<form method="get/post(发送数据的方式)" action="http://www...(发送地址)"></form>

示例：

<html>
    <head>
        <title>document</title>
		<meta charset="utf-8">
        <style type="text/css">
            input{
                border: 1px solid #999;
            }
        </style>
    </head>
    <body>
        <form method="get" action="">
             <form method="get" action="">
            <p>username:<input type="text" name="username" value="请输入用户名"></p>
            <p>password:<input type="password" name="password" value="请输入密码"></p>
            <input type="submit" value="提交">
        </form>
        </form>
    </body>
</html>

实现鼠标聚焦时搜索框内文字消失，鼠标移开文字出现；输入内容移开显示输入内容：

1.2.聚焦3.输入

4.移开5.删除6.移开

<html>
    <head>
        <title>document</title>
		<meta charset="utf-8">
        <style type="text/css">
            input{
                border: 1px solid #999;
            }
        </style>
    </head>
    <body>
        <form method="get" action="">
            <p>username:<input type="text" style="color: #999999;" value="请输入用户名" name="username"
			onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'} "
			onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999999'}">
			<p>password:<input type="password"></p>
			</p>
			<input type="submit">
        </form>
    </body>
</html>

单选框：

        <form method="get" action="">
            <h1>以下哪个是你们所喜欢的男星</h1>
				1.贝克汉姆<input type="radio" name="star" value="xiaobei">
				2.莱昂纳多<input type="radio" name="star" value="laiangnaduo">
				3.彭于晏<input type="radio" name="star" value="pengyuyan">
            <input type="submit" value="提交">
        </form>

复选框：

        <form method="get" action="">
            <h1>Choose youe favourite fruit!</h1>
			1.apple<input type="checkbox" name="fruit" value="apple">
			2.orange<input type="checkbox" name="fruit" value="orange">
			3.banana<input type="checkbox" name="fruit" value="banana">
			<input type="submit">
        </form>

默认选中checked：

<html>
	<head>
		<meta charset="utf-8">
		<title>text</title>
	</head>
	<body>
		<form method="get" action="">
			<h1>CHOOSE YOUR SEX</h1>
			male:<input type="radio" name="sex" value="male" checked="checked">
			female:<input type="radio" name="sex" value="female">
			<input type="submit">
		</form>
	</body>
</html>

下拉菜单：

<html>
    <head>
        <meta charset="utf-8">
        <title>document</title>
    </head>
    <body>
        <h1>Province</h1>
		<form method="get" action="">
			<select name="province">
				<option>北京</option>
				<option>上海</option>
				<option>天津</option>
			</select>
			<input type="submit" value="提交">
		</form>
    </body> 
</html>

芋圆西米露

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
2019前端「HTML+CSS」零基础入门之 HTML学习笔记

目录2019前端「HTML+CSS」零基础入门课时1 课程向导课时2 html 初级篇 - 基础标签课时3 html 进阶篇 - 高级标签2019前端「HTML+CSS」零基础入门之 CSS学习笔记2019前端「HTML+CSS」零基础入门课时1 课程向导前端三大基础语言：HTML CSS JavaScript其次要学习：jQuery 网络 CSS3 H5 ...
复制链接

扫一扫