您的位置:首页 > 财经 > 金融 > 宁波网络推广哪家公司好_深圳防疫最新情况实时_百度一下百度搜索官网_营销新闻

宁波网络推广哪家公司好_深圳防疫最新情况实时_百度一下百度搜索官网_营销新闻

2025/3/20 1:37:57 来源:https://blog.csdn.net/a15670247200/article/details/146292296  浏览:    关键词:宁波网络推广哪家公司好_深圳防疫最新情况实时_百度一下百度搜索官网_营销新闻
宁波网络推广哪家公司好_深圳防疫最新情况实时_百度一下百度搜索官网_营销新闻

1.HTML

先为大家介绍几个学习前端的网站:菜鸟教程,w3school,CSS

HTML:超文本标记语言

超⽂本: ⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它的学者所加的评注、补充或脚注等等

1.1 认识 HTML 标签

HTML 代码是由 "标签" 构成的.

形如:

1 <h3>我是三级标题</h3>

标签名 (body) 放到 < > 中

⼤部分标签成对出现. <h1> 为开始标签, </h2> 为结束标签.

少数标签只有开始标签, 称为 "单标签".

开始标签和结束标签之间, 写的是标签的内容.

开始标签中可能会带有 "属性". id 属性相当于给这个标签设置了⼀个唯⼀的标识符(⾝份证号码).

1.2HTML 文件基本结构

在VS中输入!后敲击回车,会自动生成HTML的基本结构

html 标签是整个 html ⽂件的根标签(最顶层标签)

head 标签中写⻚⾯的属性.

body 标签中写的是⻚⾯上显⽰的内容

title 标签中写的是⻚⾯的标题.

1.3简单HTML开发 

在body中写入:第一个HTML开发,然后ctrl+s保存,在文件中以浏览器打开

1.4HTML常见标签

1.4.1标题标签h1-h6

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>这是h1标签</h1><h2>这是h2标签</h2><h3>这是h3标签</h3><h4>这是h4标签</h4>
</body>
</html>

1.4.2段落标签p 

在HTML中, 段落, 换⾏符, 空格都会失效, 如果需要分成段落, 需要使⽤专⻔的标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>这是h1标签</h1><p>这是一个段落</p><h2>这是h2标签</h2><h3>这是h3标签</h3><h4>这是h4标签</h4>
</body>
</html>

在HTML中用于另起一行

在HTML中:

html 内容⾸尾处的换⾏, 空格均⽆效.

在 html 中⽂字之间输⼊的多个空格只相当于⼀个空格.

html 中直接输⼊换⾏不会真的换⾏, ⽽是相当于⼀个空格

1.4.3换行标签br

 换行也可以使用br标签

br 是⼀个单标签(不需要结束标签)

br 标签不像 p 标签那样带有⼀个很⼤的空隙.

<br/> 是规范写法. 不建议写成 <br>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>换行<br/>换行<br/>换行<br/>换行<br/></body>
</html>

1.4.4 图⽚标签: img

img 标签必须带有 src 属性. 表⽰图⽚的路径.

<img src="https://m.360buyimg.com/seckillcms/s150x150_jfs/t1/274275/4/2437/22524/67d2989bF5c0b9cd0/680c6ed27abdb414.jpg" alt="">

 

其他的参数:

width/height: 控制宽度⾼度. ⾼度和宽度⼀般改⼀个就⾏, 另外⼀个会等⽐例缩放. 否则就会图⽚失衡.

border: 边框, 参数是宽度的像素. 但是⼀般使⽤ CSS 来设

    <img src="https://m.360buyimg.com/seckillcms/s150x150_jfs/t1/274275/4/2437/22524/67d2989bF5c0b9cd0/680c6ed27abdb414.jpg" width="500px" height="800px">

 

1.4.5 超链接: a

<a href="https://www.jd.com">京东</a>

 

点击后会跳转到京东 

href: 必须具备, 表⽰点击后会跳转到哪个⻚⾯.

target: 打开⽅式. 默认是 _self. 如果是 _blank 则⽤新的标签⻚打开

链接的⼏种形式:

1.外部链接: href 引⽤其他⽹站的地址

<a href="http://www.baidu.com">百度</a>

2.内部链接: ⽹站内部⻚⾯之间的链接. 写相对路径即可.

在⼀个⽬录中, 先创建⼀个 1.html, 再创建⼀个 2.html

<!-- 1.html -->我是 1.html<a href="2.html">点我跳转到 2.html</a><!-- 2.html -->我是 2.html<a href="1.html">点我跳转到 1.html</a>

3.空链接: 使⽤ # 在 href 中占位.

<a href="#">空链接</a>

1.4.6表格标签

table 标签: 表⽰整个表格

tr: 表⽰表格的⼀⾏

td: 表⽰⼀个单元格

thead: 表格的头部区域

tbody: 表格的主体区域.

 

表格标签有⼀些属性, 可以⽤于设置⼤⼩边框等. 但是⼀般使⽤ CSS ⽅式来设置.

这些属性都要放到 table 标签中.

align 是表格相对于周围元素的对⻬⽅式. align="center" (不是内部元素的对⻬⽅式)

border 表⽰边框. 1 表⽰有边框(数字越⼤, 边框越粗), "" 表⽰没边框.

cellpadding: 内容距离边框的距离, 默认 1 像素

cellspacing: 单元格之间的距离. 默认为 2 像素

width / height: 设置尺⼨.

注意, 这⼏个属性, vscode 都提⽰不出来

 

    <table border="1"><tr><td>1</td><td>2</td><td>3</td></tr>   </table>

 1.4.7表单标签

表单域: 包含表单元素的区域. 重点是 form 标签

表单控件: 输⼊框, 提交按钮等. 重点是 input 标签

1.4.7.1 input标签

type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等

name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选⼀

value: input 中的默认值

checked: 默认被选中.(⽤于单选按钮和多选按钮)

1.4.7.2 from标签

提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送请求

<form action="test.html"><input type="text" name="username"><input type="submit" value="提交">
</form>

action:将数据提交到那个界面

1.4.8 select 标签

下拉菜单

option 中定义 selected="selected" 表⽰默认选中

    <select><option>北京</option><option selected="selected">上海</option></select>

1.4.9无语义标签div  /  span

真实业务一般都用这个

用于页面布局

div是下图的大盒子

span是下图的小盒子

在盒子中有许多元素

    <div><span>span</span><span>span</span><span>span</span></div>

 

 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com