# shgg-html5 **Repository Path**: wizen/shgg-html5 ## Basic Information - **Project Name**: shgg-html5 - **Description**: 2024年河南省骨干教师培训-计算机应用技术-HTML5 - **Primary Language**: HTML - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-07-06 - **Last Updated**: 2024-07-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 软件版本 * Adobe Dreamweaver 2021 * 常用快捷键 1. CTRL+SHIFT+D:删除文本 2. W1200+TAB:快速指定宽度 3. CTRL+E:新建CSS样式 4. CTRL+D:复制一行 * 常见标签 1. `
`:换行 2. `
`:下划线 ## 软件初始化 1. 站点 -> 新建站点
![](pic/1.png)
2. 设置站点对象
![](pic/2.png)
3. 设置网站图片资源路径
![](pic/3.png)
4. 保存网站图片资源的加载路径
![](pic/4.png)
5. 新建第一个html
![](pic/5.png)
## 案例一 中国政府网站新闻 参考网址:[中国政府网站](https://www.gov.cn/yaowen/liebiao/202407/content_6961222.htm) #### 站点目录结构 ```text ├─gov │ index.html ├─css │ style.css └─img lq1.jpg lq2.jpg trs_favicon.ico ``` #### 网页代码 ```html ***出席2024世界人工智能大会暨人工智能全球治理高级别会议开幕式并致辞

***出席2024世界人工智能大会暨人工智能全球治理高级别会议开幕式并致辞


新华社上海7月4日电(记者 冯歆然、龚雯)国务院总理***7月4日在上海出席2024世界人工智能大会暨人工智能全球治理高级别会议开幕式并致辞。

7月4日,国务院总理***在上海出席2024世界人工智能大会暨人工智能全球治理高级别会议开幕式并致辞。新华社记者 王晔 摄

***表示,2018年首届大会召开时,***主席专门发来贺信,指出新一代人工智能为经济社会发展注入了新动能,正在深刻改变人们的生产生活方式。这些年来,人工智能的新技术不断突破、新业态持续涌现、新应用加快拓展,已成为新一轮科技革命和产业变革的重要驱动力量,同时在法律、安全、就业、道德伦理等方面也面临着一系列新课题。

***指出,中国始终积极拥抱智能变革,大力推进人工智能创新发展,高度重视人工智能安全治理,实施了一系列务实举措,发布了《全球人工智能治理倡议》,向第78届联合国大会提出了加强人工智能能力建设国际合作决议并获得一致通过,为全球人工智能发展和治理作出积极探索,贡献了建设性思路和方案。

***强调,人工智能发展迫切需要各国深入探讨、凝聚共识,共抓机遇、共克挑战。中国愿与各国一道,推动人工智能更好服务全球发展、增进人类福祉,共同走向更加美好的智能未来。***提出三点建议:一是深化创新合作,释放智能红利。促进技术联合攻关、数据跨境流动、设备自由贸易和设施互联互通,加强基础研究和人才交流合作,共同维护产业链供应链安全稳定,推动创新成果不断涌现、产业发展持续突破、智能红利更大释放。二是推动普惠发展,弥合智能鸿沟。携手打造开放、公平、非歧视的人工智能发展环境,帮助发展中国家加强能力建设,推进网络、算力、数据等普惠化,为广大中小企业和普通民众提供低门槛、低价格的人工智能服务,实现更大程度的数字包容。三是加强协同共治,确保智能向善。加强发展战略、治理规则、技术标准等对接协调,推动建立普遍参与的国际机制,形成具有广泛共识的治理框架和标准规范,确保人工智能发展安全、可靠、可控,始终符合人类的根本利益和价值标准。

巴西联邦最高法院院长巴罗索、新开发银行行长罗塞夫、联合国工业发展组织总干事穆勒等外方嘉宾及国际组织、产学研等各界代表约1000人出席开幕式。

开幕式后,***同与会外方嘉宾、国际组织代表共同巡馆,并与有关科研机构和企业负责人互动交流。

7月4日,国务院总理***在上海出席2024世界人工智能大会暨人工智能全球治理高级别会议开幕式并致辞。这是开幕式后,***同与会外方嘉宾、国际组织代表共同巡馆。新华社记者 王晔 摄

大会发表《人工智能全球治理上海宣言》。

陈吉宁、吴政隆参加上述活动。

XXX老师制作于河南水利与环境职业学院

毫不松懈做好防汛抢险救灾各项工作

毫不松懈做好防汛抢险救灾各项工作-图集


