Day 011

前段三大技术

HTML：负责显示页面内容（文字、按钮、输入框等）
CSS：负责页面的布局和样式
JavaScript：负责实现对应功能

前端文件的后缀名：html、htm、shtml

html：现在最常用的前段文件后缀名。
htm：htm和html相等，从前DOS操作系统后缀名存在限制，长度<=3
shtml:内置了脚本命令的html文件

HTML简介

HTML文件理解为一个html标签，html标签里面包含head标签和body标签
head标签存放页面部分配置项，body标签显示页面内容

html 标签分为双标签（一般标签）、单标签（自闭合标签）
双标签：<标签名属性1=属性值1 属性2=属性值2 …></标签名>
单标签：<标签名属性1=属性值1 属性2=属性值2 …>或者
<标签名属性1=属性值1 属性2=属性值2 …/>

属性=属性值 ——>固定写法，用于修改标签的内容和样式
标签名 ——> 固定写法，不同的标签用于显示不同的内容，用法是固定的

html语法和Markdown语法属于同一类

!DOCTYPE html 声明为 HTML5 文档。

html 元素是 HTML 页面的根元素。

head 元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。

title 元素描述了文档的标题

body 元素包含了可见的页面内容

h1 元素定义一个大标题

p 元素定义一个段落


<!-- 声明这是一个html5文件 -->
<!DOCTYPE html>
<html><head><!-- charset用于页面指定编码 --><meta charset="utf-8" /><!-- 页面的标题 --><title></title></head><body></body>
</html>

一、文本标签html

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

1.标题标签h1、h2…h6

a.标签之间可以相互嵌套

         <h1>我是一级标题</h1><h2>我是二级标题</h2><h3>我是三级标题</h3><h4>我是四级标题</h4><h5>我是五级标题</h5><h6>我是六级标题</h6>

2.段落与换行

a. 段落标签：p
b. 标题标签和段落标签会自动换行（一个标签代表一行或者一段，写下一个标签的时候自动另起一行。
c. 换行：br
d. 水平线标签：hr

3.空格

a. html页面敲任意个空格恒等于一个空格
b. html一个空格可以用下列两种方式表示：&nbsp 或者&emsp
c. &nbsp表示一个像素单位（px）的空格
d. &emsp表示一个汉字的宽度一个&emsp=16个&nbsp

     <p> 中新网7月5日电 国家卫健委5日就健康中国行动实施以来进展与成效举行发布会，健康中国行动推进委员会办公室副主任、国家卫生健康委规划司司长毛群安在会上介绍称，目前，我国人均预期寿命提高到77.93岁，主要健康指标居于中高收入国家前列，《“健康中国2030”规划纲要》2020年阶段性目标总体如期实现，健康中国行动2022年主要目标提前实现，健康中国建设开局起步良好、进展顺利，为我国全面建成小康社会、推动“十四五”经济社会发展发挥了重要作用。</p><p>毛群安指出，健康中国行动实施取得了明显的阶段性成效：</p>

4.文字的特殊表现方式

a.倾斜标签：i，em。
b. 加租标签：b，strong。

     <i><b>文字倾斜又加粗</b></i><b><i>文字倾斜又加粗</i></b><em>文字倾斜</em><strong>文字加粗</strong>

5.行内文本标签：span

<span>我的京东</span> | <span>京东会员</span> | <span>登陆&nbsp;注册</span><h1><b><i>一级加粗倾斜标签</i></b></h1><b><b> 双层加租 </b></b>

二、超链接和图片

1.图片标签：img

src:1.可以写入链接2.可以写本地图片路径
alt：当图片不显示时，显示文字
title：鼠标放在图标上面可以提示文字
width、heihet：能够修改图片、标签盒子等的显示宽度和高度

 <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度"title="点击一下，了解更多"><img src="./img/程序员.jpg" alt="程序员" title="单身狗" width="100px" heigt="250">

2. 超链接标签：a

href：

引入在线链接
引入本地文件(必须是html文件)
可以引入id选择器

target：

._self：当前标签页跳转（默认）
_target:新的标签页跳转

 <a href="https://www.baidu.com"target="_blank">百度一下</a><a href="./01-文本标签.html">文本标签</a><!-- 将图片或文字变为可点击的超链接 --><a href="https://yrzx.qq.com/act/2890/a20200518xz/index.html"target="_blank"><img src="https://game.gtimg.cn/images/ulink/act/2890/a20200518xz/bg-kv1.jpg" alt="一人之下" title="单身狗" width="200px" heigt="100"><p>一人之下手游</p></a>

3. 用id选择器页面跳转

id属性如何调用：使用#号调用id属性
例：例如我在顶部设置一个一级标题并且写入id 在底部设置id 选择器，输入顶部id进行跳转。

<h1 id = "top">顶部</h1><!-- n多内容 --><a href="#top"><img src="./img/回顶部.jpg" alt="返回顶部" title="返回顶部"width="50px" heigt="50px">
</a>

使用此方法可以设置中部底部，与上同理。

三、列表和内联框架

1.内联框架

iframe：内联框架。
iframe：经常被用在登录、注册页面。
可用width 、 height 对其进行页面大小的调整。

 <iframe src="https://www.bilibili.com/" width = "1700px"h height="500px" ></iframe>

2.列表

