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）是西方神话传说中的人物，在传说中西方圣诞节前夜时悄悄赠送礼物给小孩子，是耶稣基督诞辰瞻礼即西方圣诞节的代表角色之一。他普遍被认为是基督教的圣人圣·尼古拉斯（Saint
Nicholas）的衍生形象，圣诞老人的起源或与一种被称为毒蝇伞的红白相间蘑菇有关 [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"><img
src="./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" /><label
for="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>
扫一扫
2840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