``` #### 网页样式css ```css /* CSS Document */ /* 不带点样式为标签,作用全局;带点不带点样式设置class属性后生效 */ .container{ /* 设置新闻页面容器宽度 */ width: 1200px; /* 容器宽度设置 */ margin: auto; /* 自动分配内容多余位置 */ } h1 { background-color: #E1E1E1; /* 背景颜色设置 */ text-align: center; /* 设置文本在其父容器中居中 */ } h3 { text-align: center; /* 设置文本在其父容器中居中 */ } .lq { display: block; /* 样式转换为块,调整图片居中显示 */ margin: auto; /* 自动分配内容多余位置 */ text-align: center; /* 设置在其父容器中居中 */ } p { text-indent: 2em; /* 首行缩进两字符 */ line-height: 1.8em; /* 段落行间距设置 */ } .blue { color: blue; /* 颜色设置 */ } .blue:hover { font-size: 22px; /* 字体大小设置 */ transform: 2s; /* 动画2s过渡 */ } .red { color: red; /* 颜色设置 */ color: red; /* 颜色设置 */ } .red:hover { font-size: 22px; /* 字体大小设置 */ transform: 2s; /* 动画2s过渡 */ } .author { margin: auto; /* 自动分配内容多余位置 */ text-align: right; /* 设置在其父容器中居右 */ } .logo { margin-top: 10px; /* 外边距顶部距离 */ margin-bottom: 10px; /* 外边距底部距离 */ } .kh1 { display: block; /* 样式转换为块,调整图片居中显示 */ margin: auto; /* 自动分配内容多余位置 */ } .kh2 { border-radius: 50%; /* 变椭圆操作 */ width: 250px; /* 宽度设置 */ padding: 15px; /* 外边距距离 */ float: left; /* 浮动在左侧 */ } .weibo { vertical-align: middle; /* 垂直居中 */ } .bn1 { text-align: center; background: #029cfd; line-height: 2.5em; color: #fff; } .banner-2 { display: flex; /* 弹性布局:两个块标签放入一个父容器中 */ } .img-banner { margin-right: 15px; } .banner-3 { display: flex; justify-content: space-between; /* 弹性布局:左右侧贴,中间平分 */ /*justify-content:space-around; */ /* 弹性布局:左右边距,中间平分 */ } .b3-img { width: 280px; } .b3-p { text-indent: 0; /* 首行缩进设置为0 */ text-align: center; } .footer-info { display: flex; justify-content: center; /* 弹性布局:水平方向居中 */ align-items:center; /* 弹性布局:垂直方向居中 */ background-color: #0171B7; } .footer-info-p { text-indent: 0; color: #fff; } .nav-1 { background-color: #7E06BB; } .nav-content { list-style: none; /* 去除导航点 */ display: flex; justify-content: space-between; /* 弹性布局:水平方向居中 */ line-height: 40px; } .nav-content li a:hover { background-color: #714AA2; color: #000; } .nav-content li a { color: #fff; text-decoration: none; /* 去除导航下划线 */ display: block; padding: 0px 20px; transform: 0.5s; } ``` #### 知识点 * margin和padding
![](pic/6.png)
> margin是外边距,padding是内边距 > > margin是标签和标签之间的空白 > > padding是标签边框(Border)和内容(Content)之间的空白 * 弹性布局:两个块标签放入一个父容器中 * `TAB` div+img+div+h3+p+p+h5 快速创建多标签 * 导航:`nav>ul>li*7>a{政府新闻}` + TAB * 去除导航点:ul样式添加 `list-style: none;` * 去除下划线:.**(ul样式) li a -> `text-decoration: none;` * 导航栏水平均匀布局: 1. ul样式设置弹性布局:`display: flex;` 2. a标签转为块:`display: block;` ## 案例二 Bootstrap4 #### Bootstrap引入步骤 1. 新建站点 2. body中插入bootstrap ![](pic/7.png) 3. 更改title并保存 * 案例代码 ```html Bootstrap4

毫不松懈做好防汛抢险救灾各项工作

常天气多发,各地各部门要切实警觉起来,抓实抓细工作举措,全力确保安全度汛。要加强灾害预报预警和应急响应,全面落实直达基层一线的临灾预警“叫应”机制。要严防强降雨引发各类次生灾害,全面排查城市防洪排涝薄弱环节,加快补齐农田防汛排涝短板。要切实发挥水利工程作用,加强上下游、左右岸、干支流、省际间统筹协调,提前做好应对主雨带继续北移准备。要全力做好抢险救援和救灾救助,提高基础设施灾害设防水平,对极端情况要有足够的防范应对措施。一旦发生灾害,要统筹调派各类救援力量,第一时间开展救援,努力把人员伤亡和灾害损失降到最低。要统筹抓好抗旱减灾,强化抗旱水源调配,确保群众饮水安全和秋粮丰收。在白鹿镇,***主持召开防汛形势分析会议。听取江西省、庐

毫不松懈做好防汛抢险救灾各项工作

坚持防患未然

坚持防患未然

坚持防患未然

坚持防患未然

111111111111111
``` #### Bootstrap4 网格系统 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。我们也可以根据自己的需要,定义列数:
![](pic/8.png)
#### 网格类 Bootstrap 4 网格系统有以下 5 个类: * .col- 针对所有设备 * .col-sm- 平板 - 屏幕宽度等于或大于 576px * .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px) * .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px) * .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px) #### Bootstrap4 导航 如果你想创建一个简单的水平导航栏,可以在 `