列表：有序列表ol、无序列表 ul
列表中的内容放在 li
列表在网站中主要用来做下拉菜单和展示同一类内容

     <ul><p>千峰成都校区科学一览</p><li>Java</li><li>前端</li><li>Python</li><li>UI</li><li>物联网</li></ul><ol><p>千峰成都校区科学一览</p><li>Java</li><li>前端</li><li>Python</li><li>UI</li><li>物联网</li>   </ol>

四、input标签

1.input

input：默认是一个文本框，但是通过修改type的属性值可以将input构造成不同的形式
placeholder：输入框中的提示性文字
maxlength：限制输入内容的长度
value：当input变为按钮时，在按钮上显示文字

 <span>账号：</span><input type="text" placeholder="请输入账号" ><br><span>密码：</span><input type="password" placeholder="请输入密码"maxlength="5"><input type="submit" value="登录"><br>

可改变类型

 <input type="color"><input type="file"><input type="date"><input type="time"><br><input type="datetime-local">

2.单选框

radio：单选框。
name：告诉系统，两个单选框属于同一类。
将单选框中的id属性值设置为和lable标签中的for 属性值想同，表示相关联。

     <input type="radio" name = "gender" id=gender1><label for="gender1">男</label><input type="radio" name = "gender" id=gender2><label for="gender2">女</label><br><input type="radio" name="测评" id="1"><label for="1">非常优秀</label><input type="radio" name="测评" id="2"><label for="2">优秀</label>

3.多选框

checkbox：复选框，可多选。

     <p>今晚吃啥</p><input type="checkbox"name="food"id="one"><label for="one">面条</label><input type="checkbox"name="food"id="two"><label for="tow">炒菜</label><input type="checkbox"name="food"id="three"><label for="three">火锅</label><input type="checkbox"name="food"id="four"><label for="four">水饺</label>

学习使我快乐第十一天相关推荐

c语言stl用法,C STL快速入门！学习使我快乐
C++ STL中最基本以及最常用的类或容器无非就是以下几个: ▶ string ▶ vector ▶ set ▶ list ▶ map 下面就依次介绍它们,并给出一些最常见的最实用的使用方法,做到快速 ...
大数据证实：学习使人快乐
感恩节到了,为了回馈大家对ProHR的支持,我们要给大家分享一个变快乐的简单方法: 最近有一个基于领英用户调查的研究告诉我们,越爱学习的人,越快乐. 这项研究中有几个有意思的数字,那些愿意在工作中花时 ...
团队使我成长，学习使我快乐
如何才能获得更好的知识传授?很多人可能会想到去上课.参加培训或者阅读相关书籍.然而,除了这些常规做法外,自主学习也是一个不错的选择. 自主学习指的是在没有外部指导的情况下,通过自己的努力和探索来获取知 ...
学习使我快乐---CountDownLatch的典型应用
CountDownLatch的典型应用前言一.CountDownLatch是什么? 二.案例分析 1.代码示例 2.输出结果 3.个人理解方法简要说明总结前言面试官:下面有这么一个场景&q ...
做软件这几年，学习使我快乐
转载请注明出处:王亟亟的大牛之路开题之前先安利,最近一年懒很多,博客基本没写什么,库也没大更新,最近几周会刻苦挤出些东西,安利地址:https://github.com/ddwhan0123/Use ...
学习使我快乐学习使我升华只要你爱学习我们就是一辈子的好朋友
[不知道是什么的总(xia)结(bibi)] 回到家一直在练题练题写题解写题解看小说看小说出去玩(晋江的文有点好看啊喂,出去玩有点烧钱啊啧女人). ~~~如果这都不算爱~~~我有什么 ...
学习使我快乐第五天
Day 05 一.列表运算 1.列表的重复可直接使用*使其重复,需注意 *号需跟整数,意思是代表重复次数. 例: list1=[1, 2, 3 , 4]print(list1*3) 打印结果为 [1 ...
学习使我快乐第六天
Day 6 一.字符串字符串的作用:传递信息字符串的表达方式:使用单引号或者双引号引起来的一串符号或者字符. 1.字符串的性质: a.字符串是有序的(下标,切片). b.字符串是不可改变的,所以字 ...
为什么学习使我快乐？
书山有路勤为径,学海无涯苦作舟. 学习知识要善于思考,思考,在思考. 人总是要学习的.死的时候,才是毕业的时候. 对世界上的一切学问与知识的掌握也并非难事,只要持之以恒地学习,努力掌握规律,达到熟悉的 ...

学习使我快乐第十一天

Day 011

前段三大技术

HTML简介

一、文本标签html

1.标题标签h1、h2…h6

2.段落与换行

3.空格

4.文字的特殊表现方式

5.行内文本标签：span

二、超链接和图片

1.图片标签：img

2. 超链接标签：a

3. 用id选择器页面跳转

三、列表和内联框架

1.内联框架

2.列表

四、input标签

1.input

2.单选框

3.多选框

学习使我快乐第十一天相关推荐

最新文章

热门文章

学习使我快乐 第十一天

Day 011

前段三大技术

HTML简介

一、文本标签html

1.标题标签h1、h2…h6

2.段落与换行

3.空格

4.文字的特殊表现方式

5.行内文本标签：span

二、超链接和图片

1.图片标签：img

2. 超链接标签：a

3. 用id选择器页面跳转

三、列表和内联框架

1.内联框架

2.列表

四、input标签

1.input

2.单选框

3.多选框

学习使我快乐 第十一天相关推荐

最新文章

热门文章

学习使我快乐第十一天

学习使我快乐第十一天相关推荐