前端HTML+CSS+JS
HTML
什么是HTML
用来制作网页的超文本标记语言
什么是Web标准,有哪些组成
是W3C组织制定的一系列标准规范
有结构html,样式表现css,行为javascript组成
请写出标题标签,段落标签,换行标签
标题:h1到h6
段落:p
换行:br
请写出文本格式化标签:加粗,倾斜,删除线,下划线标签
加粗:strong 或者 b,strong语义更强,建议
倾斜:em 或者 i,建议em
删除线:del 或者 s,推荐del
下划线:ins 或者 u,推荐ins
请写出没有任何语义的盒子标签
div,独占一行,大盒子
span,一行上可以有多个span,小盒子
请写出图像标签,以及属性的作用
img
src图片链接
alt图片显示不出来用文字替代
title鼠标放在图像上会提示文字
width设置图片宽度
heigth设置图片高度,一般宽度和高度只需要设置其中一个,另一个会自定义缩放
border设置图像的粗细
请写出超链接标签,以及属性的作用
a
href:外部链接加http,内部链接同目录下的资源,空链接#,下载链接xx.zip或者xx.exe
target默认_self当前窗口打开,_blank新窗口打开
什么是描点链接,步骤是怎么完成的
点击文字可以快速定位到页面中的某个位置
属性href的形式是#名字
找到目标标签,添加id = 名字
请写出特殊字符:空格,大于号,小于号
>
<
请问表格的作用是什么,一个完整的表格如何定义,表格结构标签,有什么用
表格是用来展示数据的
table表格 tr表行 th表头单元格默认加粗居中 td普通单元格
thead,定义表格的首行
tbody,定义表格的表体,除了首行的所有表格部分
都是为了表格更清晰,语义更明确
如何合并单元格,有哪些属性
1.先确定是跨行还是跨列2.找到目标单元格写上合并方式3.删除多余单元格
rowspan,跨行合并,以上侧单元格为目标
colspan,跨列合并,以左侧单元格为目标
列表标签有哪些,列表标签包含的标签有哪些
无序标签ul,包含li
有序标签ol,包含li
自定义标签,包含dt和dd,一个dt有多个dd
表单的作用是什么,有哪些组成
为了收集用户信息
表单域form,表单控件,提示信息三部分组成
表单域标签有哪些
input输入表单元素
select下拉表单元素
textarea文本域元素
input标签有哪些属性
type,name,value,cheked,maxlength
select标签有哪些属性
option,selected
type属性的类型有哪些,作用是什么
text,文本框
password,密码框
radio,单选按钮,name必须相同
checkbox,复选框,name必须相同
button:按钮,搭配JS
file上传文件
hidden,隐藏输入的字段
image定义图像形式提交按钮
reset,重置表单
submit,提交表单数据
label标签的作用是什么,如何使用
让鼠标点击范围增加了
label标签加属性for=“名字”
另一个标签加属性id=“名字”
HTML作业题
圣诞老人题:
圣诞节的那些事1.圣诞节的由来2.圣诞老人的由来3.圣诞树的由来
基督教纪念耶稣诞生的重要节日。
亦称耶稣圣诞节、主降生节，天主教亦称耶稣圣诞瞻礼。
耶稣诞生的日期，《圣经》并无记载。
公元336年罗马教会开始在12月25日过此节。
12月25日原是罗马帝国规定的太阳神诞辰。
有人认为选择这天庆祝圣诞，是因为基督教徒认为耶稣就是正义、永恒的太阳。
5世纪中叶以后，圣诞节作为重要节日，成了教会的传统，
并在东西派教会中逐渐传开。因所用历法不同等原因，
各教派会举行庆祝的具体日期和活动形式也有差别。
圣诞节习俗传播到亚洲主要是在十九世纪中叶，
日本、韩国等都受到了圣诞文化的影响。
现在西方在圣诞节常互赠礼物，举行欢宴，并以圣诞老人、圣诞树等增添节日气氛
，已成为普遍习俗。圣诞节也成为西方世界以及其他很多地区的公共假日。
要求:使用标签对以上语句进行结构部署,最终效果如下,点击123可以快速定位页面资源,点击圣诞老人打开新窗口访问内部连接资源,点击百度一下访问外部连接资源
代码为
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>圣诞节</title></head><body><h1>圣诞节的那些事</h1><a href="#youlai">1.圣诞节的由来</a><br><a href="#old">2.圣诞老人的由来</a><br><a href="#tree">3.圣诞树的由来</a><br><h2 id="youlai">圣诞节的由来</h2><p>基督教纪念耶稣诞生的重要节日。亦称耶稣圣诞节、主降生节，天主教亦称耶稣圣诞瞻礼。耶稣诞生的日期，《圣经》并无记载。</p><img src="./images/kklt.jpg" width="100" /><h2 id="old">圣诞老人的由来</h2><p><a href="./圣诞老人.html" target="_blanc">圣诞老人</a>公元336年罗马教会开始在12月25日过此节。12月25日原是罗马帝国规定的太阳神诞辰。有人认为选择这天庆祝圣诞，是因为基督教徒认为耶稣就是正义、永恒的太阳。</p><img src="./images/kklt.jpg" width="100" /><h2 id="tree">圣诞树的由来</h2><p>5世纪中叶以后，圣诞节作为重要节日，成了教会的传统，并在东西派教会中逐渐传开。因所用历法不同等原因，各教派会举行庆祝的具体日期和活动形式也有差别。圣诞节习俗传播到亚洲主要是在十九世纪中叶，日本、韩国等都受到了圣诞文化的影响。</p><p>现在西方在圣诞节常互赠礼物，举行欢宴，并以圣诞老人、圣诞树等增添节日气氛，已成为普遍习俗。</p><p>圣诞节也成为西方世界以及其他很多地区的公共假日。</p><img src="./images/kklt.jpg" width="100" /><p>更多内容可以<a href="http://www.baidu.com" target="_blank">百度一下</a></p></body>
</html>
---------------------------------------------
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>圣诞老人</title></head><body><h1>圣诞老人（Santa Claus）</h1><p>圣诞老人（Santa Claus）是西方神话传说中的人物，在传说中西方圣诞节前夜时悄悄赠送礼物给小孩子，是耶稣基督诞辰瞻礼即西方圣诞节的代表角色之一。他普遍被认为是基督教的圣人圣·尼古拉斯（SaintNicholas）的衍生形象，圣诞老人的起源或与一种被称为毒蝇伞的红白相间蘑菇有关 [1] 。 </p><p> 传说每到12月24日晚上，有个神秘人会乘驾由9只驯鹿拉的雪橇在天上飞翔，挨家挨户地从烟囱进入屋里，然后偷偷把礼物放在孩子床头的袜子里，或者堆在壁炉旁的圣诞树下。他在一年中的其他时间里，都是忙于制作礼物和监督孩子们的行为。</p><p> 虽然没有人真的见过神秘人的样子，但是人们会装扮成他的样子来给孩子送上礼物。他通常被描述为一位老人，头戴红色帽子，大大的白色胡子，一身红色棉衣，脚穿黑色靴子的样子，拿着装有礼物的大袋子，因为总在圣诞节前夜出现派发礼物，所以习惯地称他为“圣诞老人”。</p></body>
</html>---------------------------------------------------------------
小说排行题:
最终呈现结果如下
代码如下
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>小说排行榜</title></head><body><table align="center" border="1px" cellpadding="0" cellspacing="0" height="500px" width="1000px"><tr><th>排名</th><th>关键词</th><th>趋势</th><th>进入搜索</th><th>最近七日</th><th>相关链接</th></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="./images/kklt.jpg" width="20px" ></td><td>100</td><td>1000</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>2</td><td>轮回乐园</td><td><img src="./images/kklt.jpg" width="20px" ></td><td>200</td><td>2000</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>3</td><td>凡人修仙传</td><td><img src="./images/kklt.jpg" width="20px" ></td><td>300</td><td>3000</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>4</td><td>校园风流邪神</td><td><img src="./images/kklt.jpg" width="20px" ></td><td>400</td><td>4000</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>5</td><td>诡秘之主</td><td><img src="./images/kklt.jpg" width="20px" ></td><td>500</td><td>5000</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr></table></body>
</html>-------------------------------------------------------
注册表单题:
最终效果为
代码如下
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>注册页面</title></head><body><h4 align="center">顶住练技术,遇到困难就润可不行呀</h4><table align="center" width="600px"><!-- 第一行 --><tr><td>性别</td><td><input type="radio" name="sex" value="nan" id="nan" checked="checked" /><label for="nan"><imgsrc="./images/kklt.jpg" width="10px">男</label><input type="radio" name="sex" value="nv" id="nv" /><label for="nv"><img src="./images/kklt.jpg"width="10px">女</label></td></tr><!-- 第二行 --><tr><td>生日</td><td><select><option value="">-----请选择年-----</option><option value="">100</option><option value="">200</option><option value="">300</option></select><select><option value="">-----请选择月-----</option><option value="">1</option><option value="">2</option><option value="">3</option></select><select><option value="">-----请选择日-----</option><option value="">1</option><option value="">2</option><option value="">3</option></select></td></tr><!-- 第三行 --><tr><td>所在地区</td><td><input type="text" name="shanghai" id="" value="上海城西" /></td></tr><!-- 第四行 --><tr><td>婚姻状况</td><td><input type="radio" name="hunyin" checked="checked" id="weihun"><label for="weihun">未婚</label><input type="radio" name="hunyin" id="yihun"><label for="yihun">已婚</label><input type="radio" name="hunyin" id="lihun"><label for="lihun">离婚</label></td></tr><!-- 第五行 --><tr><td>学历</td><td><input type="text" name="xueli" id="" value="大专" /></td></tr><!-- 第六行 --><tr><td>喜欢的类型</td><td><input type="checkbox" name="like" id="qingchun" value="qingchun" checked="checked" /><labelfor="qingchun">清纯</label><input type="checkbox" name="like" id="gaoleng" value="gaoleng" /><label for="gaoleng">高冷</label><input type="checkbox" name="like" id="luoli" value="luoli" /><label for="luoli">JK萝莉</label><input type="checkbox" name="like" id="keai" value="keai" /><label for="keai">可爱</label></td></tr><!-- 第七行 --><tr><td>自我介绍</td><td><textarea>简介</textarea></td></tr><!-- 第八行 --><tr><td></td><td><input type="submit" value="免费注册" /></td></tr><!-- 第九行 --><tr><td></td><td><input type="radio" checked="checked" />我同意注册条款和会员加入标准</td></tr><!-- 第十行 --><tr><td></td><td><a href="#">我是会员,立即登陆</a></td></tr><tr><td></td><td><h4>我承诺</h4><ul><li>年满18,单身</li><li>抱着严肃的态度</li><li>真诚寻找另一半</li></ul></td></tr></table></body>
</html>CSS
CSS的作用是什么,CSS的组成是什么
渲染网页
由选择器和声明(属性:值)组成
选择器有哪些,怎么用
标签选择器,类选择器,id选择器(搭配JS),通配符选择器
标签名,点.,#,*
怎么使用多类名方式
将样式公共部分抽离出来定义成另一个类,对应的标签属性class可以有多个值,中间用空格隔开
CSS字体属性有哪些
font-family;设置字体款式
font-size,字体大小,标题字体需要单独设置
font-weight,字体粗细,700变粗,400变细,注意没有单位px
font-style,normal字体不倾斜,italic倾斜
怎么使用字体复合属性
font: font-style font-weight font-size/line-heigth font-family
比如:font: italic 700 16px/… ‘宋体’
要求:顺序必须是这样,属性用空格隔开
其他几个可以省略,但是font-size,font-family必须写
比如:16px ‘宋体’
文本属性有哪些,作用是什么
color颜色
text-align文本对齐
text-indent文本缩进,段落首行缩进2em
text-decoration文本修饰,添加下划线underline,取消下划线none
line-height行高,控制行与行之间的距离
CSS引入方式有哪些
行内样式表,写在标签结构里
内部样式表,写在head标签里定义style标签
外部样式表,完全结构与样式分离,最佳作品
复合选择器有哪些
后代选择器空格 ,子选择器>,并集选择器(逗号分开),链接伪类选择器(冒号表示),:focus选择器
链接伪类选择器需要注意什么
必须按照LVHA的顺序写,实际开发只写:a{}和a:hover
元素显示模式怎么转换
转为块元素:display:block
转为行内块:display:inline-block
转换为行内元素:display:inline
单行文字垂直居中的原理是什么
文字高度 + 上缝隙高度 + 下缝隙高度 = 完整高度,让完整高度 = 盒子的宽度,就可以然后文字垂直居中了
背景的颜色,图片,平铺,背景图片位置,背景图片固定怎么写
backgrount-color颜色
backgrount-image图片:none无,url
backgrount-repeat平铺:repeat纵向和横向平铺默认,no-repeat不平铺,repeat-x横向平铺,repeat-y纵向平铺
backgrount-position方位
HTML + CSS作业题
新闻页面:
效果如下
代码如下
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>新闻页面</title><style type="text/css">body {font: 16px/28px "microsoft yahei";}h1 {font-weight: 400;text-align: center;}.grey {color: #888888;font-size: 0.75rem;text-align: center;}.serch {width: 170px;}.btn {font-weight: 700;}a {text-decoration: none;}p {text-indent: 2em;}.pic {text-align: center;}.footer{color: #888888;text-align: right;font-size: 12px;}</style></head><body><h1>顶住练技术,遇到困难就润可不行呀</h4><div class="grey">2022年03月14日 09:03 <a href="#">国家卫健委网站</a><input class="serch" type="text" value="请输入查询条件" /><button class="btn">搜索</button></div><hr><p> 当日新增治愈出院病例135例，解除医学观察的密切接触者8222人，重症病例较前一日增加2例。</p><p class="pic"><img src="./images/kklt.jpg" width="52px"></p><p>境外输入现有确诊病例2610例（其中重症病例2例），现有疑似病例5例。累计确诊病例16337例，累计治愈出院病例13727例，无死亡病例。</p><p>截至3月13日24时，据31个省（自治区、直辖市）和新疆生产建设兵团报告，现有确诊病例8531例（核减1例）（其中重症病例8例），累计治愈出院病例103735例，累计死亡病例4636例，累计报告确诊病例116902例（核减1例），现有疑似病例5例。累计追踪到密切接触者1813869人，尚在医学观察的密切接触者161403人。</p><p>累计收到港澳台地区通报确诊病例280757例。其中，香港特别行政区259387例（出院27943例，死亡3993例），澳门特别行政区82例（出院79例），台湾地区21288例（出院13742例，死亡853例）。</p><p class="footer">中央广播电视总台 央视网 版权所有</p></body>
</html>前端HTML+CSS+JS相关推荐
- 实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS
实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS 实现简易版德州扑克 1.先上达到网页效果图(简易版德州扑克) 2. 代码实现 2.1 HTML和JS代码 2.2 CSS代 ...
- 利用html-minifier和uglify-js对前端HTML/CSS/JS文件进行压缩
利用html-minifier和uglify-js对前端HTML/CSS/JS文件进行压缩 前言:最近项目组项目接近完工,因为是个网站改造项目,大多数页面都是静态页面,前端开发并没有使用框架或工程化的 ...
- Web前端--HTML+CSS+JS新型冠状病毒射击小游戏
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有 个 ...
- Web前端--HTML+CSS+JS实现圣诞抓礼物小游戏
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有 个 ...
- Web前端---HTML+CSS+JS实现记忆纸牌游戏
游戏介绍: js实现扑克牌翻牌记忆小游戏代码.连续点击翻开两张扑克牌,相同去重,不同则合上重新翻,考验你的记忆力. 视频演示: 挑战记忆力-Web前端实现记忆纸牌游戏.mp4 主要源码展示: styl ...
- 前端(HTML+CSS+JS)
表格标签 向网页中加入表格 2,总结 table 标签用来表示表格 tr 标签表示表里的一行 td 标签表示行里的列 border 设置边框 cellspacing 设置单元格的间距 bgcolor ...
- Web前端--HTML+CSS+JS实现仿切水果小游戏
目录 代码目录: 主要代码实现: 源码获取 效果演示: 代码目录: 主要代码实现: CSS样式: * {margin: 0;padding: 0;list-style-type: none;touch ...
- 前端html+css+js弹窗的实现
近期由于项目需要,学习了一下js弹窗的实现,感觉挺简单的. html代码部分: <!doctype html> <html lang="en"> <h ...
- 前端HTML+CSS+JS+AJAX知识点
HTML+CSS 1.主流浏览器+内核: IE trident Firefox Gecko Google chrome Webkit/blink Safari Webkit Opera presto ...
最新文章
- 如何将mysql卸载干净
- Vishay将MCW 0406 AT系列精密宽端子薄膜片式电阻欧姆值降至业内最低
- CHIL-SQL-FIRST() 函数
- C++骑士走棋盘Knight tour算法(附完整源码)
- 20130320java基础学习笔记-dos命令及java临时环境变量配置
- 用.NET进行客户端Web开发？看这个Bootstrap风格的BlazorUI组件库
- 【转】CMake Error: The current CMakeCache.txt directory CMakeCache.txt is different than the directory
- matlab三维货位图,遗传算法求三维立体仓库货位优化MATLAB源码
- 深入hibernate的三种状态
- 基于FPGA实现的高速串行交换模块实现方法研究
- 神经网络十大学习率衰减提效策略！
- 公式推导 11-21
- 个人网站建设教程|本地网站环境搭建|网站制作教程
- 请没有买房和买车的朋友一定认真的看一下，看后再做决定吧..
- Effect Size
- 计算机科学相关的期刊,计算机类期刊汇总（核心期刊，国家级期刊）
- 服务器显示拥挤进不去怎么办,《拥挤城市》游戏进不去怎么办 玩不了解决方法...
- 微信、tim文件访问失败解决方法
- 三角形的测试用例设计案例
- 计算机原理学习（1）