国外设计模板网站,注册公司的七个步骤,在线教学网站建设,文本文档做网站怎么加图片写在前面
1、基于2022级计算机大类实验指导书
2、代码仅提供参考#xff0c;前端变化比较大#xff0c;按照要求#xff0c;只能做到像#xff0c;不能做到一模一样
3、图片和文字仅为示例#xff0c;需要自行替换
4、如果代码不满足你的要求#xff0c;请寻求其他的…写在前面
1、基于2022级计算机大类实验指导书
2、代码仅提供参考前端变化比较大按照要求只能做到像不能做到一模一样
3、图片和文字仅为示例需要自行替换
4、如果代码不满足你的要求请寻求其他的途径
运行环境
window11家庭版
WebStorm 2023.2.2
实验要求、源代码和运行结果
1、编写代码实现图中1-1所示的页面效果。 图1-1 实验内容效果示意图
1新建html文档ex1-1.html。
2通过h3标签创建标题。
3通过hr标签绘制横线。
4通过p标签完成每行文字的输入。
5通过sub创建下标通过sup创建上标。
6特殊字符空格为nbsp;
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title
/head
bodyh3欢迎来到我的主页/h3hrp我是计算机工程学院2022级学生/pp我的学号是220600xxxxx/pp姓名xxx/pp我的特长是数学5sup2/sup4sup2/sup41/p
/body
/html 2、采用HBuilder编写代码实现1-2所示的页面效果
1新建html文档ex1-2.html。
2通过hn标签创建列表的标题。
3通过ul标记实现无序列表的创建。
4页头区域添加 logo图像图像路径为images/headerimg.ing。
5导航区4个列表项设为超链接其中“首页”超链接地址为空链接#,“目录”超链接地址为空链接#“关于我们”超链接地址为空链接#,“联系我们”超链接地址为空链接#。
6内容区主体部分在介绍地球日文字的后面添加图像,图像路径为images/greenery.png。
7内容区边栏一“目录”的列表项设为链接到页面开始位置。内容区边栏二“做什么”的列表项设为链接连接到当前位置。完成后页面显示效果如图1-2所示。 图1-2
!DOCTYPE html
html langen
headmeta charsetUTF-8title/title
/head
bodyimg srcimages/headerimg.png altLogoullia href#首页/a/lilia href#目录/a/lilia href#关于我们/a/lilia href#联系我们/a/li/ulh2地球日/h2img srcimages/greenery.png alt地球日图像p介绍地球日文字的内容/ph4目录/h4ullia href#活动影响/a/lilia href#创始人/a/lilia href#历年主题/a/lilia href#历年国内活动/a/li/ulh4做什么/h4ullia href#倡导低碳生活/a/lilia href#从身边的小事做起/a/lilia href#从节约资源做起/a/lilia href#科学发展/a/lilia href#公众参与/a/lilia href#防治有毒化学品污染/a/li/ulp2018,我们的地球日/p
/body
/html 3、采用HBuilder编写代码实现图1-3所示的锚点定位要求
① 实例包括两个页面ex1-3a.html和ex1-3b.html。
② 在ex3-1a.html文件中有章节标题链接。
③ 在ex3-1b.html文件中有三个小说章节内容且每个章节标题都是H2标题标记。
④ 当点击ex3-1a.html文件中的章节标题链接时自动定位到ex3-1b.html中对应的章节内容所在的锚点位置。
图1-3锚点定位示意图
1分别创建ex3-1a.html和ex3-1b.html两个文档文件。
2在ex3-1a.html文件中采用a标记创建链接。
3在ex3-1b.html文件中采用p标记和br/,hn标记创建文档内容。
4链接定位到锚点的语法为a href”#锚点名称”/a。
Experiment1_3_1.html
!DOCTYPE html
html langen
headmeta charsetUTF-8title/title
/head
bodyh1红楼梦/h1p红楼梦介绍/pullia hrefExperiment1_3_2.html#first第一回xxx/a/lilia hrefExperiment1_3_2.html#second第二回xxx/a/lilia hrefExperiment1_3_2.html#third第三回xxx/a/li/uldetailssummary更多章节/summarylia href#第四回xxx/a/lilia href#第五回xxx/a/lilia href#第六回xxx/a/li/details
/body
/html
Experiment1_3_2.html
!DOCTYPE html
html langen
headmeta charsetUTF-8title/title
/head
bodya namefirsth2第一回/h2p第一回内容/p/aa namesecondh2第二回/h2p第二回内容/p/aa namethirdh2第三回/h2p第三回内容/p/a
/body
/html
点击第一回链接前 点击第一回链接后
