HTML+CSS+JS 01篇
授课老师 : 赵蒙蒙
联系方式 : g-zhaomm@tedu.cn
授课阶段 : Web前端基础
授课内容 : HTML + CSS + JS
文章目录
- 一、Web前端介绍
- 1. 什么是网页
- 2. 网页的组成
- 3. 开发前的准备
- 二、 HTML语法介绍
- 1. HTML介绍
- 2. 标签
- 3. 使用
- 三、常用标签介绍
- 1. 基本结构解析
- 2. body中常用标签
- 3. 常用结构标签
一、Web前端介绍
1. 什么是网页
网页是基于浏览器的应用程序,是数据展示的载体.
2. 网页的组成
- 浏览器
- 代替用户向服务器发请求
- 接收并解析数据展示给用户
- 服务器
- 存储数据
- 处理并响应请求
- 协议
- 规范数据在传输过程中的打包方式
3. 开发前的准备
- 运行环境:浏览器,设置chrome为默认浏览器,作为网页文件的运行环境。
- 调试工具:浏览器自带的调试工具,使用快捷键"F12"或右键"检查"打开。
- 开发工具:不限,选用个人习惯的即可。(Sublime、VSCode、EditPlus、PyCharm等)
二、 HTML语法介绍
1. HTML介绍
超文本标记语言(HyperText Markup Language)浏览器能够识别和解析的语言,通过标签的形式构建页面结构和填充内容
2. 标签
标签也称为标记或元素,用于在网页中标记内容
语法:标签使用< >为标志,标签名不区分大小写,推荐小写表示
分类:
- 双标签:成对出现,包含开始标签和结束标签。例:
<html></html>
- 单标签:只有开始标签,没有结束标签,可以手动添加“/”表示闭合。例:
<br> <br/>
标签属性:
- 标签属性书写在开始标签中,使用空格与标签名隔开,用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成,属性值使用双引号表示。例:
<meta charset="utf-8">
- 同一个标签中可以添加若干组标签属性,使用空格间隔。例:
<img src="lily.jpg" width="200px" height="200px">
3. 使用
- 创建网页文件,使用.html或.htm作为文件后缀
- 添加网页的基本结构
<!doctype html> <html><head><title>网页标题</title><meta charset="utf-8"></head><body>网页主体内容</body> </html>
- 标签嵌套
在双标签中书写其他标签,称为标签嵌套- 嵌套结构中,外层元素称为父元素,内层元素称为子元素;
- 多层嵌套结构中,所有外层元素统称为祖先元素,内层元素统称为后代元素
- 平级结构互为兄弟元素
- HTML语法规范
- 标签名不区分大小写,建议使用小写
- 注释语法:
<!-- 此处为注释 -->
三、常用标签介绍
1. 基本结构解析
<!-- 文档类型声明,便于浏览器正确解析标签及渲染样式 -->
<!doctype html>
<!-- HTML文档开始的标志 -->
<html> <!-- 头部设置,可在head中设置网页标题,网页选项卡图标,引入外部的资源文件,设置网页相关信息等 --><head><!-- 设置网页标题,显示在网页选项卡上方 --><title>网页标题</title><!-- 设置网页字符编码 --><meta charset="utf-8"> </head><!-- 网页主体部分,显示网页主要内容 --><body> 网页主体内容</body>
</html><!-- 文档结束-->
2. body中常用标签
文本标签
- 标题标签:自带加粗效果,从h1到h6字体大小逐级递减
<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
- 段落标签:
<p>段落文本</p>
- 普通文本标签:
<span>行分区标签,用于对特殊文本特殊处理</span> <b>加粗标签</b> <strong>强调标签,效果同b标签</strong> <label>普通文本标签,常与表单控件结合实现文本与控件的绑定</label> <i>斜体标签</i> <u>删除线标签</u>
- 格式标签:
浏览器会忽略代码中的换行和空格,只显示为一个空格。想要实现页面中的换行,需要借助于换行标签。
<br>
- 水平线标签,在页面中插入一条水平分割线
<hr>
- 字符实体:
某些情况下,浏览器会将一些特殊字符按照HTML的方式解析,影响显示结果。此时需要将这类字符转换为其他的形式书写
例:
使用 < 在页面中呈现 "<"使用 > 在页面中呈现 ">"使用 在页面中呈现一个空格使用 © 在页面中呈现版权符号"©"使用 ¥ 在页面中呈现人民币符号"¥"
容器标签
常用于页面结构划分,结合CSS实现网页布局<div id="top">页面顶部区域</div> <div id="main">页面主体区域</div> <div id="bottom">页面底部区域</div>
图片与超链接标签
图片标签 :用于在网页中插入一张图片。
- 属性 src 用于给出图片的URL,必填。
- 属性 width/height 用于设置图片尺寸,取像素值,默认按照图片的原始尺寸显示。
- 属性 title 用于设置图片标题,鼠标悬停在图片上时显示
- 属性 alt 用于设置图片加载失败后的提示文本
语法:
<img src="" width="" height="" title="" alt="">
- 超链接标签:用户可以点击超链接实现跳转至其他页面
- 属性 href 用于设置目标文件的URL,必填。
- 属性 target用于设置目标文件的打开方式,默认在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank")
<a href="http://www.taobao.com" target="_self">淘宝</a> <a href="http://www.baidu.com" target="_blank">百度</a>
3. 常用结构标签
列表标签
- 无序列表(ordered list)
默认使用阿拉伯数字标识每条数据
<ol><li>list item 列表项</li> <li>list item 列表项</li><li>list item 列表项</li> </ol>
- 有序列表(unordered list)
默认使用实心圆点标识列表项
<ul><li>list item 列表项</li> <li>list item 列表项</li><li>list item 列表项</li></ul>
- 列表嵌套
在已有列表中嵌套添加另一个列表,常见于下拉菜单
<ol><li>西游记<ul><li>孙悟空</li><li>孙悟空</li><li>孙悟空</li></ul></li> </ol>
- 无序列表(ordered list)
表格标签
- 表格由行和单元格组成,常用于直接的数据展示或辅助排版,基本结构如下
<!-- 创建表格标签 --> <table><!-- 创建行标签 --><tr><!-- 行中创建单元格以显示数据 --><td>姓名</td><td>年龄</td><td>班级</td></tr><tr><td>小白</td><td>18</td><td>001</td></tr><tr><td>迪丽热巴</td><td>20</td><td>002</td></tr> </table>
- 单元格合并:用于调整表格结构,分为跨行合并和跨列合并,合并之后仍然保证表格结构完整
<table border="1px" width="300px" height="300px" align="center"><tr><td colspan="3">星期1</td><!--单元格合并之后删除多余的单元格--><td>星期1</td><td>星期1</td></tr><tr><td rowspan="2">星期1</td><td>星期1</td><td>星期1</td><td>星期1</td><td>星期1</td></tr><tr><!--跨行合并,删除多余的单元格--><td>星期1</td><td>星期1</td><td>星期1</td><td>星期1</td></tr> </table>
- 行分组标签:可以将表格中的若干行划分为一组,表示表头,表尾及表格主体,默认在表格中创建的所有行都会被自动加入表格主体中
<table border="1px" width="300px" height="300px"><!-- 表头--><thead><tr><!-- th与td标签用法一致,表示单元格,自带加粗和居中效果--><th>姓名</th><th>年龄</th><th>班级</th></tr></thead><!-- 表尾--><tfoot><tr><td colspan="3">小计</td></tr></tfoot><!-- 表主体--><tbody><tr><td>小红</td><td>18</td><td>001</td></tr><tr><td>小红</td><td>18</td><td>001</td></tr><tr><td>小红</td><td>18</td><td>001</td></tr></tbody> </table>
表单标签
表单用于采集用户的信息并提交给服务器,由表单元素和表单控件组成。表单元素form负责提交数据给服务器,表单控件负责收集数据。- 表单使用
| 属性名 | 取值 |
| ------- | ------------------------------------------------------------ |
| action | 设置数据的提交地址 |
| method | 设置数据的提交方式,默认为get方式,可以设置为post |
| enctype | 设置数据的编码类型,涉及二进制数据提交(例如图片,文件,音视频等),必须设置数据的提交方式为post,编码类型为"multipart/form-data" |
例如:
<form action="" method="" enctype=""><!--此处为表单控件--> </form>
- 表单控件使用(重点)
表单控件用于采集用户信息,可设置以下标签属性
属性名 取值 type 设置控件类型 name 设置控件名称 value 设置控件的值 placeholder 设置输入框中的提示文本 maxlength 设置输入框中可输入的最大字符数 checked 设置单选按钮或复选按钮的默认选中 selected 设置下拉菜单的默认选中 使用:
<form action="login" method="post" enctype=""><p>普通文本框text : <input type="text" name="username" placeholder="用户名由数字和字母组成" maxlength="10"></p><p>密码框password : <input type="password" placeholder="请输入密码"></p><p><!-- 一组按钮的控件名称必须保持一致-->单选按钮radio : <input id="male" type="radio" name="gender" value="male" checked><label for="male">男</label><!-- "label for id"实现文本与控件的绑定--><input type="radio" name="gender" value="female">女</p><p>复选按钮checkbox :<input type="checkbox" name="hobby" value="smoke" checked>抽烟<input type="checkbox" name="hobby" value="drink">喝酒<input type="checkbox" name="hobby" value="study">学习</p><p>文件选择框file : <input type="file" name="uimg"></p><p>下拉菜单select :<select name="province"><option value="hebei">河北省</option><option value="henan" selected>河南省</option></select></p><p>多行文本域 : <textarea name="uinfo"></textarea></p><p><!-- 功能按钮--><input type="submit" value="注册"><input type="reset"><input type="button"><button>表单内等价于submit</button></p> </form>
- 表单使用
HTML+CSS+JS 01篇相关推荐
- 2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
- (转)web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
- 3. web前端开发分享-css,js提高篇
http://www.cnblogs.com/jikey/p/3604459.html 一. css基础知识掌握之后(个人的标准是:弄清块元素与内联元素的区别,弄清float的应用场景,弄清posit ...
- 移动端canvas_web前端开发分享-css,js移动篇
随着移动市场的逐步扩大及相关技术的日趋完善,对前端开发提出了新的岗位要求,在继承前人成果的基础上需要在新的历史条件下有新的创新.移动端的开发,虽然没有IE6众多问题的折磨,但是多平台,多设备的兼容,也 ...
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)
#3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...
- HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码...
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
- HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
- 一行代码教你撩妹手到擒来❤html+css+js烟花告白3D相册(含音乐+可自定义文字)520表白/七夕情人节/求婚
❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白/送礼物/3D相册,是不是要给女朋友或者正在追求的 ...
- 如何通过 HTML+CSS+JS 制作焦点轮播图
序言 [版权声明]:狸狸高度重视原创作者或者著作权人应该享有的著作权,严格遵守国家相关法律法规,系该文章内所引用到的实例并非百分之百对原作品进行还原.因此,即便是您完完整整的复制并粘贴了本文章内所有的 ...
- html面试题(一)--html css js
前端面试题汇总 一.HTML和CSS 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...
最新文章
- 2019人工智能的“领头羊”会是?
- ZooKeeper客户端ZKClient使用
- AngularJS——第3章 指令
- JS模板引擎handlerbars入门
- python怎么安装pyecharts_基于Python安装pyecharts所遇的问题及解决方法
- JSON与js对象序列化
- pandas-数据分析
- python怎么发送邮件_Python面试题之如何用Python来发送邮件?
- vnc连接服务器怎么配置文件,vnc服务器和客户端怎么配置文件
- 使用Maven构建Java项目
- python 列表推导_Python 列表推导式使用的注意事项
- Servlet-HttpServletRequestWrapper
- 汽车电子电气架构工程师的工作
- pdfFactory Pro 不能被安装(AddPrinterDriver 失败)...找不到指定的模块
- kubernetes 源码安装1.18.3 (7)部署cni网络
- php注入过程详解,PHP注入代码详解
- Touch panel DTS 分析(MSM8994平台,Atmel 芯片)
- Born to Win: Find Your Success Code by Zig Ziglar and Tom Ziglar
- s3fs挂载对象存储到本地
- SpringBoot整合Druid ---- 猿来如此容易
热门文章
- Windows10中,如何改变鼠标光标(指针)的大小和颜色?
- 反转单链表(C语言)
- java reflection singleton factorypattern
- 差分 离散化 (线段树优化lazy标记)2018ICPC SouthEastern Fishermen
- Android那些事!
- api多版本方案(URL)
- linux 根目录变为只读了,Linux系统重启或无故变为只读造成网站无法正常访问的简单临时的做 根目录只读不能写处理:...
- java8时间转换函数学习,教你脱离jdf转换的痛苦
- 一篇文章让你认识什么是saas模式
- SaaS是什么?是订阅吗?还是web应用?