CSS学习笔记_day1
目录
一、 什么是HTML
二、编辑器
三、Html的基本骨架
四、html基本标签
h、p、img、a、audio、video、ul>li、ol>li、dl dd dt、span、div
一、 什么是HTML
Hyper text markup language 超 文本 标记 语言
- 没有办法记录内容的样式（大小 颜色等）
- 通过给没有样式的文本加上标签的形式 让文本在网页中显示 具体的语义
二、编辑器
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
01、 sublime （效率较高）
02、 DreamWeaver
03、 记事本
三、Html的基本骨架
<!--文档类型声明：h5-->
<!DOCTYPE html>
<!--html文档开始-->
<html lang="en">
<!--html的头部 经常用来引入外部文件-->
<head>
<!--meta:元数据 -->
<!--utf-8:国际通用字库 里面包含了所有国家的所有语言-->
<!--gbk/gb2312:是国标字库 里面包含了中文 和少数外文-->
<meta charset="UTF-8">
<!--标题标签 显示在网页的标题栏-->
<title>我的第一个页面</title>
</head>
<body>
我是第一个页面
</body> </html>
四、html基本标签
1、 标题标签
h head line 标题的意思
<h1>~<h6>
<!--<h1> 我是标题</h1>-->
<h1>我是标题1号</h1>
<h2>我是标题2号</h2>
<h3>我是标题3号</h3>
<h4>我是标题4号</h4>
<h5>我是标题5号</h5>
<h6>我是标题6号</h6>
2、 段落标签
p paragraph
3、 图片标签
img image
<img src="18.jpg" alt="图片加载失败" title="我贴了双眼皮贴">
4、a 标签
<!--a: anchor 锚点标签-->
a标签跳转方式
01、 不同页面之间的跳转
<!--hyper text reference ：超文本引入-->
<a href="22.html" title="我要走了 正如我亲亲的来">跳到22</a>
02、 跳转到外部页面
<a href="http://www.baidu.com" title="找度娘">百度</a>
03、 页面内部的跳转
-01、 从底部到顶部
<!--#号键代表占位符-->
<a href="#">去顶部</a>
-02、从一个点到另一个点
<a href="#here">去here</a> <a name="here">Her在这 来找我呀</a>
5、路径
01、 相对路径
根据其中一个地址的改变 变化另外一个路径
同级：直接写路径
从外向内；一层层找有一层加一个 /
<a href="demo1/demo2/demo3/girlFriend.html">我单身要去找女朋友</a>
从内向外
<a href="../../../h2/money.html">我很穷 急需money</a>
6、媒体标签
<title>音频标签</title>
</head>
<body>
<!--controls:控制器 添加控制器之后 才会让音频文件显示-->
<!--autoplay:自动播放-->
<!--loop 循环播放-->
<!--<audio src="../audio/2.mp3" controls autoplay loop>您的浏览器版本过低 扔了吧</audio>-->
<!--<h1>我是标题</h1>-->
<!--<img src="../imgs/8.jpg" alt="">-->
<video src="../video/1.mp4" controls>您的浏览器版本过低 请升级</video>
</body>
7、列表标签 (组标签)
01、无序列表
（unordered list）<ul>
列表项 （list item）<li>
<style>
ul {
list-style: none;
}
li {
width: 100px;
height: 50px; text-align: center;
line-height:50px;
color: #fff;
float: left;
}
a {
display: block;
text-decoration: none;
}
a:hover {
background-color: black;
color: yellow;
}
</style>
</head>
<body>
<!--<ul>-->
<!--<li>南京</li>-->
<!--<li>上海</li>-->
<!--<li>西藏</li>-->
<!--<li>敦煌</li>-->
<!--</ul>-->
<!--ul>li*5-->
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">企业简介</a></li>
<li><a href="#">作品展示</a></li>
<li><a href="#">合作咨询</a></li>
</ul>
02、有序列表 ol li
<h2>我喜欢的歌曲排行榜榜</h2>
<ol>
<li>最炫民族风</li>
<li>小苹果</li>
<li>忐忑</li>
<li>平凡之路</li>
</ol>
03、自定义列表
01、definition list dl 定义列表
Definition title dt定义标题
Definition description dd 定义描述词
<dl>
<dt>青岛</dt>
<dd>虾 啤酒 </dd>
<dt>新疆</dt>
<dd>手抓羊肉 大盘鸡 饼</dd>
<dt>澳大利亚</dt>
<dd> 袋鼠 羊 龙虾</dd>
</dl>
8、span 和 div
01.、div ; division 分割的意思
02、span 范围的意思
区别：
A、两者本身都有区域划分的意思，根据语义不具有任何样式产生
B、div 在 css 里面是块级元素，span是行内元素
C、div 在 HTML里面是容器级元素，span是文本级元素
文本级标签：里面可以放 文字 图片 表单元素
a img p span
容器级标签：里面什么都可以放 包括自己
Ul li ol li dl dt dd div
<style>
div {
width: 200px;
height: 200px; }
span {
width: 200px;
height: 200px;
background-color: #0000ff;
}
</style>
</head>
<body>
<div>
今天阳光明媚
</div>
<span>
今天多云
</span> <span>
<div></div>
</span> <p>
<a href=""></a>
文本
<img src="" alt="">
</p>
</body>
9、表单元素 form
表单就是用来收集用户信息 让用户填写或者选择的
<style>
textarea {
/*让文本域大小不可更改*/
resize: none;
}
</style>
</head>
<body>
<form action="#" method="post">
<p>
<!--input:表示的是 输入的部件-->
<!--type:表示这个表单的类型-->
<!--text：表示的是文本框-->
<label for="username">用户名：</label><input type="text" placeholder="请设置用户名" id="username" name="username" maxlength="4" autocomplete="on" autofocus required readonly>
</p>
<p>
手机号：<input type="tel" placeholder="请输入手机号" name="tel">
</p>
<p><label for="password">密码：</label><input type="password" placeholder="请输入密码" id="password" name="password" required></p>
<p>邮箱：<input type="email"></p>
<p>出生日期：<input type="date"></p>
<!--name:增加元素的互斥性-->
<p>性别：<input type="radio" name="sex" value="男" >男
<input type="radio" name="sex" value="女" checked>女
<input type="radio" name="sex" value="保密">保密
</p>
<p>兴趣：
<input type="checkbox" name="hobby" value="吃饭" checked>吃饭
<input type="checkbox" name="hobby" value="睡觉" checked>睡觉
<input type="checkbox" name="hobby" value="吃鸡">吃鸡
<input type="checkbox" name="hobby" value="逛街">逛街
</p>
<p>
所在地：
<select>
<option value="" >南京</option>
<option value="">上海</option>
<option value="">广西</option>
<option value="" selected>西藏</option>
<option value="">敦煌</option>
</select>
</p>
<p>
<!--cols:columns:列的意思-->
<!--rows:行的意思-->
<textarea cols="30" rows="10" placeholder="备注："></textarea>
</p>
<!--按钮-->
<input type="button" value="我是一个普通按钮">
<input type="submit" value="提交">
<input type="reset" value="重置">
<button>h5按钮</button>
</form>
10、表格元素 <table>
表格的行 table rows <tr>
表格的数据 table data <td>
|
td |
td |
td |
|||||||
11、html的字符实体
<body>
<!--字符实体就是 用实际的字符来表示特殊的符号-->
<!--< less than lt <-->
<!--> great than gt >-->
今天好开心呀 因为我们学了<h1>标签
©2018 Baidu 使用百度前必读 意见反馈 京ICP证030173号 （版本号）
<p>
<!-- non-breaking spacing 空格的意思-->
我看上 你好 久了
</p>
</body>
12、废弃标签
<body>
<font size="30px" color="red">我是被废弃掉的</font>
<u>给我加下划线</u>
<b>我要加粗</b>
<hr>
<i>我要倾斜</i>
<p>我很开心<br>认识你们</p>
<p> <strong>我是强调加粗</strong>
<em>我是强调倾斜</em>
<del> 我是删除线</del></p>
</body>
(注：非原创，原作者：刘祥）
CSS学习笔记_day1的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签（3）
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
随机推荐
- Python 计算π及进度条显示
一,首先打开命令提示符找到Python路径,输入pip install tqdm下载第三方库tpdm. 二,写程序 法一 from math import * from tqdm import tqd ...
- SSM框架中如何简便上传文件表单
此种方式上传文件相对简单,以下均经测试成功,才提供到此. 以下为单个文件上传方式 分析:本次的工作目的是根据一级标题产生对应的二级标题,在每个二级标题下对应一个(file字段)新闻文件,当点击新闻文件 ...
- 【性能测试】LoadRunner11安装（包含破解、汉化）
LoadRunner安装(包含破解.汉化) 安装LoadRunner a.以解压包的方式打开[性能测试工具LR11.00].loadrunner-11.iso文件,运行“setup.ext”(花费时间 ...
- Angular2 之父子组件交互方式
父子组件交互方式,这里介绍主要的三种方式 1.事件传值 下面以列表页和分页组件举例. list.component.html <pagination *ngIf="pageParams ...
- eclipse里没有j2ee
eclipse是客户端开发工具,本来就不带有j2ee的jar包,需要容器:比如tomcat来提供这个jar的.j2EE通用jar包列表:IKIKAnalyzer3.2.8.jar // 分词器ant- ...
- 凯撒密码移位python
#!/usr/bin/python'''凯撒密码'''a="gmbhqwertghjkcvbzn"s=[""]*len(a)for j in range(26) ...
- windows下启动和运行分布式消息中间件消息队列 kafka
本文转载至:https://www.cnblogs.com/flower1990/p/7466882.html 一.安装JAVA JDK 1.下载安装包 http://www.oracle.com/t ...
- 一个redis因为关闭快照无法连接的BUG
[2018-04-19 11:00:08,587: ERROR/MainProcess] consumer: Cannot connect to redis://127.0.0.1:6379/0: M ...
- FINS/TCP_OMRON(1)
使用FINS/ TCP与欧姆龙PLC沟通 可参考下列教学 using System.Net; using System.Net.Sockets; 上面必须使用; IPAddress ipAddr = ...
- vue将网页中的特定部分转成pdf并下载（仅供个人学习记录）
先安装支持 将页面html转换成图片npm install --save html2canvas 将图片生成pdfnpm install jspdf --save 组件引用: import html2 ...